공간 분할 태그는 블록형(block)와 인라인형(inline) 그리고 인라인-블록형(inline-block) 태그가 있다.
1.블록형(block)
-레이아웃을 만들기 위한 요소, 레이아웃 관련 스타일시트가 잘 적용된다.(width, height,padding, margin, text-aline이 적용된다.)
-박스와 같이 차곡차곡 쌓아 올려지는 형식, 요소가 위에서 아래로 배치된다.
-자동 줄 바꿈
-요소의 너빗값이 100%(기본값)이며, 요소의 높이는 0(기본값)이다.
-ex: head, body,div,h1~h6, p,ol,ul,dl,dt,dd,li,a...........
2.인라인형(inline)
- 글자를 만들기 위한 요소, 레이아웃 관련 스타일시트가 잘 적용되지 않는다.
(width, height 적용 불가능, padding, margin으로 좌우에만 여백을 지정할 수 있다.)
-텍스트를 작업하는 요소로 적합하며,요소들이 수평으로 쌓인다.
-항상 블록 요소 안에 포함이 되어있다
-요소의 너빗값이0, 높이값도0이다. 웹 콘텐츠를 포함하면 요소의 너비값은 웹콘텐츠의 너빗값이다.(내용물의 크기가 태그의 영역이 된다)
-ex: span, img, a, input........
3.인라인-블록형(inline-block)
-옆으로 나열되는 성격을 가진 인라인 속성과 폭을 가지는 스타일이 모두 적용되는 블록형속성 두가지 모두의 성격을 가진 구조이다.(기본 특성은 인라인이라 요소가 수평으로 쌓이지만 블록 요소처럼 사이즈 적용이 가능하다)
-요소의 너빗값이 웹 콘텐츠의 너빗값이며, 레이아웃 관련 스타일시트가 잘 적용된다.
-요소와 요소 사이에 좁혀지지 않는 미세한 공백이 생겨서 잘 사용하지 않는다.
-단독형으로 잘 쓰지 않는다 , 대부분 블록형 박스로 감싼다.
-공간 분할태그를 사용하여 웹 페이지를 나눈다. 공간을 분할해야 CSS로 원하는 레이아웃을 구성할 수 있기 때문이다.
-ex:input,img,button.........
※블록 요소는 인라인 요소를 포함할 수 있다.
※인라인 요소는 블록요소를 포함할 수 없지만 블록요소에 포함되어 있어야 한다.
※태그가 블록속성인지 인라인 속성인지 잘 모르겠으면 배경에 색상이나 보더값을 넣어보면 알 수 있다.
실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공간 분할 태그</title>
<style>
div {float:left; width:40%; height:200px; background:#FC0; border:5px solid #F00;}
span {color:#FFF; background:#F00;}
</style>
</head>
<body>
<span>웹 콘텐츠</span>
<h1>"나는 <span>천재</span>다"</h1>
<div>
<h3>SUPERMAN</h3>
<img src="images/superman.jpg">
</div>
<div><img src=""></div>
<div></div>
<div></div>
</body>
</html>
결과물
'Html' 카테고리의 다른 글
| 0.0 VS Code 설정 (0) | 2022.09.21 |
|---|---|
| 08. 입력양식태그 (0) | 2022.09.20 |
| 06. 테이블태그 (0) | 2022.09.20 |
| 05. 하이퍼링크 태그 (0) | 2022.09.20 |
| 04.시맨틱태그 (0) | 2022.09.20 |