Keep Going

[CSS] box model 본문

카테고리 없음

[CSS] box model

seon 2023. 4. 12.
반응형

[ opening ]

css가 표시하는 모든 것은 box이다.

그래서 box model이 작동하는 방식을 이해하는 것이 가장 기본이다.

 

[ Content & Sizing ]

extrinsic sizing이란, 우리가 일반적으로 알고 있는 width, height에 숫자 값을 주는 것이다.

instrinsic sizing이란, width: max-content; height: max-content; 으로 값을 주는 것이다.

 

box를

extrinsic sizing(외부 크기 조정)을 한다면, content가 사이즈를 넘어설 때 overflow가 생긴다.

+ overflow란, 콘텐츠가 박스에 비해 너무 클 경우를 이야기한다.

+ overflow 속성으로 넘치는 content를 제어할 수 있다.

intrinsic sizing(내부 크기 조정)을 한다면 box 사이즈를 어떻게 지정해두었는지에 상관 없이, content의 최대 크기대로 box가 늘어난다.

 

[ Areas of the box model ] 

box는 4가지 area로 구성되어있다.

● content box : content 그 자체

● padding box : box 내부에 잡히는 공간이며, 스크롤바가 padding box 범위 안에서 잡힌다.

● border box : border 속성을 사용되는 곳이다.

● margin box : outline , box-shadow 속성을 사용되는 곳이다. box 크기에 영향을 미치지 않는다.

 

[ Controlling the box model ] 

< display >

● display : block; // inline space를 채운다. // <div>의 default

● display : inline; // 블록 여백이 있다. // <span>의 default

● display: inline-block; // 요소가 콘텐츠만큼만 커진다.

 

< box-sizing : 너비와 높이를 계산하는 방법을 지정한다. >

● box-sizing : content-box; // 모든 요소의 default

+ content-box 란?

: width, height 치수가 content box에 적용된다는 뜻이다. padding, border 값들은 width, height에 추가되어 box 크기가 결정된다. 

● box-sizing : border-box;

+ border-box 란?

: padding, border도 box의 크기로 고려한다. width = border+padding+content_width , height = border+padding+content_height 

● box-sizing: border-box; 가 일반적으로는 더 편하기 때문에 normalize시키는 코드를 적어두면 좋다.

*,
*::before,
*::after {
  box-sizing: border-box;
}
반응형