[HTML5&CSS3] 글자 관련 태그

728x90

1. 제목

h1 부터 h6 까지 사용할 수 있으며 뒤의 숫자가 작을 수록 큰 글씨를 보여줍니다.

<h1>AAA</h1>
<h2>BBB</h2>
<h3>CCC</h3>
<h4>DDD</h4>
<h5>EEE</h5>
<h6>FFF</h6>

2. 본문관련 태그

특정 내용을 본문으로 표현하고자 할때는 기본적으로 p(paragraph)태그를 사용합니다.

<h3>Hello, World!</h3>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>

더불어 줄넘김을 하고자 하는 경우 <br />태그를, 수평선을 긋고자 하는 경우에는 <hr />태그를 사용합니다.

<body>
    <h3>Hello, World!</h3>
    <hr />
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet,<br /> consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</p>
    <hr />
</body>

이외에 글자를 굵게하는 b, 글자를 기울이는 i, 작은글자 small, 위첨자 sub, 아래첨자 sup, 밑줄 ins, 취소선 del 등의 태그를 사용할 수 있습니다.

<body>
    <h3>Hello, World!</h3>
    <p><b>Nullam</b> id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, <i>a pharetra augue</i>. <small>Lorem</small> ipsum <sub>dolor</sub> sit <sup>amet</sup>, consectetur <ins>adipiscing elit</ins>. <del>Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.</del>
    <hr />
</body>

3. 앵커태그

문서간 연결과 이동시에는 a 태그를 사용합니다. a 태그 사용시에는 href에 이동할 홈페이지 주소나 문서경로를 넣어주면 됩니다.

<body>
    <a href="https://www.naver.com">NAVER</a>
    <a href="https://www.daum.net">DAUM</a>
</body>

#을 사용해 문서 내부에 있는 특정 요소의 아이디를 지정하면 해당 요소로 곧장 이동할 수 있습니다.

<body>
    <a href="#title">제목</a>
    <div id="title">
        Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.
    </div>
</body>

예제는 문서의 크기가 작으므로 눈으로 확인하기 힘들지만 해당 div가 문서의 한참 아래쪽에 내려가 있는 경우 '제목'을 클릭하게 되면 곧바로 이동하는걸 확인할 수 있습니다.

4. 루비문자

일본어에서 자주 볼 수 있는 글자로 글자위에 작은 글자가 있는 형태입니다. 루비문자를 표현하려면 우선 루비문자로 구성할 문자전체를 ruby 태그로 감싸고 위에 올라갈 글자를 rt 태그로 처리합니다. 이때 rt 태그는 반드시 아래에 위치해야 합니다.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
</head>
<body>
    <ruby>
        대한민국
        <rt>大韓民國</rt>
    </ruby>
</body>
</html>

만약 루비문자를 지원하지 않는 브라우저에 대해 어떤 대처를 해야 한다면 rp 태그를 사용해 대체할만한 표시를 추가할 수 있습니다.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
</head>
<body>
    <ruby>
        대한민국
        <rp>(</rp>
        <rt>大韓民國</rt>
        <rp>)</rp>
    </ruby>
</body>
</html>

728x90

저작자표시 비영리 변경금지 (새창열림)

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5/CSS3] 테이블 (Table) (0)	2019.09.20
[HTML5&CSS3] 목록 관련 태그 (0)	2019.09.19
[HTML5/CSS3] 문법 기본 사항 (0)	2019.08.27
[HTML5/CSS3] HTML5의 활용 (0)	2019.08.06
[HTML5/CSS3] 인터넷과 웹 그리고 웹 브라우저 (0)	2019.07.30

'Web > HTML5 & CSS3' 카테고리의 다른 글

티스토리툴바