반응형
HTML에는 다양한 태그가 있습니다. 많은 태그들을 이용해서 사용자에게 보여줄 디자인과 기능을 만들어냅니다. 태그는 크게 보면 블록 요소와 인라인 요소, 두 가지로 나눌 수 있습니다. 이름만 들으면 감이 잘 안오시죠? 블록 요소는 쉽게 말해서 '자동 줄 바꿈'이 되는 태그, 반대로 인라인 요소는 줄 바꿈 기능이 없습니다. 그러면 지금부터 두 가지 요소에 대해서 알아보겠습니다.
블록 요소
- 자동 줄 바꿈
- 기본적으로 너비(width) 100% 값을 가짐
- 너비(width) 와 높이(height) 설정 가능
- margin 과 padding 설정 가능
- 종류 : article, canvas, audio, vidio, h, div, figure, footer, header, ol, ul, table, p 등이 존재
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.</title>
<style>
div {border: 1px solid red; font-size: 30px;}
h1 {border: 1px solid blue;}
p {border: 1px solid orange; font-size: 30px;}
</style>
</head>
<body>
<div>블록 요소 DIV</div>
<h1>블록 요소 H1, H2, H3, H4, H5, H6</h1>
<p>블록 요소 P</p>
</body>
</html>
위의 결과를 보시면 기본적으로 너비(width) 100% 값을 가지고 있기 때문에 자동 줄 바꿈 기능이 존재합니다. 주로 레이아웃을 구성할 때 사용되고, 자식 요소로 인라인 요소를 포함할 수 있습니다.
인라인 요소
- 항상 블록 요소 안에 포함되어 있음
- 너비(width)와 높이(height) 설정 불가능
- 줄 바꿈 기능 없음
- 종류 : br, b, i, em, img, input, label, map, small, span, strong, sub, sup 등이 존재
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.</title>
<style>
p {border: 1px solid orange; font-size: 30px;}
span {border: 3px solid red;}
</style>
</head>
<body>
<p>블록 요소는 <span>인라인 요소</span>를 포함할 수 있다.</p>
</body>
</html>
인라인 요소는 블록 요소를 포함할 수 없지만 블록 요소에 포함되어 있어야합니다. 주로 글꼴 태그들이 인라인 요소이며, 자동 줄 바꿈 기능이 없기 때문에 <br> 줄 바꿈 태그와 함께 사용합니다.
반응형
'웹 디자인 > HTML · CSS' 카테고리의 다른 글
| [HTML/CSS] table 태그로 표 만들기 (tr, th, td 태그) (0) | 2021.12.17 |
|---|---|
| [HTML/CSS] a 태그와 이미지 태그 사용해보기 (map 태그) (0) | 2021.12.16 |
| [HTML/CSS] 기본적인 글꼴 태그 알아보기 (0) | 2021.12.08 |
| [HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등) (0) | 2021.12.07 |
| [HTML/CSS] 편집 프로그램 Sublime Text 다운로드 및 사용법 (0) | 2021.12.03 |