1편에 이어서 2편 은 박스모델 span 으로 알아보겠습니다.
<span> </span> 은 div와달리 박스모델이지만 주 은 박스모델 span 으로 알아보겠습니다.
span과 div 의 차이점은 줄바꿈의 여부입니다 .
div는 자동으로 줄바꿈이 되는 박스모델이고 span은 자동 줄바꿈이 안되어있는 박스 모델입니다.
이런 디자인을 만들수 있습니다.
저희는 이제 간단한 예제로 span이 어떻게 되어있는지 알아 보겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<h1 style="margin:30px;"> HTML 기초배우기 </h1>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid black;">첫번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid blue;">세번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid red;">두번째 영역</span>
<span style="margin:10px;margin-top: 150px ;padding: 30px; padding-bottom: 150px;border:1px solid green;">네번째 영역</span>
</body>
</html>
1편에서 보았던 마진과 패딩값을 설정 하여 span의 박스모델을 보겠습니다 .
결과 값은
이렇게 나온걸 볼수 있습니다. 이렇게 span과 div를 적절히 사용해서 디자인을 하면 저희가 원하는
디자인을 얻을수있습니다.
'개발 > HTML' 카테고리의 다른 글
| HTML (오디오) 7편 (0) | 2021.04.16 |
|---|---|
| HTML (입력) 기초 6편 (0) | 2021.04.14 |
| HTML (박스 모델) 기초 5-1편 (0) | 2021.04.11 |
| HTML (리스트 ) 기초 3편 (0) | 2021.04.10 |
| HTML (밑줄, 기울기, 줄바꿈, 굵기)기초 2편 (0) | 2021.04.09 |