AI와 데이터 사이언스의 이론과 실전
CSS - 박스 모델(내용, 패딩, 마진, 테두리) , 박스 사이징 본문
1. 박스 모델(Box Model)
CSS 박스 모델(Box Model)은 웹 페이지의 요소(element)가 어떻게 레이아웃되고 서식이 지정되는지를 설명하는 중요한 개념입니다.
- 모든 HTML 요소는 박스모양으로 구성
- 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분
- HTML의 모든 요소는 내용, 패딩, 테두리, 마진으로 구성
1.1. 내용(content)
- 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
1.2. 패딩(padding, 안쪽여백)
- 내용과 테두리 사이의 여백(간격)
- padding-top, padding-right, padding-bottom, padding-left
- padding은 시계방향(위/오른쪽/아래/왼쪽) 순으로 설정할 수 있음
[HTML]
<div id ='padding'></div>[CSS]
div#padding { padding: 20px 50px 30px 10px}
/*위 20px 오른쪽 50px 아래 30px 왼쪽 10px*/
div#padding { padding: 20px 50px 30px}
/*위 20px 오른쪽 왼쪽 50px 아래 10px*/
div#padding { padding: 20px 50px}
/*위 아래 20px 오른쪽 왼쪽 50px */
div#padding { padding: 20px }
/*위 오른쪽 왼쪽 아래 20px*/< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패딩</title>
<style>
div {
width: 200px;
height: auto;
background-color: deepskyblue;
margin: 20px;
color: white;
}
#padding1 {padding: 10px 30px 20px 40px ;}
#padding2 {padding: 30px 20px 40px ;}
#padding3 {padding: 30px 50px ;}
</style>
</head>
<body>
<h2>패딩</h2>
<div id="padding1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque error aut dolores nihil praesentium explicabo minima, nam delectus nulla quos rerum molestias, natus quibusdam! Veritatis nobis nostrum deleniti quia illo!</div>
<div id="padding2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque error aut dolores nihil praesentium explicabo minima, nam delectus nulla quos rerum molestias, natus quibusdam! Veritatis nobis nostrum deleniti quia illo!</div>
<div id="padding3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque error aut dolores nihil praesentium explicabo minima, nam delectus nulla quos rerum molestias, natus quibusdam! Veritatis nobis nostrum deleniti quia illo!</div>
<div id="padding4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque error aut dolores nihil praesentium explicabo minima, nam delectus nulla quos rerum molestias, natus quibusdam! Veritatis nobis nostrum deleniti quia illo!</div>
<div id="padding5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque error aut dolores nihil praesentium explicabo minima, nam delectus nulla quos rerum molestias, natus quibusdam! Veritatis nobis nostrum deleniti quia illo!</div>
</body>
</html><결과>
1.3. 테두리(border)
- 내용과 패딩 주변을 감싸는 프레임
- border-style(테두리모양), border-color(테두리색상), border-width(테두리두께), border(한번에 모두 설정)
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리</title>
<style>
div {
width: 200px;
height: 100px;
margin: 15px;
border-width: 5px;
color: black;
border-style: solid;
}
#border1 { border-style: solid;}
#border2 { border-style: dotted;}
#border3 { border-style: dashed;}
#border4 { border-style: double;}
#border5 { border-color: tomato;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;}
#border6{ border: 3px dotted red ;}
</style>
</head>
<body>
<h2>테두리</h2>
<div id="border1">solid</div>
<div id="border2">dotted</div>
<div id="border3">dashed</div>
<div id="border4">double</div>
<div id="border5"></div>
<div id="border6"></div>
</body>
</html><결과>
1.4. 마진(margin)
- 태두리와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음
- 세로 겹침 현상이 일어남(세로나열된 두 박스의 마진 중 큰 마진 선택)
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마진</title>
<style>
* { padding: 0; margin: 0;}
div{
width: 300px;
height: 100px;
background-color: deepskyblue;
}
#margin1 { margin: 30px 50px;}
#margin2 { margin: 30px 50px;}
#margin3 { margin: 50px;}
#margin4 { margin: 30px 5px 10px;}
#margin5 { margin: 30px auto;}
</style>
</head>
<body>
<h2>마진</h2>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</body>
</html><결과>
2. 박스 사이징(box-sizing)
박스 사이징은 CSS에서 사용되는 속성으로, 박스 모델(Box Model)의 크기 계산 방법을 지정하는 데 사용됩니다. `box-sizing` 속성은 주로 콘텐츠의 크기를 결정할 때 적용됩니다. width, height는 padding, border 영역을 포함하지 않고 content 영역만을 포함하기 때문에 width가 100%로 설정되어 있는 경우 padding이나 border속성을 추가하면 안됩니다.
- content-box (기본값)
- 요소의 너비와 높이는 콘텐츠 영역만을 포함합니다.
- 패딩과 테두리는 요소의 크기에 추가로 더해집니다. - border-box
- 요소의 너비와 높이는 콘텐츠 영역뿐만 아니라 패딩과 테두리도 포함합니다.
- 따라서 패딩과 테두리의 크기가 콘텐츠 영역 내에 포함되므로 요소의 전체 크기가 예측 가능해집니다
`box-sizing`를 `border-box`로 설정하면 주로 레이아웃을 구성할 때 많은 혼란을 방지하고 레이아웃을 관리하기 더 용이하게 만듭니다. 이를 통해 다양한 요소의 크기를 설정할 때 패딩과 테두리의 크기를 따로 계산하지 않아도 되므로 개발자에게 편의성을 제공합니다.
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 사이징</title>
<style>
div {
width: 300px;
height: 150px;
margin: 10px;
padding: 30px;
border: 3px solid red;
}
#boxsizing1{ box-sizing: content-box;}
#boxsizing2{ box-sizing: border-box;}
</style>
</head>
<body>
<h2>박스 사이징</h2>
<div id="boxsizing1">box-sizing='content-box'</div>
<div id="boxsizing2">box-sizing='border-box'</div>
</body>
</html><결과>
'HTML과 CSS > CSS' 카테고리의 다른 글
| CSS - 위치지정(static, relative, fixed, sticky, absolute) (1) | 2023.10.21 |
|---|---|
| CSS - display 속성, 폼 태그 (1) | 2023.10.20 |
| CSS - 배경 색 설정, 배경 이미지 삽입, 위치, 사이즈 조절 (1) | 2023.10.18 |
| CSS - 텍스트 간격, 정렬, 효과, 설정, 글꼴 선택 (1) | 2023.10.17 |
| CSS - 선택자(전체, 요소, 상속, id, class, 그룹, 자식, 자손, 형제, 인접형제, 속성, 가상 선택자) (0) | 2023.10.16 |
'HTML과 CSS/CSS' Related Articles
more
