[CSS] 박스 모델

• 콘텐츠 영역
• padding
• margin
• border

박스 모델은 상하좌우 4개의 방향에 있어서 margin, padding 등을 지정할 때 다양한 방법으로 적용할 수 있습니다.

4개의 방향에 대한 값을 작성할 때 순서를 잘기억해 두어야합니다. 

순서 : top -> right -> bottom -> left

박스 모델의 기본요소

1. 콘텐츠 영역

컨텐츠 영역의 크기를 지정하는 방법은 다양한 방법을 사용하는데(px, pt, vh, vw, em, rem) 등의 여러 단위를 사용해서 크기를 지정합니다. 

그런데 만약 width: 100px, height: 100px를 적용했다고 생각해봅시다. 여기서 padding: 100px를 적용하면 어떻게 될까요?

width,height:100px; padding:100px를 적용

width:100px, height:100px를 적용했지만 padding으로 인해 300px*300px의 크기를 가진 박스가 되었습니다. 실제 웹사이트를 제작할 때 padding길이까지 계산하여 박스의 크기를 정하는 경우에는 혼란을 일으킬 수 도 있습니다. 이럴 때 사용하는 속성이 box-sizing입니다.

1-1. box-sizing

box-sizing의 값에는 border-box, content-box가 있습니다. 우리가 기억할 것은 border-box입니다.

border-box : 테두리까지 포함해서 너빗값을 지정합니다.

content-box : 콘첸트 영역만 너빗값을 지정합니다.(기본값)

box-sizing:border-box적용

padding 값으로인해 컨텐츠 값은 없어진 것을 알 수 있습니다. 이렇게 border-box를 이용해서 padding, border로 인해 혼동을 피하면서 박스의 크기를 지정해 줄 수 있습니다.

 

2. padding 영역

앞에서 먼저 padding을 사용했는데 padding은 앞서보았듯이 콘텐츠와 테두리 사이의 여백을 설정합니다.

방향을 지정할 수 있는데 순서는 top -> right -> bottom -> left 입니다. margin에서도 동일한 순서로 값을 지정해줍니다.

방향을 생략하면서 값을 이정해줄 수도있는데 이를 정히해보면 아래와 같습니다.

1개의 값 -> padding : (상,하,좌,우)

2개의 값 -> padding : (위,아래) (좌,우)

3개의 값 -> padding : (상) (좌,우) (하)

4개의 값 -> padding : (상) (우) (하) (좌)

 

3. margin 영역

margin영역은 요소의 주변의 여백을 설정합니다.

방향을 지정하는 방법은 padding과 같으므로 생략하겠습니다.

 

4. 테두리 영역

테두리(border)의 속성으로 border-style, border-width, border-color 3가지가 있습니다.

4-1. border-style

• hidden : 테두리를 감춥니다.
• solid : 테두리를 실선으로 표시합니다.
• dashed : 테두리를 짧은 직서으로 표시합니다.
• double : 테두리를 이중선으로 표시합니다.
• groove : 테두리를 창에 조각한 것처럼 표시합니다. 홈이 파인 듯 입체 느낌이 납니다.

왼쪽부터 solid, dashed, double

4-2. border-width

테두리의 두께를 지정하는 속성으로 크기를 직접 단위로 지정해주는 방법과 thin, medium, thick와 같은 예약어를 사용하는 방법이있습니다.

왼쪽부터 thin, medium, thick