CSS 04 : Box Model(content, padding, border, margin), Box Sizing
Box Model CSS 속성
박스 모델은 속성을 지정하지 않으면 브라우저가 선언한 기본값으로 세팅되며, 우리는 CSS 속성으로 박스 모델 값을 변경할 수 있다.
가장 안쪽 영역부터 content, padding, border, margin이라고 한다.
Content
- width, height : 가로, 세로 너비 지정
ex) width: 200px;
인라인 요소에는 width, height가 적용되지 않음. 인라인 요소는 콘텐츠만큼의 영역을 갖기 때문
display: inline-block으로 가로 세로 너비를 변경 가능함.
span {
border: 1px solid red;
width: 100px;
height: 100px;
display: inline-block;
}
바깥 여백 Margin
margin-top, margin-bottom, margin-left, margin-right 속성으로 지정가능. 보통 4개를 다 쓰지만 생략도 가능.
margin: 4px 2px 2px 4px;
margin-top: 20px;마진 중첩
HTML요소를 세로 배치할 경우 margin과 margin이 만날 때 margin이 큰 쪽으로 겹쳐짐.
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.shape {
border: 1px solid red;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div class="shape"></div>
<div class="shape"></div>
</body>
</html>
margin 20px 짜리가 두개 합쳐지면 40이 돼야 하는데 20으로 되었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.shape {
border: 1px solid red;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div class="shape" style="margin-bottom: 40px"></div> /*인라인 스타일을 적용하면 우선순위로 적용됨. */
<div class="shape"></div>
</body>
</html>
위쪽 요소의 마진이 더 크기 때문에 마진값이 크게 적용된 것을 확인할 수 있다.
Border
html요소의 테두리
border, border-width, border-style, border-color 속성
4개 방향 값 한번에 지정 시 top->right->bottom->left 순
예시
border-style: solid;
border-style: dotted solid dashed solid;
border-left-style: solid;
- border-width
테두리 두께 지정.
thin, medium, thick이 값으로 올 수 있음.
예시
border-width: 1px;
border-width: thin thin;
border-width: 8px 5px 4px 9px;
border-left-width: 2px;
- border-color
테두리 색상 지정
예시
border-color: blue;
border-color: yellow red;
- border
단축 속성.
border-top, border-right, border-left, border-bottom을 사용해 스타일을 각각 지정할 수 있음
예시
border: 1px solid red;
border: 4px dashed green;
- border-radius
테두리 꼭짓점을 둥글게 만듬. (50%는 완전한 원이 됨)
예시
border-radius: 30px;
border-radius: 10% 20%;
Box Sizing
HTML요소의 너비와 높이를 계산하는 방법 지정.
- content-box : 기본 CSS박스 크기 결정법.
CSS 박스 모델에서 지정한 너비, 높이는 HTML요소의 Content 크기에 적용됨.
요소에 테두리(Border)나 안쪽 여백(Padding)이 있으면 너비와 높이에 더해서 화면에 그림.
- border-box : 테두리와 안쪽 여백도 요소의 크기(너비, 높이)로 고려함.
너비를 100px 설정시, 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어드어 100px를 유지함.
box-sizing: content-box;
box-sizing: border-box;
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.border {
width: 100px;
height: 100px;
border: 1px solid black;
}
.border-radius {
margin: 20px;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
}
.content-box {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid blue;
box-sizing: content-box;
}
.border-box {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="border"></div>
<div class="border-radius"></div>
<div class="content-box"></div>
<div class="border-box"></div>
</body>
</html>
3번째에는 box-sizing: content-box;를 적용했다.
너비와 높이에 padding과 border값이 합쳐져서 적용되어 사각형이 크게 그려진 것을 확인할 수 있다.
4번째에는 box-sizing: border-box;를 적용했다.
padding과 border가 합쳐진 값을 포함해서 너비, 높이를 고려하기 때문에 content크기가 줄어들면서 총합 100의 크기를 유지하는 것을 확인할 수 있다.
padding과 border값까지 고려하면서 html 코딩하기가 힘들기 때문에 border-box 속성을 이용하여 content 배치할 때 계산하기가 훨씬 용이해진다.
'CSS' 카테고리의 다른 글
| CSS 06 : 네비게이션 바(상단바) 만들기 (0) | 2022.11.01 |
|---|---|
| CSS 05 : display 속성(none, block, inline, inline-block (0) | 2022.11.01 |
| CSS 03 : 글꼴 속성 정리 MDN (0) | 2022.10.31 |
| CSS 02 : 선택자 정리 (0) | 2022.10.30 |
| CSS 01 : 인라인, 내부, 외부 스타일 적용 방법 (0) | 2022.10.30 |