TIL 30 , Box model

heyho9292·2021년 8월 19일
0

HTML & CSS

목록 보기
12/18
post-thumbnail

https://www.boostcourse.org/cs120/lecture/92914?isDesc=false

Box model

상 우 하 좌 순으로 생각하면 된다. (시계방향)

Margin

좌우의 margin이 모두 auto로 적용 되었다면, 브라우저는 요소가 가질수 있는 가로 영역에서 자신의 width(꼭 필요)를 제외한 나머지 여백에 크기에 대해 균등 분할 하여 적용합니다.

Margin collapse(마진 병합)

두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미.

  1. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어납니다.
  2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
  • 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어납니다.
  • 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어납니다.
  1. 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어납니다.

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않습니다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 합니다.

Margin & Padding

%는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정 됩니다.
만약 위와 같은 코드의 경우에는 margin과 padding이 모두 20px 10px 20px 10px으로 적용되는 것이 아니라, 10px 10px 10px 10px 값으로 적용됩니다.

width

기본 값 : 0

auto
브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다.

length
고정값으로 지정합니다. (ex. px, em ....)

percent
부모 요소의 width에 상대적인 크기를 지정합니다.

위와 같이 선언되어있다면 요소의 총 가로 크기는 160px가 됩니다.
분명 width: 100px를 적용했는데 어떻게 160px가 된 걸까요?
앞선 설명에서 언급한 바와 같이 width는 padding, border 영역에 대해서 영향을 받기 때문입니다.


위와 같이 코드를 적용하면,
parent의 컨텐츠 width가 300,
child는 그 width의 50% 라서 150px.
총 사이즈는 210이 된다.

height

요소의 세로 크기를 정의하는 데 사용하는 속성입니다.
width와 마찬가지로 정확히는 content 영역의 높이를 지정하는 것입니다.

percent로 지정시,
부모 요소의 height에 상대적인 크기를 지정합니다. * 단, 부모 요소가 명시적으로 height 값이 있어야 합니다.

profile
이전 개업 ---> https://heyho92.tistory.com/

0개의 댓글