CSS HTML JS

HTML | 글자 형태 태그

ziziDev 2024. 12. 19. 15:27
반응형

 

HTML의 텍스트 태그는 웹 페이지의 텍스트를 구조화하거나 스타일링하기 위해 사용됩니다. 이 태그들은 텍스트의 의미와 외형을 정의하는 데 중요한 역할을 합니다.

HTML의 텍스트 태그는 헤더, 단락, 인용문, 의미 강조, 스타일링 등 다양한 용도로 나뉩니다. 아래는 HTML에서 자주 사용하는 텍스트 관련 태그와 그에 대한 설명입니다.

📘 1. 구조적 텍스트 태그

웹 문서의 구조를 정의하는 태그들로, 제목, 단락, 인용문 등을 구성할 때 사용합니다.

1.1. <h1> ~ <h6> (헤더 태그)

  • 설명: 제목이나 헤드라인을 정의합니다.
  • 범위: <h1>이 가장 크고, <h6>이 가장 작습니다.
  • 사용 예시: 문서의 제목, 섹션 제목, 블로그 제목 등
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTML5 TEST</title>
 </head>
 <body>
   <h1>Header 1</h1>
   <h2>Header 1</h2>
   <h3>Header 1</h3>
   <h4>Header 1</h4>
   <h5>Header 1</h5>
   <h6>Header 1</h6>
 </body>
</html>

🧾 주요 태그의 상세 설명

 

1.2. <p> (단락 태그)

  • 설명: **단락(paragraph)**을 나타내며, 텍스트 블록을 만듭니다.
  • 자동 줄바꿈: <p> 태그 사이에 자동으로 여백이 추가됩니다.
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTML5 TEST</title>
 </head>
 <body>
   <p>이것은 <b>굵은 텍스트</b>입니다.</p>
   <p>
     The Kotlin Standard Library provides a comprehensive set of tools for managing collections 
     – groups of a variable number of items (possibly zero) that are significant to the problem
     being solved and are commonly operated on.
   </p>
 </body>
</html>

 

1.3. <br> (줄바꿈 태그)

  • 설명: 텍스트 내에 줄바꿈을 만듭니다.
  • 단일 태그: 닫는 태그가 필요 없는 빈 태그입니다.
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTML5 TEST</title>
 </head>
 <body>
   <p>이것은 줄<br>바꿈 태그 예시입니다.</p>
 </body>
</html>

1.4. <blockquote> (블록 인용)

  • 설명: 다른 출처에서 가져온 인용 블록을 표시합니다.
  • 스타일: 기본적으로 들여쓰기가 적용됩니다.
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTML5 TEST</title>
 </head>
 <body>
   <blockquote>
  "성공의 비결은 목적을 바꾸지 않는 것이다." - 벤저민 디즈레일리
</blockquote>
 </body>
</html>

 

HTML에서 글자 형태 태그는 텍스트의 모양이나 스타일을 지정하는 태그들입니다. 이 태그들은 텍스트를 굵게, 기울임, 밑줄, 취소선 등으로 표시하거나 의미를 더 명확히 전달하기 위해 사용됩니다.

📘 글자 형태 태그의 종류

태그설명주요 스타일 효과예시

<b> 굵게 (볼드체) 글자를 굵게 굵게 표시되는 텍스트
<strong> 중요 강조 굵게 (중요한 의미) 강조된 중요한 텍스트
<i> 이탤릭체 (기울임) 글자를 기울임 기울여진 텍스트
<em> 의미 강조 (기울임) 기울임 (중요한 의미) 강조된 중요한 텍스트
<mark> 하이라이트 배경색 강조 (노란색) 🟨 강조된 텍스트
<u> 밑줄 밑줄 표시 밑줄이 그어진 텍스트
<del> 취소선 (삭제선) 글에 취소선 추가 취소된 텍스트
<ins> 삽입된 텍스트 밑줄 표시 삽입된 텍스트
<sub> 아래 첨자 글을 아래로 작게 H<sub>2</sub>O (물 분자)
<sup> 위 첨자 글을 위로 작게 E = mc<sup>2</sup> (아인슈타인 공식)
<small> 작은 글자 크기 글자를 작게 작아진 글씨
<big> 큰 글자 크기 글자를 더 크게 커진 글씨
<code> 코드 표시 모노스페이스 폰트 코드 예시
<pre> 미리 서식 지정 공백과 줄바꿈 유지 소스 코드 블록
<cite> 인용 제목 표시 이탤릭체로 표시 책 제목, 논문 제목
<q> 인라인 인용 따옴표로 인용 "인용문 표시"
<abbr> 약어(축약어) 점선 밑줄 표시 <abbr title="Hypertext Markup Language">HTML</abbr>
<time> 시간 표시 시간 정보 추가 2024-12-24 (시간 표기)
<kbd> 키보드 입력 모노스페이스 폰트 Ctrl + C
<var> 변수 (수학, 코드) 기울임 스타일 수학/프로그래밍 변수
<samp> 프로그램 샘플 출력 모노스페이스 폰트 프로그램의 출력 결과 표시
<dfn> 정의할 용어 기울임체로 표시 정의된 용어
<bdi> 텍스트의 방향 독립 양방향 텍스트 지원 다양한 언어의 텍스트
<bdo> 텍스트의 방향 변경 LTR↔️RTL 텍스트 방향 변경 오른쪽에서 왼쪽으로

