728x90
이전글 경계선(border) 다루기의 연장입니다.
모든 HTML Tag들은 block 또는 inline형태를 가집니다. 이러한 HTML 태그들은 모두 박스(box)로 여겨질 수 있고 이것을 박스모델이라고 합니다. CSS에서 이것을 수정할 수 있습니다.
- margin : 책페이지의 여백이라는 뜻으로, 경계선으로부터 바깥 여백
- border : 경계선
- padding : 솜 또는 충전제라는 뜻으로, 경계선으로부터 안쪽 여백
- content : 사용자에게 보여지는 내용
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>css box</title>
<meta charset="UTF-8">
<style>
div {
background-color: gray;
width: 300px;
border: 25px solid red;
padding: 25px;
margin: 25px;
}
</style>
</head>
<h2>Box</h2>
<p>box의 구성성분</p>
<div>Content</div>
</body>
</html>
결과)
728x90
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] viewport (0) | 2022.10.11 |
|---|---|
| [HTML & CSS] CSS 박스모델 관련 속성 (0) | 2022.09.19 |
| [HTML & CSS] 경계선(border) 다루기 (0) | 2022.09.18 |
| [HTML & CSS] CSS 배경(background) 다루기 (0) | 2022.09.18 |
| [HTML & CSS] CSS 색상(color) 다루기 (0) | 2022.09.18 |