728x90
반응형
SMALL
1. 박스 모델(Box Model)
- 모든 HTML 요소는 박스 모양으로 구성
- 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함
2. 내용(content)
- 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
<p>안녕</p> /*안녕이 들어있는 내용부분이 content */
3. 박스 사이징(box-sizing)
- width, height 값에 padding, border 영역은 포함되지 않음
- 만약 width가 100%로 설정되는 경우 padding이나 border속성을 추가하면 안됨
- box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함
- content-box : padding과 border를 포함하지 않음
- border-box : padding과 border를 포함
<!DOCTYPE html>
<html lang="en">
<head>
<title>박스사이징</title>
<style>
div {
width: 300px;
height: 150px;
margin: 10px;
padding: 30px;
border: 3px solid palevioletred;
}
#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>
728x90
반응형
LIST
'Web > CSS' 카테고리의 다른 글
| [CSS] 디스플레이(display) 속성, 폼(form) 알아보기! (0) | 2023.03.31 |
|---|---|
| [CSS] 패딩(padding), 마진(margin), 테두리(border) 속성 알아보기! (0) | 2023.03.31 |
| [CSS] 배경 설정하기 - 컬러 배경 설정, 이미지 배경 설정, 배경 반복, 배경 위치 설정, 배경 스크롤 고정, 배경 이미지 크기 설정, 배경 속성 한꺼번에 적용 (0) | 2023.03.30 |
| [CSS] TEXT설정 - 6️⃣ 폰트/글꼴 설정, 웹폰트 적용, 구글 폰트 적용하기 (0) | 2023.03.30 |
| [CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow (0) | 2023.03.30 |
