반응형
웹 페이지를 박스처럼 관리하는 방법을 알아보겠다.
태그를 사용하여 내용물을 작성을 하면 그 내용물을 기준으로 내용물을 content, 내용물을 둘러싸는 경계선(border)이 있고 경계선과 내용물 사이에 안쪽 여백을 padding 마지막으로 경계선 바깥쪽 여백을 margin이 존재하는 구조로 생각하면 된다.
구별하기 쉽게 border에 색깔을 넣어 2개의 박스 형태처럼 만들어 보았다.
<html>
<head>
<meta charset="UTF-8">
<title>html 연습장</title>
</head>
<body>
<h1>firstbox</h1>
<h1>secondbox</h1>
</body>
<html>h1 {
border: 5px solid blue;
}
margin, padding에 아무런 효과를 넣지 않았기 때문에 경계선에 붙어있는 모습이다. padding의 효과를 알아보기 위해 2개의 box에 50px만큼 효과를 넣어 보겠다.
h1 {
border: 5px solid blue;
padding: 50px;
}
padding을 넣었기 때문에 파란색 경계선과 50px만큼 떨어진 것을 볼 수가 있다.
다음엔 margin의 효과를 보기 위해 firstbox에만 margin 효과를 넣어 보겠다.
<html>
<head>
<meta charset="UTF-8">
<title>html 연습장</title>
</head>
<body>
<h1 class="first">firstbox</h1>
<h1>secondbox</h1>
</body>
<html>h1 {
border: 5px solid blue;
padding: 50px;
}
.first{
border: 5px solid blue;
padding: 50px;
margin: 50px;
}
margin 효과를 넣었기 때문에 첫 번째 박스가 바깥가장자리에서 50px만큼 떨어진 것을 볼 수가 있다.
반응형
'Front-End > HTML,CSS' 카테고리의 다른 글
| HTML 태그 이름 붙이기, class, div 태그 (2) | 2023.10.19 |
|---|---|
| CSS, 속성, 속성 값, 색 표현 (0) | 2023.10.19 |
| HTML의 head와 body (0) | 2023.10.19 |
| HTML의 기본 골격 구조 (0) | 2023.10.19 |
