클리엘
CLIEL LAB
클리엘
전체 방문자
오늘
어제
  • 분류 전체보기 (513)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (300)
      • C# (83)
      • ASP.NET (67)
      • Windows API for .NET (128)
    • Server (53)
      • SQL Server (10)
      • MariaDB (18)
      • Windows Server (6)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

태그

  • NestJS
  • android studio
  • node.js
  • jQuery
  • asp.net core
  • c#
  • JavaScript
  • Windows API
  • LINQ
  • CSS3
  • android
  • Entity Framework
  • .NET
  • ASP.NET
  • asp.net core web api
  • HTML5
  • 변수
  • MariaDB
  • exception
  • Kotlin

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
클리엘

CLIEL LAB

[HTML5&CSS3] 글자 관련 태그
Web/HTML5 & CSS3

[HTML5&CSS3] 글자 관련 태그

2019. 9. 10. 10:14
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' 카테고리의 다른 글
    • [HTML5/CSS3] 테이블 (Table)
    • [HTML5&CSS3] 목록 관련 태그
    • [HTML5/CSS3] 문법 기본 사항
    • [HTML5/CSS3] HTML5의 활용
    클리엘
    클리엘
    누구냐 넌?

    티스토리툴바