CSS 노트

box-sizing: border-box;
margin, padding이 width, height 박스에 다 포함되어 부모.자식이 들어맞게 된다. 

position: relative;

absolute 포지션을 가진 자식 요소가 위치를 참조할 수 있게한다. 

 

clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

이건 어려우니까 이걸 여러모양으로 만들어주는 사이트를 참조할 것

 

animation: moveInBottom .5s ease-out .75s;

순서: name duration timing-function delay

 

animation-fill-mode: backwards; 

애니메이션 실행 전에 animation-name의 초기값이 적용되도록 함

 

CSS Cascade, 적용 순서

1. !important
   1. User의 !important선언
   2. Author의 !important선언
   3. Author의 선언
   4. User의 선언
   5. 브라우저의 기본 선언
2. Specificity
   1. 인라인 스타일
   2. 아이디
   3. 클래스, 의사 클래스, 속성
   4. 요소, 의사 요소
3. 코드의 순서

가장 마지막 선언이 다른 선언 다 덮어쓴다.

Value 값이 정해지는 과정

1. 값 선언
2. Cascade 이후
3. Cascade가 없는 경우 기본 초기 값들 (마진, 패딩은 기본 0)
4. 상대값을 절대값으로 변환
5. 레이아웃을 보고 값을 계산함
6. 브라우저와 장치의 제한(소수점을 없애는 반올림 등)

상대값이 절대값으로 변환되는 방법

1. % fonts – 부모의 계산완료된 폰트크기 * x%
2. % lengths – 부모의 계산완료된 넓이 * x%
3. em fonts – 부모의 계산완료된 폰트크기 * x
4. em lengths – 현재 요소의 계산완료된 폰트크기 * x
5. rem – 루트의 폰트크기 * x
6. vh
7. vw

이런 거 쓰는 이유 :

폰트 크기만 바꿔도 레이아웃 크기를 자동으로 조정할 수 있어

더 Responsive한 레이아웃을 만들 수 있음.