티스토리 뷰

프론트엔드/HTML

[HTML] ② HTML 요소 분류하기

doeunnkimm 2022. 7. 3. 11:38

 

 

HTML  요소를 각 특징에 따라 분류해 보려고 합니다,

첫 번째 분류 방법은 HTML 4.01에서 사용하던 방법이며, 두 번째 분류 방법은 HTML5에서 사용하는 방식입니다.

과거의 구분법을 설명하는 이유는 이후 레이아웃을 설계할 때 이해를 돕기 때문입니다.

 

▶인라인 요소와 블록 요소

인라인 요소와 블록 요소로 HTML 요소를 구분하는 방식은 HTML 4.01에서 사용합니다.

요소가 문서에서 차지하는 영역을 기준으로 구분됩니다.

 

▷블록(block) 요소

태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작합니다. 너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며 왼쪽에서부터 오른쪽으로 확장됩니다. <div>나 <article>, <form>과 같은 요소들이 대표적인 블록요소입니다.

▷인라인(inline) 요소

태그가 할당된 텍스트나 이미지의 ㅡ기에 맞는 필요한 공간만을 차지합니다. 높이나 너비를 지정할 수 없으며 줄 내부 어디서든 시작합니다. <span>이나 <button>, <img> 등이 대표적인 인라인 요소입니다.

세부적인 요소는 나중에 생각해보고, 블록요소와 인라인요소를 직접 확인해보기 위해 코드를 실행해봅시다.

<!DOCTYPE html>
<html long="ko">
	<head>
    	<meta charset="UFT=8" />
        <style>
        	div {
            border: 1px solid blue;
        	}
            span,
            em {
            	border: 1px dashed red;
            }
        </style>
    </head>
    <body>
		<div>
    		<div>block 요소 안의 block 요소.</div>
            <span>block 요소 안의 inline 요소</span>
        </div>
        <span>inline 요소 안의 <em>inline 요소</em></span>
    </body>
</html>

실행 결과는 다음과 같습니다. 실선이 블록 요소, 점선이 인라인 요소입니다.

블록 요소에 속한 블록 요소는 부모 요소의 너비와 높이를 따라가고, 인라인 요소는 콘텐츠의 너비에 맞춰 조정되는 것을 확인할 수 있습니다.

블록 요소는 인라인 요소와 블록 요소 모두를 포함하지만 인라인 요소는 인라인 요소만을 포함할 수 있습니다. 

두 분류에 따라 지정하는 스타일과 영역 지정법, 정렬법이 다르니 각 요소의 특성을 파악해 레이아웃을 작성해야 합니다.

 

 

▶콘텐츠 모델(Contents Model)

HTML5에서는 요소가 어떤 콘텐츠를 표현할 수 있는지, 어떤 하위 요소를 가지는지에 따라 Contents Model(콘텐츠 모델)로 분류합니다. 요소는 어떤 그룹에는 속하지 않거나 여러 그룹에 동시에 속합니다.

요소들이 각각 어느 모델에 속하는지 외울 필요는 없지만 어떤 의미를 갖는지 인지한 뒤 사용하는 것이 중요합니다.

 

▷Metadata Content

Metadata Content는 나머지 콘텐츠의 표시나 동작을 설정하거나 문서와 다른 문서와의 관계를 설정하는 요소입니다.

<base>, <link>, <meta>, <nonscript>, <style>, <script>, <template>, <title>

▷Flow Content

본문에 사용되는 대부분의 요소는 Flow Content로 분류됩니다.

<a>, <abbr>, <address>, <area> (map 요소의 조상으로 사용된 경우), <article>, <aside>,
<audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <cite>, <code>, <data>, <datalist>,
<del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>,
<keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <metter>, <nav>, <noscript>, <object>,
<ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>,
<u>, <ul>, <var>, <video>, <wbr>

▷Selectioning Content

Selectioning Content는 아웃라인을 정의하며 각 Heading(제목) 요소와 Footer(바닥글) 요소의 범위(Scope)를 정합니다.

<article>, <aside>, <nav>, <section>

▷Phrasing Content

Phrasing Content는 문서 내의 텍스트를 의미하며 단락을 형성하는 요소입니다.

<a>, <abbr>, <area>, (map 요소의 조상으로 사용된 경우), <audio>, <b>, <bdi>, <bdo>, <br>,
<button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>,
<iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <meter>,
<moscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <s>, <samp>, <script>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <template>, <textarea>, <time>, <u>,
<var>, <video>, <wbr>

▷Heading Content

섹션의 헤더를 정의하는 요소입니다.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

▷Embedded Content

외부의 자원을 가져오거나 삽입할 때 사용하는 요소입니다.

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>

▷Interactive Content

유저와 상호작용을 위해 특별히 설계된 요소입니다.

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>

 

여기까지 HTML 요소를 분류해보았습니다 :)

728x90
LIST

'프론트엔드 > HTML' 카테고리의 다른 글

[HTML] ⑤ SEO(Search Engine Optimization): 검색엔진최적화  (0) 2022.07.06
[HTML] ④ 시맨틱(Semantic)  (0) 2022.07.04
[HTML] ③ HTML 문서 골격 만들기  (0) 2022.07.04
[HTML] ① HTML 소개  (1) 2022.07.02
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함