1. 박스 모델의 정의 (Box Model)
2. 박스모델 영역 별 속성
① content 속성
② padding 속성
③ border 속성
④ margin 속성
⑤ box-sizing 속성
3. 마치며
1. 박스 모델의 정의 (Box Model)
<!-- 예제 소스코드 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박스 모델이란 무엇인가?</title>
</head>
<body>
<p>
Box란 HTML 문서가 랜더링될 때<br/>
각 요소가 사각형 형태로 차지하고 있는 영역을 말한다.
</p>
</body>
</html>위의 소스 코드를 복사해서, html 문서로 만들고 이를 웹 브라우저에서 열어보자.
이제 여기서 '개발자 도구'를 한 번 열어서 <p> 요소를 클릭해보자.
그러면 아래와 같은 형태로 해당 요소에 하이라이트가 들어온 것을 확인할 수 있다.
<p> 태그는 블록 레벨 요소를 만드는 블록 태그이기 때문에
웹 브라우저의 한 영역을 사격형의 형태로 전부 차지하고 있다.
여기서 HTML 요소가 차지하고 있는 영역을 '박스(Box)'라고 한다.
그리고 이러한 박스를 CSS를 통해서 크기나 위치, 속성(색상, 배경, 테두리 모양 등)을 임의로 조정할 수 있으며
'내용(content)', '안쪽 여백 (padding)'. '테두리(border)', '바깥 여백(margin)' 네 가지로 구성되어 있다.
content (내용)
=> 텍스트나 이미지 등 요소의 실질적인 내용이 들어간 부분
padding (안쪽 여백)
=> content와 border 사이의 간격으로 눈에 보이지 않는다.
border (테두리)
=> content와 padding 주변을 감싸는 테두리
margin (바깥 여백)
=> border, 테두리와 다른 이웃 요소들 사이의 간격, padding처럼 눈에 보이지는 않는다.
2. 박스모델 영역 별 속성
① content 속성
- 'width'와 'height' 속성을 통해서 content 영역의 너비와 높이를 임의로 지정할 수 있다.
- px, em 등의 단위로 content 영역의 크기를 명시한다.
- width와 height를 통해서 지정한 크기는 content 영역에만 적용되고
나머지 padding, border, margin 영역에는 적용되지 않는다.
<!-- content 영역 크기 지정 예제 -->
<style>
p {
width: 100px;
height: 20px;
}
</style>
<!--
<p>area</p>
-->
② padding 속성
- 내용(content)과 테두리(border) 사이 간격인 padding 영역의 크기를 설정하는 속성
- 'background-color' 속성으로 설정한 배경색이 동일하게 적용된다.
- 'padding-(top/right/left/bottom)' 네 가지 속성을 통해서 padding 영역의 상하좌우 크기를 지정할 수 있다.
<!-- padding 영역 크기 지정 예제 -->
<style>
p {
<!-- 글자색, 배경색 설정 -->
color: white;
background-color: blue;
<!-- content 영역 설정-->
width: 100px;
height: 20px;
<!-- padding 영역 크기 지정-->
padding-top: 5px;
padding-left: 10px;
padding-right: 15px;
padding-bottom: 20px;
}
</style>
<!--
<p>area</p>
-->
③ border 속성
- content와 padding 영역을 둘러싸는 테두리의 스타일을 설정하는 속성
- 하위 속성으로 'border-style', 'border-color', 'border-width'가 존재한다.
(1). border-style 속성
- 테두리의 모양을 원하는 형태로 지정 가능한 속성
- 사용할 수 있는 속성 값으로는 none(테두리 無), hidden(테두리 숨김), solid(직선), dotted(점선) 등이 있다.
border-style 예제
박스 모델 예제 border-style: solid; => solid(직선)
border-style: dotted; => dotted(점선)
border-style: dashed; => dashed(굵은 점선)
border-style: double; => double(이중실선)
border-style: groove; => groove(파인 형태 테두리)
border-style: none; => none(테두리 없음)
여기서 다루지 않은 나머지 border-style 속성 값은 아래의 링크를 참고하길 바란다.
MDN - CSS border-style
(2). border-color 속성
- 테두리의 색상을 설정하는 속성, 기본적인 color 속성 값을 사용한다.
- 테두리 색상을 별도로 지정하지 않았다면, 해당 요소에서 설정한 color 속성 값을
그대로 적용받는다.
- 'border-(top/left/right/bottom)-color' 속성을 통해서
테두리의 색상을 각기 다르게 지정하는 것도 가능하다.
border-color 예제
박스 모델 예제 border-color: red; => 테두리 색상=red
border-(top/left/right/bottom)-color: red/blue; => 테두리 색상=red,blue
(3). border-width 속성
- 테두리의 두께를 설정하는 속성
px, em, cm과 같은 css 크기 단위를 이용해서 테두리 두께를 설정한다.
- thin(얇은), medium(보통), thick(굵은)과 같은 미리 설정된 예약어를 통해서
테두리 두께를 설정하는 것도 가능하다.
- 'border-(top/left/right/bottom)-width' 속성을 통해서
테두리 두께를 상하좌우 각기 다르게 설정할 수 있다.
border-width 속성
박스 모델 예제 border-width: 10px; => 테두리 두께=10px
border-(top/bottom/right/left)-width: 10px/20px; => 테두리 두께=10, 20px
border-width: thick; => 테두리 두께=thick
④ margin 속성
- content, padding, border 영역을 감싼 margin 영역의 크기를 설정하는 속성
- padding과는 다르게 'background-color'로 설정한 배경색은
margin 영역에 적용되지 않는다.
- 'margin-(top/left/right/bottom)' 속성을 통해서 margin 영역의
상하좌우 크기를 다르게 설정할 수 있다.
- 'margin: 20px 50px 30px 50px;'과 같이 축약해서 설정도 가능하다.)
(여기서 적용되는 순서는 top - right - bottom - left 순으로 적용된다.)
속성 값이 20px, 30px, 50px로 3개라면 top - (right, left) - bottom 순으로
30px, 50px로 2개라면 (top, bottom) - (right, left) 순으로 적용된다.
⑤ box-sizing 속성
- 요소의 너비와 높이를 계산하는 방법을 지정하는 속성
- 'content-box', 'border-box' 두 가지 속성 값을 사용한다.
p {
width: 50px;
height: 50px;
box-sizing: content-box;
/* width, height로 정한 크기를 content 영역에만 적용한다.*/
box-sizing: border-box;
/* width, height 값을 border 영역까지 적용한다.*/
}3. 마치며
2023.04.17 - 본문 뼈대 완성
2023.10.21 목차 - 본문 바로가기 추가
'Frontend > CSS' 카테고리의 다른 글
| [CSS] position 속성 (0) | 2023.08.09 |
|---|---|
| [CSS] 선택자 1 (기본, 그룹 선택자) (0) | 2023.03.24 |
| [CSS] CSS 개요 (CSS 정의, 기본 문법) (0) | 2023.03.20 |
