[CSS] CSS 복습 끄적끄적

Stack/CSS

[CSS] CSS 복습 끄적끄적

7ingout 2022. 4. 7. 09:36

* 텍스트 서식관련

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>