CSS Related Info

CSS Basic Info

(1) 인라인(inline) 태그와 블록(block) 태그

①inline 태그

    <a>, <em>, <strong>, <span>, <input> 등 폼에 관련된 태그들

 

②block 태그

<div>, <p>, <h1~h6>, <section>, <article>, <nav>, <header>, <footer>

※ 글자를 감싸는 것을 위주로 쓰이는 형태의 〈p〉, 〈h1~h6〉에는 다른 block태그를 넣지 않는다.
※ a같은 인라인 요소는 넓이나 높이를 가지지 않는다. 굳이 주고 싶다면, display:flex나 block으로 바꿔주면 height 같은 걸 쓸 수 있다.

 

 

(2) 상속

①기본적으로 태그들은 부모의 속성 스타일을 그대로 상속받는다.
②단, 몇몇 태그는 부모의 특정 속성의 스타일을 상속받지 않는다.
- a태그는 부모로부터 color를 상속받지 않는다.
- input과 textarea, select는 부모로부터 font-family를 상속받지 않는다.
- 강제로 상속받게 하려면 inherit를 써야한다

 

 

(3) margin과 padding

①margin

개체를 기준으로 바깥을 설정하는 것. 단, 위 아래 margin을 동시에 설정하면 큰 것만 적용된다. 즉, 위쪽 개체에 margin-bottom:100px 과 아래쪽 개체에 margin-top:50px가 설정되어 있는 경우, 100px만이 적용된다. 이런 현상을 마진 병합(Margin Collapsing)이라고 한다.

 

②padding

개체 그 내부의 패딩을 설정하는 것. 단점은 글자 크기가 바뀌면 padding의 크기도 바뀐다는 점. 다만, padding을 안쓰고 넓이를 쓰면 글자수가 다를 경우 개체 간 간격이 안맞게 될 수 있음
  
  
(4) element가 쌓이는 순서
①위에서 아래로. 아래에 있을 수록 위로 올라간다
②만약 position 속성이 있으면 태그의 순서와 상관없이 위로 올라간다.
③쌓이는 순서는 z-index로 바꿀 수 있다*
  

   
(5) 폰트 사이즈 단위
px픽셀: 절대크기
em: 부모크기를 따라가는 것, 부모 조부모가 있을 경우 겹쳐쓰면 알아보기 힘듬
rem: 루트(root)를 따라가는 것. 기준이 명확함
    

(6) 스타일 적용 우선순위
①tag에 직접
②id
③class
④tag{}
같은 순위일 때는 디테일할 수록 우선순위가 높다.
또 적용하고 싶은 css에다 !import를 쓰면 최우선 적용된다. 단, 남발하지 말 것

 

 

(7) CSS 상에서 뭔가를 연산할 필요가 있을 때

p {

  width: calc(100% - 100px);

}

주의! 연산기호를 떨어뜨려야 한다

 

 

(8) 변화할 때 속도 바꾸기

p {

  transition: color 0.25s ease 0.5s;

}

:변화하는 요소 / 변화속도 / 방식 / 딜레이 값;
ease는 가속 감속 이동에 관한 것
ease in은 감속, ease out은 가속

 

 

(9) 불투명 유리처럼 바뀌는 효과 주기

p {

  backdrop-filter: blur(30px);

}