CSS Box Model

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.

Box Model

CSS를 사용하여 브라우저의 화면을 구성하기 위해서는 Box Model을 이해하는 것이 매우 중요하다.

CSS의 property 중에는 HTML의 박스타입에 영향을 주는 property가 있고, 이 property들은 서로에게 영향을 끼치고 있기 때문에 제대로 이해하지 못한다면 생각했던 것과 다른 결과를 출력하게 된다.

따라서 반드시 Box Model에 대한 이해가 동반되어야만 원하는 레이아웃을 바탕으로 브라우저의 화면을 만들 수 있다.

display : 요소의 박스 타입을 설정한다.
- block
- inline
- inline-block : inline의 속성처럼 동작하지만 block처럼 width, margin, padding을 사용할 수 있다.
- flex
- grid
- none : 요소의 존재를 삭제한다.
border : border 값이 추가된 만큼 요소의 크기가 커진다.
(단축) width, style(solid, dotted, dashed, double...), color
overflow : 요소의 크기 이상으로 내용(content)이 넘쳤을 때 보이는 여부를 제어한다.
- visible : 기본
- hidden : 숨김
- scroll : 무조건 스크롤이 생김
- auto : 내용이 영역보다 많아서 영역에서 넘치면 scroll이 생기게 한다.
opacity : 투명
box-sizing : 요소의 크기 계산 기준을 지정함
- content-box
- border-box : 너비나 높이에 padding, border를 포함하여 계산한다.
width : 요소의 display 값에 따라 브라우저가 다르게 계산해서 적용한다.
height : 요소의 display 값에 따라 브라우저가 다르게 계산해서 적용한다.
min- : 요소의 최소 길이(지정된 값) 보다 더 작은 길이를 가질 수 없다.
max- : 요소의 최대 길이(지정된 값) 보다 더 큰 길이를 가질 수 없다.

width, height, min-, max- 의 값 지정
px, em, rem, vw, vh 등 단위로 지정

currentColor
해당 요소의 color 속성을 뜻함

margin과 padding 비교
`margin` (요소의 외부 여백)	`padding` (요소의 내부 여백)
중복 (병합)이 일어나는 경우 형제 요소의 top, bottom과 만났을 때 부모 요소의 top과 자식요소의 top이 만났을 때 부모 요소의 bottom과 자식 요소의 bottom이 만났을 때 `margin` 병합 현상이 일어났을 때 `margin` 계산법 양수값 : 더 큰 값, 음수값 : 더 작은 값 `inline-block`의 경우 `margin` 병합 현상이 일어나지 않는다.	추가된 `padding` 값 만큼 요소의 크기가 커진다. 지정 사이즈를 사용하고 싶을 때 직접 계산해야 함. (`box-sizing`을 사용하면 브라우저가 계산한다.)
`-top`, `-right`, `-bottom`, `-left`의 개별 속성을 가지고 있으며 단축 속성 사용시 `top`부터 시계방향으로 지정할 수 있다.

clear : float 속성이 적용되지 않도록 해제
- none : 요소 띄움 허용
- left : left 해제
- right : right 해제
- both : 양쪽 다 해제
부모에 overflow 속성 추가 (* float과 상관없는 속성을 사용하는 것으로 일종의 편법이다.)

부모에 미리 지정된 clearfix 추가 (추천)

.clearfix::after {
    content : "";
    clear : both;
    display: block;
}

static : 기준 없음 / 배치 불가능 / 기본
relative : 요소 자신을 기준으로 (주변형제 요소에 영향)
absolute : 부모(위치 상의) 요소를 기준
(부모의 position이 static이 아닌 다른 속성 값이 지정되어야 한다. 만약 부모의 position이 static이라면 static이 아닌 속성이 나올 때까지 상위로 이동하여 가장 상위인 브라우저까지 올라가게 된다. top, bottom 등 offset값이 설정되어 있지 않으면 normal flow에 따른 자신의 위치에 떠 있는다.)
fixed : 브라우저(뷰포트) 기준
stiky : 스크롤 영역 기준으로 (offset값이 1개 이상 존재해야 한다. IE 지원 안 함)

top, right, bottom, left : 기준에 맞는 거리를 설정. 음수값 사용가능 (%의 경우 부모 요소의 가로길이 비율로 지정됨)
z-index : position이 있을 때 작동