반응형
HTML은 다양한 글자 관련 태그를 제공하여 텍스트를 다양하게 스타일링하고 강조할 수 있습니다. 이번 글에서는 몇 가지 대표적인 태그에 대해 알아보겠습니다.
1. 글 제목 만들기
글의 제목을 표현하기 위해
<h1>부터 <h6> 태그를 사용할 수 있습니다. 숫자가 작을수록 큰 제목을 나타냅니다. 아래는 각 태그의 예시입니다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>2. 단락 나누기
텍스트를 단락으로 나누기 위해 <p> 태그를 사용합니다. 아래는 단락을 나타내는 예시입니다.
<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>3. 글자 두껍게 하기
글자를 두껍게 표시하기 위해 <b> 태그를 사용합니다. 아래는 글자를 두껍게 표시하는 예시입니다.
<p>이것은 <b>굵은 글자</b>입니다.</p>4. 줄바꿈과 공백 삽입하기
줄바꿈을 하거나 공백을 삽입하기 위해 <br> 태그와 엔티티를 사용할 수 있습니다. 아래는 줄바꿈과 공백을 삽입하는 예시입니다.
<p>이것은 첫 번째 줄입니다.<br>
이것은 두 번째 줄입니다.</p>
<p>이것은 공백을 포함한 텍스트입니다.</p>5. 목록 만들기
목록을 만들기 위해 <ul> (비순서형 목록), <ol> (순서형 목록), 그리고 <li> (목록 항목) 태그를 사용합니다. 아래는 목록을 나타내는 예시입니다.
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ol>위의 내용들을 한번에 정리 해봤습니다.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 글자 관련 태그</title>
</head>
<body>
<!-- 1. 글 제목 만들기 -->
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
<!-- 2. 단락 나누기 -->
<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>
<!-- 3. 글자 두껍게 하기 -->
<p>이것은 <b>굵은 글자</b>입니다.</p>
<!-- 4. 줄바꿈과 공백 삽입하기 -->
<p>이것은 첫 번째 줄입니다.<br>
이것은 두 번째 줄입니다.</p>
<p>이것은 공백을 포함한 텍스트입니다.</p>
<!-- 5. 목록 만들기 -->
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ol>
</body>
</html>
약 15p 정도 되는 정보들을
제 나름대로 정리해서
적어봤어요.
다른 분들이 작성한 내용들과
큰 차이가 없네요
차별점을 두고 싶어도
내용들이 워낙 간단한 내용들이라서
노력해봤지만 잘 안되네요 ㅜㅜ
오늘 공부 많이 했다 그래도.
다음 공부 때 다시 돌아올게요!
'언젠가는 쓸모있겠지. > it, 컴퓨터' 카테고리의 다른 글
| [HTML] 3. HTML 멀티미디어와 링크 (0) | 2023.07.24 |
|---|---|
| BIOS 부팅 vs UEFI 부팅 (0) | 2023.07.20 |
| MBR vs GPT 비교 (0) | 2023.07.10 |
| [HTML] 1. HTML 문서 구조 (0) | 2023.06.23 |
| [HTML] 0. 블로그 만들기. (0) | 2023.06.23 |
