택스트 관련 태그
HTML 문서 안에 텍스트는 <body> 태그 안에만 작성하면 웹 페이지에 표시됩니다. 하지만 HTML에서는 텍스트 작성을 위한 태그들이 별도로 존재합니다.
이 텍스트 관련 태그들을 사용해 보다 쉽게 텍스트 관련 설정을 할 수 있고, 검색 엔진이 웹 페이지를 분석하는 데에 도움을 주기도 합니다.
<hn>
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
<hn> 태그는 웹 문서의 제목을 나타내는 태그입니다. h1~h6 까지 총 6 종류가 있으며, 작은 숫자일수록 텍스트의 크기가 크고 상위 타이틀로 인식합니다.
- h1: 해당 웹 페이지 또는 메인 섹션의 제목으로 사용. 하나의 페이지에 하나만 사용하는 것이 일반적
- h2: 일반적으로 섹션의 제목으로 사용됨
- h3: 섹션 내 하위 제목으로 사용됨
- h4 ~ h6: 더 하위의 섹션 또는 세부 정보를 제공하기 위해 사용됨
<p>
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
<p> 태그는 영단어 "paragraph"의 줄임말로, 텍스트 단락을 구분하기 위해 사용됩니다. 위의 예제를 보시면 각각의 <p> 태그마다 단락으로 구분되어 있는 것을 알 수 있습니다.
<br>
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
"line break"의 약어인 <br> 태그는 스타일을 사용하지 않고 줄바꿈을 할 수 있게 도와줍니다. 위의 예제를 보면 <br> 태그를 사용한 부분에 줄바꿈이 되는 것을 확인할 수 있는데, 텍스트 뿐 아니라 각 HTML 태그 간 줄바꿈 역시 되는 것을 볼 수 있습니다.
다만 이 방법은 css 스타일을 이용해 단락을 구분할 때 문제가 생길 수 있기 때문에 권장하는 방법은 아닌 점 참고하시면 되겠습니다.
<strong> & <b>
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
<strong>과 <b> 태그 모두 텍스트를 굵게 만들어 줍니다. 하지만 두 태그에는 다른 점이 있습니다.
- <strong>: 화면 낭독기가 해당 부분을 강조
- <b>: 단순히 텍스트만 굵게 표시
<em> & <i>
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
<em>, <i> 태그는 각각 "emphasis", "italic"의 줄임말이며, 모두 글자에 기울임 효과를 추가합니다. 두 태그는 어원에서 알 수 있듯이 웹 문서 상 표시되는 방식은 같으나 사용 방법이 다릅니다.
- <em>: 문장흐름상특정 부분을 강조할 때 사용
- <i>: 단순히 다른 텍스트와 구분할 때 사용
<blockquote>
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
<blockquote> 태그는 인용구를 작성할 때 사용합니다. 위의 예제를 보면 <blockquote> 태그 안에 있는 텍스트가 들여쓰기되어 표시되는 것을 확인할 수 있습니다. 또한 화면 낭독기도 <blockqoute>로 감싸진 부분을 다른 텍스트와 구분합니다.
<sup> & <sub>
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
<sup>, <sub> 태그는 각각 "supscript", "subscript"의 약어이며, 의미에서 알 수 있듯이 위첨자, 아래첨자를 표시할 때 사용합니다.
기타 텍스트 관련 태그
See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.
그 밖의 다양한 텍스트 관련 태그들입니다.
- <abbr>: 줄임말을 표시하고, <abbr> 태그에 title 속성을 사용해 부연설명을 할 수 있으며 해당 텍스트에 마우스를 올리면 표시된다.
- <cite>: 웹 문서나 포스트에서 참고 내용을 표시한다.
- <small>: 텍스트를 작게 표시
- <code>: 소스 코드 작성 시 사용
- <s>: 취소선
- <u>: 밑줄
- <ins>: 공동 작업 문서에 새로운 내용을 추가할 때 사용한다.
- <del>: 공동 작업 문서에 있는 내용을 삭제할 때 사용한다.
'코딩 > HTML' 카테고리의 다른 글
| [HTML] 초보도 따라하는 HTML - 6 (<ol> & <ul> / <table>) (0) | 2024.04.20 |
|---|---|
| [HTML] 초보도 따라하는 HTML - 4 (class와 id & 둘의 차이) (0) | 2024.04.17 |
| [HTML] 초보도 따라하는 HTML - 1편 (HTML 정의 & 파일 생성) (0) | 2024.04.11 |