목차
1. 개요 (ch1)
2. 블록 태그, 인라인 태그 (ch2)
① 블록 태그 (Block Tag) (ch2-1)
② 인라인 태그 (Inline Tag) (ch2-2)
3. 마치며 (ch3)
1. 개요
HTML 문서의 Element, 요소는 블록 레벨 요소와 인라인 요소로 나눌 수 있다.
여기서 Element에 대해 말하고 넘어가자면
시작 태그와 종료 태그, 그리고 두 태그로 감싼 콘텐츠를 모두 통틀어서 하나의 Element로 본다.
<p>안녕하세요.</p>
<!-- p태그와 감싸고 있는 텍스트가 하나의 Element, 요소이다. -->블록 레벨 요소와 인라인 요소에 대해 정의하자면 다음과 같이 정의할 수 있다.
- 블록 레벨 요소 => 자기가 속한 영역의 너비를 모두 차지해서 하나의 블록을 만드는 요소
- 인라인 요소 => 자기가 필요한 만큼의 공간을 차지하는 요소
이 둘의 차이점을 비교하기 위해서 예제를 하나 준비해 봤다.
해당 소스코드를 복사+붙여 넣기 하고, 웹 브라우저로 실행해 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
블록 태그와 인라인 태그
</title>
</head>
<body>
<p>
<em>안녕하세요.</em> 저는 <strong>홍길동</strong>입니다.
</p>
<p>만나서 반갑습니다.</p><p>잘 부탁드립니다.</p>
</body>
</html>
<!-- 여기서 <p> 태그는 블록 레벨 요소를 만드는 태그이고
<em>과 <strong> 태그는 인라인 요소를 만드는 태그이다.
-->구글 크롬과 같은 웹 브라우저로 해당 소스코드를 실행하면
아래와 같은 형식으로 출력될 것이다.
블록 태그와 인라인 태그 안녕하세요. 저는 홍길동입니다.
만나서 반갑습니다.
잘 부탁드립니다.
키보드에서 [F12]를 누르면 크롬 개발자 도구로 진입할 수 있다.
여기서 '<em>안녕하세요</em>'과 '<p>만나서 반갑습니다.</p>'를 클릭해 보자.
 |
 |
인라인 요소를 만드는 태그인 <em> 태그는 필요한 만큼의 공간을 차지하지만
반대로 블록 레벨 요소를 만드는 태그인 <p> 태그는 공간 전체를 차지하는 것을 확인할 수 있다.
이를 통해서 블록 레벨 요소와 인라인 요소의 차이점이 무엇인지 명확하게 알 수 있을 것이다.
2. 블록 태그, 인라인 태그
HTML의 태그도 블록 레벨 요소와 인라인 요소를 만드는 태그로 구분 지을 수 있다.
이를 '블록 태그', '인라인 태그'라고 한다.
① 블록 태그 (Block Tag)
- 블록 레벨 요소를 만드는 태그
- 전체적인 틀, 구성요소를 만드는 태그 == 블록 태그
- 블록 태그를 새로 만들면 옆에 공간이 남아있어도, 바로 다음 줄에 태그가 생성된다.
(블록 태그의 좌, 우 너비가 100%이기 때문이다.)
- <p>, <h1> ~ <h6>, <hr> 등의 문서의 구성요소를 만드는 태그가 블록 태그에 해당된다.
(이들에 대해서는 다음에 다루도록 하겠다.)
<p>p 태그는 문단을 만드는 태그입니다.</p>
<hr>
<p>
h1 ~ h6 태그는 제목을 만드는 태그입니다.
글씨 크기는 숫자 크기에 비례합니다.
<br/>
hr 태그는 문서 상에서 수평선을 출력하는 태그입니다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
</p>p 태그는 문단을 만드는 태그입니다.
h1 ~ h6 태그는 제목을 만드는 태그입니다. 글씨 크기는 숫자 크기에 비례합니다.
hr 태그는 문서 상에서 수평선을 출력하는 태그입니다.제목 1
제목 2
제목 3
제목 4
제목 5
제목 6
② 인라인 태그 (Inline Tag)
- 인라인 요소를 만드는 태그
- 블록 태그로 만들어진 틀에 내용을 적을 때 사용되는 태그
- 공간을 필요한 만큼 가지기 때문에 다른 태그와 같은 줄에 배치할 수 있다.
- <strong>, <em> 등의 텍스트를 편집하는 태그와 같이
문서의 틀을 만들지 않는 태그들을 인라인 태그라고 보면 된다.
<p>
<p>
<strong>strong 태그는 글씨를 굵게 만듭니다.</strong>
<br>
<em>em 태그는 글씨를 이탤릭체로 바꿉니다.</em>
</p>
</p>
strong 태그는 글씨를 굵게 만듭니다.
em 태그는 글씨를 이탤릭체로 바꿉니다.
3. 마치며
처음에는 블록 태그와 인라인 태그의 정의를 다뤄보고
여기에 해당되는 일부 태그들에 대해서도 같이 다뤄볼 생각이었지만
블록 태그든 인라인 태그든 그 개수는 많은 편이기도 하고
태그 별로 묶어서 정리해 놓는 게 추후에 일하다가
특정 개념에 대해 헷갈릴 때 내 블로그에 정리해 둔 것을 찾아볼 텐데
그러면 차라리 개별적으로 다뤄놓는 것이 좀 더 보기 편할 것 같다는 생각에
글 전체를 전면 수정하였다.
다음 장부터는 각 태그에 대해 개별적으로 다루거나
몇 개의 태그를 묶어서 다룰 것이다.
올해 7월부터 학원에서 시작하는 웹 프로젝트 수업에 참여하게 됐는데
이 수업을 무리 없이 잘 따라가려면
HTML, CSS, Javascript는 필수적으로 알아둬야 할 것 같기에
HTML과 CSS는 기본적인 것만 정리해 두고
그다음부터는 Javascript 위주로 정리하는 방침으로 갈 것 같다.
'Frontend > HTML' 카테고리의 다른 글
| [HTML] 컨테이너 태그(<div>, <span>) & 전역 속성 (0) | 2023.03.16 |
|---|---|
| [HTML] 인라인 태그 8가지 (1) | 2023.03.14 |
| [HTML] <p>, <h1>...<h6>, <hr> 태그 + <br>, (0) | 2023.03.03 |
| [HTML] 티스토리에 목차 달기 (번외, 메모용) (0) | 2023.02.24 |
| [HTML] HTML 개요 (0) | 2023.02.21 |
