저희는 이제 박스 모델에서 알아 보겠습니다.
HTML에서의 박스 모델이란 content를 둘러싸고 있는 테두리를 말합니다.
여기서 content란 opening tag와 closing tag 사이에 존재하는 문장들을 의미합니다.
즉 <h1>content </h1> 태그안에 있는 내용을 말하는것입니다.
그러면 content를 둘러싸고 있는 박스 모델에서 대해서 알아보겠습니다.
박스 모델에는 content, padding, border, margin 이있습니다.
자세한 내용은 en.wikipedia.org/wiki/CSS_box_model확인하시면 됩니다.
이제 박스 모델 <div> </div>를 알아 보겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
<div>첫번째 영역</div>
<div>두번째 영역</div>
<div>세번째 영역</div>
<div>네번째 영역</div>
</body>
</html>
이렇게 작성 하고 출력결과를 보겠습니다.
이렇게 나온걸 보면 저희는 이게 박스모델인지 구별할 수 없습니다 그래서 div 태그 속성을 들어가 테두리에 선을 그어 확인 해보겠습니다.
이렇게 라인이 생겼습니다 그러면 저희는 이 박스모델의 테두리를 제어해 저 박스의 크기도 설정 할수있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1> HTML 기초배우기 </h1>
<div style="width:50px; height:50px; border:1px solid black;">첫번째 영역</div>
<div style="width:250px; height:250px; border:1px solid red;">두번째 영역</div>
<div style="width:350px; height:50px; border:1px solid blue;">세번째 영역</div>
<div style="width:250px; height:90px; border:1px solid green;">네번째 영역</div>
</body>
</html>
이렇게 사이즈를 적용해보겠습니다.
이렇게 나오는 걸 확인 하실수 있습니다.
'개발 > HTML' 카테고리의 다른 글
| HTML (입력) 기초 6편 (0) | 2021.04.14 |
|---|---|
| HTML (박스 모델) 기초 5-2편 (0) | 2021.04.12 |
| HTML (리스트 ) 기초 3편 (0) | 2021.04.10 |
| HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편 (0) | 2021.04.09 |
| HTML( 제목, 단락) 기초 1편 (0) | 2021.04.08 |