글자 태그는 웹 페이지에서 가장 많은 비중을 차지하는 태그입니다.
제목
HTML5의 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그입니다. HTML5는 아래표의 제목 글자 태그를 제공합니다.
| 태그 이름 | 설명 |
| h1 | 첫 번째로 큰 제목 글자 태그 |
| h2 | 두 번째로 큰 제목 글자 태그 |
| h3 | 세 번째로 큰 제목 글자 태그 |
| h4 | 네 번째로 큰 제목 글자 태그 |
| h5 | 다섯 번째로 큰 제목 글자 태그 |
| h6 | 여섯 번째로 큰 제목 글자 태그 |
h1 태그부터 h6 태그의 h는 heading을 의미하며 각각의 숫자는 크기 및 우선 순위를 나타냅니다.
예시1
Heading 태그를 입력하고 코드를 실행하면 예시1과 같이 출력이 됩니다. h1 태그는 큰 제목을 의미하고 h6 태그는 작은 제목을 의미하며, 일반적으로 웹 페이지를 만들 때는 h1 태그부터 h3 태그까지 사용합니다.
본문
본문과 관련된 글자 태그를 알아보자면 HTML5는 아래와 같은 본문 글자 태그를 제공합니다.
| 태그 이름 | 설명 |
| p | 본문 글자 태그 |
p 태그는 단락(paragraph)의 줄임말이며 이름 그대로 사용하면 하나의 단락을 만들 수 있습니다.
예시2
p 태그를 사용하여 작성하고 코드를 실행하면 예시2 처럼 단락이 2개 생성됩니다. p 태그 이외에도 HTML5는 아래 표에 본문 태그를 제공합니다.
| 태그 이름 | 설명 |
| br | 줄바꿈 태그 |
| hr | 수평 줄 태그 |
예시3
코드를 입력하고 실행하면 예시3처럼 출력됩니다. hr 태그는 기로로 그어지는 줄을 의미하고 br 태그는 개행을 의미합니다.
앵커 태그
HTML(Hypertext Markup Language)의 H는 하이퍼텍스트입니다. 하이퍼텍스트는 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할 수 있게 조직화된 문서를 의미합니다. HTML 웹 페이지가 이렇게 조직화된 문서 형태를 가질 수 있는 이유는 앵커(Anchor) 태그 때문입니다. 앵커 태그는 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그입니다.
| 태그 이름 | 설명 |
| a | 앵커 태그 |
a 태그는 단독으로 사용하지 않습니다.
예시4
a 태그의 href 속성을 사용하여 이동하고자 하는 웹 페이지를 지정하여 지정한 웹 페이지로 이동할 수 있습니다.
글자 형태
HTML5는 글자 형태 태그를 사용해 웹 페이지의 글자에 형태와 의미를 부여합니다. 각 글자에 형태 및 의미를 부여할 때는 아래의 표의 태그를 사용합니다.
| 태그 이름 | 설명 |
| b | 굵은 글자 태그 |
| i | 기울어진 글자 태그 |
| small | 작은 글자 태그 |
| sub | 아래 첨자 태그 |
| sup | 윗 첨자 태그 |
| ins | 밑줄 글자 태그 |
| del | 가운데 줄이 그어진 글자 태그 |
예시5
각각의 글자 태그는 예시5와 같은 결과를 보여줍니다. 과거에는 많이 사용을 하였던 태그지만 글자를 기울이거나 굵게 만드는 기능은 스타일시트로 처리를 하기 때문에 최근에는 잘 사용하지 않습니다.
루비 문자
일본어에서 자주 사용되는 글자 형식이며 한자 위에 표시되는 글자를 의미합니다. 일본에서 자주 사용하지만 한국어도 한자어가 많아 사용할 수 있는 태그입니다.
| 태그 이름 | 설명 |
| ruby | 루비 문자 선언 태그 |
| rt | 위에 위치하는 작은 문자 태그 |
| rp | ruby 태그를 지원할 경우 출력되지 않는 태그 |
루비 문자를 생성할 때는 아래 예시6처럼 ruby태그와 rt태그를 사용합니다. ruby 태그 안에 있는 span 태그에 원하는 글자를 넣고 그에 대한 설명을 rt 태그 안에 입력합니다.
예시6
|
<body> <ruby> <span>大韓民國</span> <rt>대한민국</rt> </ruby> </body> |
이렇게 입력하면 루비 태그를 지원하는 웹 브라우저에서는 아래와 같이 출력됩니다.
예시6의 결과
| 大韓民國 |
인터넷 익스프롤러 및 크롬 브라우저를 제외한 일부 웹 브라우저는 ruby 태그를 지원하지 않는 경우도 있습니다. ruby 태그를 지원하지 않는 웹 브라우저에서 태그가 정상적으로 출력될 수 있게 만든 태그가 rp태그 입니다. rp 태그는 아래 예시7과 같이 사용합니다.
예시7
|
<body> <ruby> <span>大韓民國</span> <rp>(</rp> <rt>대한민국</rt> <rp>)</rp> </ruby> </body> |
예시7의 결과
| 大韓民國(대한민국) |
'프로그래밍 공부 > HTML5' 카테고리의 다른 글
| HTML5 - 이미지 태그 (0) | 2019.11.12 |
|---|---|
| HTML5 - 테이블 태그 (0) | 2019.11.11 |
| HTML5 - 목록 태그 (0) | 2019.11.11 |
| HTML5 - 페이지 구조 (0) | 2019.11.11 |
| HTML5 - 기본 용어 정리 (0) | 2019.11.11 |
