[HTML] 레이아웃 구조 구분과 텍스트 관련 태그

 

 

콘텐츠 섹션

문서를 논리적인 조각으로 구성한다. 레이아웃 구성을 위한 공간 분할 용도로 사용하는 구조 태그.

 

<header>

문서의 헤더

 

<section>

HTML문서에 포함된 독립적인 세션

 

<atricle>

문서나 페이지 등 독립적으로 구성하는 요소

 

<aside>

주요 콘텐츠와 연관된 것. 주로 사이드에 위치

 

<nav>

다른 페이지나 다른 부분과 연결되는 내비게이션

 

<footer>

문서의 푸터텐츠 섹션

 

 

---

 

텍스트 관련 태그

 

<h1> ~ <h6>

Headings태그. h1부터 h2, h3, …, h6까지 있다. h1는 중요한 제목을 나타내고, 점점 글자가 작아진다.

See the Pen Untitled by euuns (@euuns) on CodePen.

 

 

<b>와 <strong>

b태그와 strong태그는 둘 다 blod체로 텍스트를 지정한다.
모양은 같지만 그 쓰임은 다르다. b는 단순히 텍스트의 주목, 강조만을 뜻한다. strong은 중요한 콘텐츠를 의미한다.

 

<i>와 <em>

i와 em은 italic체를 나타낸다. 이 역시 b와 strong처럼 단순히 텍스트의 주목과 중요도에 차이가 있다.
i는 외국어, 등장인물의 생각 등을 나타내고, em은 강조할 콘텐츠를 의미한다.

See the Pen Untitled by euuns (@euuns) on CodePen.

 

 

<small>

더 작은 텍스트를 나타낸다.

 

<del>과 <ins>

del은 deleted text로 글자 중앙에 밑줄이 쳐져있지만, ins는 글자 아래에 밑줄이 쳐져있다.

 

 

<sub>와 <sup>

sub는 subscripted 아래첨자로 나타내고, sup은 supscripted 위첨자로 나타낸다.

See the Pen Untitled by euuns (@euuns) on CodePen.

 

 

---

 

 

<p>

p는 커다란 단락으로 문단을 나누는 것.

 

<br>

강제 개행. 다음 라인으로 글자를 내린다.

 

<hr>

문단에 수평줄 그림

 

<q>

quotation 짧은 인용문을 지정한다. 큰따옴표를 사용해 감싸고 있다.

 

<blockquote>

들여쓰기가 적용된 긴 인용문 블록

 

See the Pen Untitled by euuns (@euuns) on CodePen.

<br>이 적용되지 않으면 엔터를 쳐도 다음 라인으로 내려가지 않고, 엔터를 치지 않아도 <br>을 넣으면 다음 라인으로 내려가는 걸 볼 수 있다. 

 

 

---

 

 

reference

이웅모, "모던 자바스크립트 Deep Dive", 위키북스, 2020.09.25
"HTML 태그 </> 종류 총 모음", Inpa Dev, https://inpa.tistory.com/
"HTML요소 참고서", MDN Web Docs, https://developer.mozilla.org/ko/docs/Web/HTML/Element
"코딩의 시작, TCP School", https://www.tcpschool.com/html-tags/intro