box-sizing
- content-box일 때는 Width값과 height값을 적용할 때 패딩과 border는 제외된다.
- border-box일 떄는 width, height값 안에 패딩과 border가 포함된다.
Relative length
- vw: viewport width
- vh: viewport height
- vmax: viewport의 너비와 높이 중 큰 것을 기준 삼는다.
- vmin:viewport의 너비와 높이 중 작은 것을 기준 삼는다.
Padding
- 콘텐츠와 테두리 사이의 여백
- %value: 컨테이너 블럭의 너비(width)값을 참조. (마진도 동일함)
.parent { width: 100px }
.child {
padding-left: 25%
padding-top: 50%
}
Keep Aspect-ratio
활용예시) 유튜브 영상 iframe으로 임베드하기
- vw를 사용하는 경우: 정확히 꽉 채울 때는 유용하다. 다만, 스크롤이나 페이지 패딩이 적용된 경우는 유용하지 않다.
- aspect-ratio 속성 사용하는 경우:
aspect-ratio: 100 / 56.25
사파리, 삼성인터넷 지원 확인 필요.
- padding-top percent value 활용하는 경우: 👍🏼
.utube {
position: relative;
padding-top: 56.26%;
}
.utube__iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
- 누적 배치 변경 문제 해결, 스켈레톤 UI 제공할 때, 이미지 지연 로딩 기법 사용할 떄, content-visibility: auto 속성을 사용할 때, 활용할 수 있다. 요소와 문서의 전체 높이를 일정하게 유지하는 데에 필요하다.
Margin
- 다른 박스와 테두리 사이의 여백
- %value: 컨테이너 블럭의 너비값을 참조 (padding과 동일)
- 수직 마진은 병합된다.
- 수직마진 병합규칙 (블럭 요소 사이에서만 발생, 양수끼리 음수끼리 만난 경우 절대값이 큰 값 적용. 양수와 음수가 만난 경우 두 값의 합.)
- 수직마진 병합예외 (최상위 요소(body)의 수직마진, 부모의 flow-root, 부모의 overflow가 hidden, auto, scroll일때, 부모의 padding-top/bottom값이 0이 아닌 경우, 부모의 border-top/bottom이 0이 아닌 경우, display가 inline이거나 inline-*인 경우, float left이거나 right인 경우)