HTML의 ol, ul, dl 태그는 목록(list)을 만드는 데 사용됩니다. 각각의 역할과 사용 방법에 대해 설명드리겠습니다.

1. <ol> (Ordered List, 순서가 있는 목록)

<ol> 태그는 순서가 있는 목록을 나타냅니다. 항목은 기본적으로 숫자로 표시되지만, 다른 스타일로도 변경할 수 있습니다.

📘 구조

 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTML5 TEST</title>
 </head>
 <body>
   <ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>
 </body>
</html>

 

📘 주요 속성

  • type: 목록의 스타일을 지정합니다.
    • 1: 기본값 (숫자 1, 2, 3, ...)
    • A: 대문자 (A, B, C, ...)
    • a: 소문자 (a, b, c, ...)
    • I: 로마 숫자 대문자 (I, II, III, ...)
    • i: 로마 숫자 소문자 (i, ii, iii, ...)
  • start: 시작 번호를 지정합니다.

 

2. <ul> (Unordered List, 순서가 없는 목록)

<ul> 태그는 순서가 없는 목록을 나타냅니다. 각 항목은 **기호(bullet)**로 표시됩니다.

📘 구조

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTML5 TEST</title>
 </head>
 <body>
  <ul>
  <li>사과</li>
  <li>바나나</li>
  <li>체리</li>
</ul>
 </body>
</html>

📘 주요 속성

  • type: 기호 스타일을 지정합니다.
    • disc: 기본값 (● 원 모양)
    • circle: 빈 원 (○)
    • square: 사각형 (■)

 

3. <dl> (Description List, 정의 목록)

<dl> 태그는 정의 목록을 나타냅니다. 용어와 그에 대한 설명을 짝지어 표현할 때 사용합니다. <dt>는 정의할 용어(term), <dd>는 **해당 용어에 대한 설명(description)**을 나타냅니다.

📘 구조

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>HTML5 TEST</title>
 </head>
 <body>
  <dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 마크업 언어입니다.</dd>
  
  <dt>CSS</dt>
  <dd>웹 페이지의 스타일을 지정하는 스타일 시트 언어입니다.</dd>
  
  <dt>JavaScript</dt>
  <dd>웹 페이지에 동적인 기능을 추가하는 스크립트 언어입니다.</dd>
</dl>
 </body>
</html>

📘 주요 태그

  • <dl>: 정의 목록을 감싸는 컨테이너
  • <dt>: 용어 (Definition Term) - 설명의 제목이 됩니다.
  • <dd>: 설명 (Definition Description) - 용어에 대한 구체적인 설명을 제공합니다.

📘 활용 예시

  • 사전 용어 정의
  • FAQ(자주 묻는 질문) 목록
  • 프로필 정보 (이름, 나이, 직업 등)

 

🧐 ol, ul, dl 비교

구분oluldl

의미 순서 있는 목록 순서 없는 목록 용어와 설명의 목록
사용 태그 <ol>, <li> <ul>, <li> <dl>, <dt>, <dd>
목록 스타일 숫자 (1, 2, 3...) 기호 (●, ○, ■) 용어(단어)와 설명의 쌍
주요 속성 type, start, reversed type 없음
활용 예시 가이드라인, 순위 쇼핑 목록, 체크리스트 용어 사전, FAQ, 약관 정의

🔥 정리

  1. <ol>: 순서가 있는 목록을 생성합니다. (1, 2, 3, ...)
  2. <ul>: 순서가 없는 목록을 생성합니다. (●, ○, ■ 등)
  3. <dl>: 용어와 그에 대한 설명을 나타내는 정의 목록입니다.
반응형

'CSS HTML JS' 카테고리의 다른 글

CSS HTML JS jQuery | 스크롤 이동 $(window).scrollTop() :: scrollTo()  (0) 2024.12.18

'CSS HTML JS'의 다른글

  • 현재글HTML | 글자 형태 태그

관련글

티스토리툴바