728x90
반응형
margin
-해당 요소와 다른 요소의 거리를 결정하는 여백
- border 바깥 쪽의 여백
- margin-bottom과 magin-top이 만나는 곳에서는 둘 중 더 높은 margin만 적용된다.
- margin을 auto로 설정하면 해당 요소를 가운데로 정렬해준다.
padding
-border 안쪽부터 컨텐츠까지의 여백
- 기본적으로는 padding의 크기가 요소의 전체 크기에 가산된다.
HTML Box Model
- HTML의 모든 요소는 박스 형태로 구성되어 있다.
- 요소를 구성하는 박스의 제일 바깥쪽 여백이 margin이고 border, padding, content-box 순으로 요소를 박스현태로 구성하고 있다.
- F12 개발자 도구를 통해 그림으로 확인할 수 있다.
box-size
1. box-sizing: content-box (기본값)
- width/heght property가 content-box의 크기를 의미하게 된다. (요소의 크기 = width/height + padding + border)
2. box-sizing: border-box
- width/height property가 border-box의 크기를 의미하게 된다. (요소의 크기 = width/height)
margin 설정하는 법
margin: 50px;
overflow: auto; /* 내용이 요소를 넘칠 때 사용하는 옵션 */
.margin-test-div {
border: solid 5px black;
font-size: 50px;
}
.margin-test-div:first-of-type {
margin: 50px;
}
.margin-test-div:nth-of-type(2) {
margin:25px;
}
.margin-test-div:nth-of-type(3) {
margin:80px 300px 30px 10px;
}
#padding-test {
border: solid 5px black;
margin: 20px 100px;
height: 200px;
padding: 50px;
overflow: auto; /* 내용이 요소를 넘칠 때 사용하는 옵션 */
}
/* id 속성이 -box로 끝나는 요소들에 대한 스타일 설정 */
[id$="-box"] {
border: solid 15px black;
width: 500px;
height: 500px;
font-size: 20px;
padding: 30px;
margin: 50px auto;
}
#content-box {
box-sizing: content-box; /* 기본값 */
}
#border-box {
box-sizing: border-box;
}<!DOCTYPE html>
<html lang="ko">
<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>06_여백.html</title>
<link rel="stylesheet" href="./assets/css06.css">
</head>
<body>
<h3># margin</h3>
<ul>
<li>해당 요소와 다른 요소의 거리를 결정하는 여백</li>
<li>border 바깥 쪽의 여백</li>
<li>margin-bottom과 magin-top이 만나는 곳에서는 둘 중 더 높은 margin만 적용된다. </li>
<li>margin을 auto로 설정하면 해당 요소를 가운데로 정렬해준다.</li>
</ul>
<div class="margin-test-div">Div1</div>
<div class="margin-test-div">Div2</div>
<div class="margin-test-div">Div3</div>
<h3># padding</h3>
<ul>
<li>border 안쪽부터 컨텐츠까지의 여백</li>
<li>기본적으로는 padding의 크기가 요소의 전체 크기에 가산된다. </li>
</ul>
<div id="padding-test">
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
이것은 컨텐츠입니다. 이것은 컨텐츠입니다. 이것은 컨텐츠입니다.
</div>
<h3># HTML Box Model</h3>
<ul>
<li>HTML의 모든 요소는 박스 형태로 구성되어 있다.</li>
<li>요소를 구성하는 박스의 제일 바깥쪽 여백이 margin이고
border, padding, content-box 순으로 요소를 박스현태로 구성하고 있다.</li>
<li>F12 개발자 도구를 통해 그림으로 확인할 수 있다.</li>
</ul>
<h3># box-size</h3>
<dl>
<dt>box-sizing: content-box</dt>
<dd>
width/heght property가 content-box의 크기를 의미하게 된다.
</dd>
<dt>box-sizing: border-box</dt>
<dd>
width/height property가 border-box의 크기를 의미하게 된다.
</dd>
</dl>
<div id="content-box">
크기 500px로 설정한 content-box <br>
(요소의 크기 = width/height + padding + border)
</div>
<div id="border-box">
크기 500px로 설정한 border-box <br>
(요소의 크기 = width/height)
</div>
</body>
</html>728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] 텍스트(text) (0) | 2023.06.04 |
|---|---|
| [CSS] 단위(px, mm, cm, in) (0) | 2023.06.04 |
| [CSS] 테두리(border) (0) | 2023.06.04 |
| [CSS] 배경(background) (0) | 2023.06.04 |
| [CSS] CSS 적용하기 (0) | 2023.06.04 |
