본 글은 CSS 박스모델에 대하여 알아보고자 합니다.
- 목차 -
가. Css 박스모델을 알아야 하는 이유
나. Css 박스모델의 의미
다. Css 박스모델의 구성
0. 개발자 창으로 Css 박스모델 확인 법
1. 내용(content)
2. 패딩(padding)
3. 테두리(border)
4. 마진(margin)
라. box-sizing 속성
마. 참고자료
가. Css 박스모델을 알아야 하는 이유
Css(cascading style sheets)는 웹의 뼈대인 html을 꾸미는 역할을 하고 있습니다. 그 중에 Css 박스모델은 컨텐츠의 크기, 간격, 여백 등을 조절하기 때문에 웹 사이트에 스타일을 적용하기 위해서는 당연히 알아야 하는 개념임이 틀림 없습니다. 다음 글 부터 Css 박스모델의 의미부터 속성들까지 알아보고자 합니다.
나. Css 박스모델의 의미
모든 Html 요소는 박스(box) 모양으로 구성되며, 이것을 Css 박스모델이라고 부릅니다. 아래 예시 사진을 살펴봅시다.
위의 이미지를 통해 확인할 수 있듯이 네이버 로고만을 보면 박스 모양으로 되어있지는 않습니다. 하지만 글 아래에서 알려드릴 개발자창을 통해 html 요소를 확인해본 결과 네이버 로고도 html 요소이기 때문에 박스모양으로 되어있다는 것을 확인할 수 있습니다.
다. Css 박스모델의 구성
Css 박스모델은 내용(content), 패딩(padding), 테두리(border) 그리고 마진(margin)으로 이루어져 있습니다.
0. 개발자 창으로 Css 박스모델 확인 법
잠깐, 다음 내용으로 가기전에 개발자 창을 통해 Css 박스모델 확인하는 방법을 먼저 알려드리고자 합니다.
1) 웹 사이트에 접속합니다.
2) 키보드 상단의 "F12"키를 누르거나 또는 웹 사이트의 빈 공간에서 마우스 오른쪽 버튼을 클릭하고 "검사"라는 항목을 클릭합니다.
3) 위의 항목을 수행 시 개발자 창이 등장하고 요소의 정보를 보기 위해서는 개발자창의 좌측 상단 마우스모양을 클릭합니다.
4) 확인하고자 하는 요소를 웹 사이트에서 클릭합니다.
(마우스를 위에 올리기만 해도 아래 이미지와 같이 정보를 확인할 수 있습니다.)
5) 요소를 클릭하면 개발자 창에서 html의 구조와 Css가 적용된 속성들을 확인할 수 있습니다.
6) Css 속성을 확인할 수 있는 창에서 맨 아래로 내리면 css 박스모델을 확인할 수 있는 이미지를 볼 수 있습니다.
여기까지 개발자 창으로 Css 박스모델을 확인할 수 있는 방법이였으며 다음 내용부터 Css 박스모델 구성을 알아보고자 합니다.
1. 내용(content)
내용(content)은 텍스트, 이미지, input, div 요소 등 모든 실질적인 내용 부분입니다.
개발자 창에서 요소를 클릭했을 때 스타일 탭(Css 속성들을 확인할 수 있는 탭의 명칭)의 가장 안쪽 영역이 content 입니다.
위의 이미지에서 content가 512x102라고 되었는데 이것의 의미는 content 너비가 512px, 세로가 102px이라는 의미 입니다.
내용에 너비와 높이를 적용하기 위해서는 css의 width 속성과 height 속성을 사용합니다.
/* Css 너비와 높이 예시 코드 */
div{
width : 150px;
height: 200px;
}
2. 패딩(padding)
패딩(padding)은 내용(content)와 테두리(border)사이의 간격입니다.
위 이미지 스타일 탭의 박스모델에서 padding 이라고 적혀있으며 초록색 영역이 패딩(padding) 영역을 나타내고 있습니다. 양 옆으로 35라고 적혀있고 위 아래로는 "-" 표시가 되어있는데, 양 옆은 35px 적용되어 있으며 위 아래로는 패딩값이 없다는 것을 표현하고 있습니다.
실제 요소에도 양 옆으로 초록색 영역이 패딩을 표현하고 있습니다.
아래는 Css 패딩(padding) 속성을 사용하는 방법 입니다.
div{
/* 축약 코드 */
padding : 10px; /* 위, 아래, 좌, 우 : 10xp */
padding : 10px 5px; /* 위, 아래 : 10xp / 좌, 우 : 5px */
padding : 10px 5px 7px; /* 위 : 10px / 좌, 우 : 5px / 아래 : 7px */
padding : 10px 5px 7px 4px; /* 위 : 10px / 우 : 5px / 아래 : 7px / 좌 : 4px / 시계방향 */
/* padding 4개 방향을 별도로 작성할 수 있습니다. */
padding-top: 10px; /* 위 : 10px */
padding-right: 10px; /* 오른쪽 : 10px */
padding-bottom: 10px; /* 아래 : 10px */
padding-left: 10px; /* 왼쪽 : 10px */
}
3. 테두리(border)
테두리(border)는 내용(content)과 패딩(padding)을 감싸는 테두리 선 입니다.
위 이미지 스타일 탭의 박스모델에서 border 라고 적혀있으며 노란계열의 영역이 테두리(border)를 표시해주고 있습니다. 위, 아래, 좌, 우로 1씩 적혀있는 것은 양 사방으로 1px씩 테두리가 적용되어 있다는 것을 나타내고 있습니다.
아래는 Css 테두리(border) 속성을 사용하는 방법 입니다.
div{
/* 축약 코드 */
border : 1px solid black; /* 위, 아래, 좌, 우 : 1px 실선 검정색 */
/*
border 속성을 아래와 같이 분해하여 작성할 수 있습니다.
border-width : 테두리의 두께 (px단위, thin, medium, thick)
border-style : 테두리 스타일 (solid, dashed, dotted 등)
border-color : 테두리의 색상 (black, #000 등)
*/
/* border 4개 방향을 별도로 작성할 수 있습니다. */
border-top: 1px solid black; /* 위 : 1px 실선 검정색 */
border-right: 1px solid black; /* 오른쪽 : 1px 실선 검정색 */
border-bottom: 1px solid black; /* 아래 : 1px 실선 검정색 */
border-left: 1px solid black; /* 왼쪽 : 1px 실선 검정색 */
}
4. 마진(margin)
마진(margin)은 테두리(border)를 감싸는 영역 입니다.
위 이미지 스타일 탭의 박스모델에서 margin 이라고 적혀있으며 갈색계열의 영역이 마진(margin)을 표시해주고 있습니다.
위 이미지에서는 위 4, 아래 5, 좌우는 "-"표시가 되어있는데 이것의 의미는 위로 4px, 아래로 5px, 좌우는 값이 없다는 것을 나타내고 있습니다.
아래는 Css 마진(margin) 속성을 사용하는 방법 입니다.
div{
/* 축약 코드 */
margin : 10px; /* 위, 아래, 좌, 우 : 10xp */
margin : 10px 5px; /* 위, 아래 : 10xp / 좌, 우 : 5px */
margin : 10px 5px 7px; /* 위 : 10px / 좌, 우 : 5px / 아래 : 7px */
margin : 10px 5px 7px 4px; /* 위 : 10px / 우 : 5px / 아래 : 7px / 좌 : 4px / 시계방향 */
/* margin 4개 방향을 별도로 작성할 수 있습니다. */
margin-top: 10px; /* 위 : 10px */
margin-right: 10px; /* 오른쪽 : 10px */
margin-bottom: 10px; /* 아래 : 10px */
margin-left: 10px; /* 왼쪽 : 10px */
}
라. box-sizing 속성
box-sizing 속성은 요소의 너비와 높이 계산하는 방법을 설정합니다.
1) box-sizing : content-box;
컨텐츠 영역을 기준으로 크기를 결정합니다.
content-box는 기본 값으로 content 영역과 padding, border 값을 다 더한 값이 요소의 너비와 높이가 됩니다.
위의 이미지를 보면 box-sizing : content-box;를 설정하지 않아도 기본 값으로 적용되어 있는 모습입니다. content 영역의 너비, 높이 값에 패딩 값과 테두리 값을 합산하여 요소의 너비와 높이가 결정 됩니다.
- 너비 계산 : 100px(너비 값) + 40px(padding 좌, 우 너비 합산) + 10px(border 좌, 우 너비 합산) = 150px;
- 높이 계산 : 50px(높이 값) + 40px(padding 위, 아래 높이 합산) + 10p(border 위, 아래 높이 합산) = 100px;
2) box-sizing : border-box;
테두리(border)를 기준으로 크기를 결정합니다.
border-box는 요소의 너비 값과 높이 값이 있다면 패딩 값과 테두리 값은 각각의 너비 값과 높이 값 안쪽에 영역이 추가됩니다.
box-sizing : border-box;는 패딩 값과 테두리 값이 추가되어도 요소의 너비 값과 높이 값을 넘어서지 않습니다.
- 너비 계산 : 100px(너비 값) = 100px; (패딩 값, 테두리 값이 포함되지 않음)
- 높이 계산 : 50px(높이 값) = 50px; (패딩 값, 테두리 값이 포함되지 않음)
여기까지 Css 박스모델의 의미와 구성에 대해서 알아보았습니다.
Css의 박스모델을 이해하셨다면 컨텐츠의 크기, 여백, 영역 등을 지정할 수 있으므로 html 요소 레이아웃 배치에 대한 이해도가 높아졌을 것으로 예상됩니다.
저의 글을 읽어주셔서 감사합니다.
마. 참고자료
1. https://www.youtube.com/c/개발자의품격 / 부트캠프 中 - css 박스모델
2. https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing / MDN - box-sizing
3. http://www.tcpschool.com/css/css_boxmodel_boxmodel / TCP SCHOOL - 박스 모델
4. https://www.naver.com/ / 예시 이미지 사용