CSS Box Model

모든 HTML 요소들은 브라우저에서 렌더링 될 때 CSS 박스 모델에 따라 네모난 박스로 표현 됩니다. 사용자들이 보는 UI는 수 많은 네모 박스들의 집합 입니다.

1. 박스의 구성

HTML 요소들은 모두 박스 안에 박스들을 가지고 있습니다.
총 4가지의 박스로 이루어져 있는데 이를 '박스 모델' 이라고 합니다.

• 콘텐츠(content)박스 : 요소의 콘텐츠가 표시되는 영역으로 넓이는 width 그리고 높이는 height와 같은 속성을 사용해서 설정할 수 있습니다.

• 패딩(padding)박스 : 패딩은 콘텐츠와 테두리 사이의 공간입니다. 패딩의 크기는 padding과 관련 속성을 사용해 제어할 수 있습니다.

• 보더(border) 박스 : 보더 박스는 콘텐츠와 패딩을 둘러싸는 테두리입니다. 보더의 크기와 스타일은 border와 관련 속성을 사용하여 제어할 수 있습니다.

• 마진(margin) 박스 : 마진은 보더 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할을 합니다. 마진 박스의 크기는 margin과 관련 속성을 사용하여 제어될 수 있습니다.

2. 박스의 유형

CSS에는 크게 두 가지 박스 유형이 있습니다. 바로 블록 박스와 인라인 박스 입니다.

2.1 블록 박스

블록박스는

• 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채웁니다. 상위 컨테이너에서 사용 가능한 공간을 채웁니다.
• width와 height 속성을 사용하여 스타일을 컨트롤 할 수 있습니다.
• 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어냅니다.

2.2 인라인 박스

인라인 박스는

• 기본적으로 컨텐츠 박스만큼의 크기만 가집니다. 때문에 새 줄로 행을 바꾸지 않습니다.
• width와 height 속성을 사용할 수 없습니다.
• 패딩과, 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있습니다. 해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않습니다.

2.3 박스의 유형을 결정하는 속성 : display

display 속성은 박스의 성질을 지정하여 다른 박스들과 어떤 방식으로 위치가 배치 될지 결정합니다. display 속성은 크게 외부의 다른 형제, 부모 박스들과의 배치에 영향을 미치는 외부 디스플레이 타입과, 내부 자식 박스들의 배치에 영향을 미치는 내부 디스플레이 타입으로 크게 나눌 수 있습니다.

2.3.1 외부 디스플레이 타입

• inline : 인라인 박스로 박스의 유형을 결정합니다.
• block : 블록 박스로 박스의 유형을 결정합니다.
• inline-block : inline 처럼 한 줄에 여러 요소가 존재할 수 있습니다. block처럼 width, height, margin, padding 등 모든 값을 지정할 수 있습니다. inline 속성의 특징과 block 속성의 특징이 함께 존재하는 박스

2.3.2 내부 디스플레이 타입

• flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x축 혹은 y축의 단방향으로 설정하는 속성
• grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축과 Y축을 모두 이용해 배치하는 속성

3. 표준 CSS 박스 모델 (Standard CSS Box Model)

표준 CSS 박스 모델에서 요소의 전체적인 크기는 컨텐츠 박스와 보더박스, 패딩박스의 너비와 높이 값을 모두 더해 정해집니다. 이번에는 앞서 언급한 각각의 박스 영역을 제어하는 속성들에 대해 알아 보겠습니다.

3.1 width, height

표준 CSS 박스 모델에서는 블록 박스인 경우 width, height 값을 통해 content box의 크기를 제어합니다.

3.2 border

보더는 보더 박스 영역의 스타일을 정의 합니다.
표준 박스 모델에서 보더는 요소가 차지하는 전체 너비와 높이의 일부 입니다.

border는 아래와 같은 property를 가집니다.

• border-width : 선의 두깨
• border-style : 선의 모양
• border-color : 선의 색깔

3.2.1 border-width

• 길이 지정 - 속성 값을 px와 같은 단위로 직접 지정
• medium - 중간 굵기
• thin - 얇은 실선
• thick - 굵은 선

3.2.2 border-style

선의 형태는 실선, 점선, 파선 등 다양하게 설정가능하며 아예 없앨 수도 있습니다.

• none : 선을 없앱니다
• solid : 직선입니다.
• dotted : 점선
• dashed : 파선으로 바느질선과
• double : 평행한 이중선
• groove : 테두리가 오목하게 안쪽으로 파인 선
• ridge : 테두리가 볼록하게 나온 입체감 있는 선
• inset : 요소가 전체적으로 안으로 들어가 보이는 형태
• outset : 요소가 튀어나온것 처럼 보임

3.2.3 border-color

테두리에 색을 입히는 속성

3.2.4 radius

테두리의 꼭짓점을 둥글게 만듭니다. 설정한 값을 반지름으로 하는 원을 박스의 꼭짓점에서 그려 둥근 테두리를 그리는 원리 입니다.

또한 50% 값을 주게되면 손쉽게 원을 그릴 수 있습니다. 요소 넓이의 절반만큼 반지름을 가지는 원을 그리기 때문입니다.
사각형의 모든 꼭짓점을 둥글게 할 수도 있지만 한 꼭짓점만 둥글게 만들 수도 있습니다.

3.3 padding, margin

3.3.1 padding

패딩은 박스 영역의 스타일을 정의 합ㄴ디ㅏ.
표준 css 박스 모델에서 패딩은 요소가 차지하는 전체 너비와 높이의 일부 입니다.

3.3.2 margin

마진 박스 영역의 스타일을 정의 합니다.
표준 css 박스모델에서 마진은 요소가 차지하는 전체 너비와 높이에 포함되지 않습니다. 다만 박스의 외부 공간에만 영향을 미칩니다.

마진 상쇄 현상

블럭레벨 요소 사이에서 마진 탑과 바텀의 공간이 있을 경우 더 높은 값의 마진이 적용되는 현상
부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상

.child 요소의 마진 값이 부모 영역을 넘어서고 있는 모습을 확인할 수 있습니다. 이런 현상을 해결하지 않는다면 여러분의 생각과 다른 UI가 구성될 가능성이 있습니다. 예를 들어 부모와 자식요소 모두에게 마진탑을 주고 싶은 경우 낮은 값의 마진 탑 값이 상쇄되어 버립니다.

이러한 현상을 해결하는 방법
1. 부모 요소에 overflow 속성값을 적용
2. 부모 요소에 display:inline-block
3. 부모 요소에 border 값을 적용

4. 대체 CSS 박스 모델 (Alternative CSS Box Model)

표준 CSS 박스 모델에서 요소의 전체 크기는 컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값을 모두 더해 정해진다. 하지만 박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 불편하고 귀찮게 느껴질 수 있습니다.

이러한 이유로 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 width는 페이지에서 차지하는 박스의 너비가 되고 height는 박스의 높이가 됩니다.

대체 박스 모델의 콘텐츠 영역 크기는 width와 height에서 패딩 및 테두리 너비를 뺀 값이 됩니다.

4.1 box-sizing

box-sizing 속성을 통해 표준 박스 모델을 대체 박스 모델로 변경할 수 있습니다.

h1 {
	box-sizing: border-box;
	/*box-sizing: content-box; --> box-sizing의 기본 값입니다. 표준 박스 모델에서 사용됩니다. */ 
}

이렇게 설정하면 박스 모델 중에 보더 박스의 영역까지 설정한 width, height 값으로 적용 됩니다. 매우 직관적으로 요소의 크기를 설정하는 것이 가능하기 때문에 널리 사용되는 방법 입니다.