* 텍스트 서식관련
font-size / text-align / text-indent / font-family
color / font-style / text-shadow
* 박스 모델링
width
height
padding
margin
border
border-width
border-color
border-style
box-sizing: 박스의 크기를 어떤 것을 기준으로 계산할지 지정
// 속성값
border-box (테두리를 기준으로 크기를 정함)
content-box (default, 콘텐츠 영역을 기준으로 크기를 정함)
boxSize.html
<!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>
div { width: 500px; padding: 20px; border: 3px solid #333; background: pink; }
#box2 { box-sizing: border-box; }
</style>
</head>
<body>
<div id="box1">box1입니다.</div>
<div id="box2">box2입니다.</div>
</body>
</html>'Stack > CSS' 카테고리의 다른 글
| [CSS] display 복습 끄적끄적 (0) | 2022.04.08 |
|---|---|
| [CSS] 선택자 / display 연습 (0) | 2022.04.07 |
| [CSS] fontstyle / box / table 연습 (0) | 2022.04.06 |
| [CSS] CSS 정리 (0) | 2022.04.06 |
| [CSS] CSS 끄적끄적 (0) | 2022.03.18 |