728x90
css의 박스 모델은 content, padding, border, margin이 있다.
박스 모델의 padding, border, margin 속성의 기본 값은 0이며, 상하좌우 네 방향을 각각 top, bottom, left, right을 사용하여 지정할 수 있다.
| 상우하좌 모두 동일 | 상하, 우좌 동일 | 상, 우좌, 하 | 상, 우, 하, 좌 모두 다름 |
| margin: 20; | margin: 20 30; | margin: 10 20 15; | margin: 10 15 20 25; |
*padding도 위와 동일, px 생략 가능, 시계 방향 순서(상->우->하->좌)
<html>
<head>
<meta charset="UTF-8">
<title>ex12</title>
<style>
.mp1 { background-color: aqua; color:red; margin-bottom: 50px; padding-left: 50px; }
.mp2 { background-color: silver; color: green; margin: 20px; padding: 10px 20px; }
.mp3 { background-color: skyblue; color: purple; margin: 50px 15px 20px; padding: 20px; }
</style>
</head>
<body style="background-color: lightyellow;">
<p>박스 모델의 네 방향 여백 지정</p>
<p class="mp1">mp1</p>
<p class="mp2">mp2</p>
<p class="mp3">mp3</p>
</body>
</html>
즉, margin은 외부와 border 사이의 공간을, padding은 border와 content 사이의 공간을 가리킨다.
단위: 픽셀(px), 퍼센트(%), 센티미터(cm)
<html>
<head>
<meta charset="UTF-8">
<title>ex13</title>
<style>
p { background-color:yellow; color: red;
font-weight: bold; font-size: 16px;
}
p.c1 { width: 300px; height: 80px; color: green; }
p.c2 { width: 50%; height: 50%; color: purple; }
p.c3 { width: 10cm; height: 3cm; color: blue; }
div { width:50%; background-color:red; }
</style>
</head>
<body>
<p>박스 모델의 내용 영역 크기 지정</p>
<p class="c1">(1) c1:박스 모델의 크기를 픽셀(px) 단위로 지정</p>
<p class="c2">(2) c2:박스 모델의 크기를 퍼센트(%) 단위로 지정</p>
<p class="c3">(3) c3:박스 모델의 크기를 센티미터(cm) 단위로 지정</p>
<div>
<p class="c2">(2) c2:박스 모델의 크기를 퍼센트(%) 단위로 지정</p>
</div>
</body>
</html>
크기를 퍼센트로 설정하면 창의 크기에 맞춰 늘어나고 줄어든다.
이러한 특성을 지녀 반응형 웹(디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹)을 디자인할 때 퍼센트 단위가 적합하다.
이와 반대로 픽셀, 센티미터로 지정한 크기는 창의 크기와 관계 없이 고정이다.
728x90
'Front-end' 카테고리의 다른 글
| [js]자바 스크립트: 연산자, 조건문, 반복문, 함수, 익명(무명) 함수, 오버로딩, onClick() (0) | 2022.04.29 |
|---|---|
| [css]position - static, relative, absolute, fixed (0) | 2022.04.28 |
| [css]overflow: hidden, visible, auto (0) | 2022.04.27 |
| [css] *, id 선택자, class 선택자, 속성 선택자, 가상 클래스 선택자, 자식 선택자, 자손 선택자, 그룹 선택자 (0) | 2022.04.27 |
| radio버튼, 체크 박스 (0) | 2022.04.26 |
