레이아웃, 여백의 비밀 암기노트📝

9rganizedChaos·2022년 7월 27일
0
post-thumbnail

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% /* ==25px */
  padding-top: 50% /* ==50px */
}

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인 경우)
profile
부정확한 정보나 잘못된 정보는 댓글로 알려주시면 빠르게 수정토록 하겠습니다, 감사합니다!

0개의 댓글