HTML 텍스트 가이드, 기본 태그부터 스타일링까지

HTML 텍스트 가이드, 기본 태그부터 스타일링까지

HTML에서 텍스트는 웹 페이지의 핵심 요소 중 하나입니다. 제목, 단락, 강조 표시 등 다양한 텍스트 표현 방법이 있으며, 적절한 스타일링을 적용하면 가독성을 높이고 디자인적인 요소까지 고려할 수 있습니다. 이 가이드에서는 HTML에서 텍스트를 다루는 모든 방법을 살펴보겠습니다.

 

 

목차

1. HTML 텍스트의 기본 구조
2. 제목 태그(<h1> ~ <h6>)
3. 단락 태그와 줄바꿈
4. 인라인 텍스트 태그
5. 목록 태그로 텍스트 정리
6. CSS를 활용한 텍스트 스타일링
7. 실전 예제와 활용 사례

 

HTML 텍스트의 기본 구조

HTML에서 텍스트를 구성하는 기본 요소들은 다음과 같습니다.

• 제목 태그 - <h1> ~ <h6>
• 단락 태그 - <p>
• 강조 태그 - <strong>, <em>
• 목록 태그 - <ul>, <ol>
• 링크 태그 - <a>

 

 

 

제목 태그(<h1> ~ <h6>)

제목 태그는 문서의 계층 구조를 나타내며, 가장 중요한 제목은 <h1>이며, <h6>까지 사용할 수 있습니다.

<h1>최상위 제목</h1>
<h2>두 번째 수준 제목</h2>
<h3>세 번째 수준 제목</h3>
    

 

 

 

단락 태그와 줄바꿈

HTML에서 텍스트를 단락으로 나눌 때 <p> 태그를 사용하며, 줄바꿈을 원할 경우 <br> 태그를 사용합니다.

<p>이것은 하나의 단락입니다.</p>
<p>다음 줄로 이동하려면 <br> 태그를 사용할 수 있습니다.<br>이처럼 줄바꿈이 적용됩니다.</p>
    

 

 

 

인라인 텍스트 태그

인라인 텍스트 태그를 사용하면 문장 내에서 특정 부분을 강조할 수 있습니다.

• <strong> - 굵은 글씨 (중요 강조)
• <em> - 기울임꼴 (강조)
• <u> - 밑줄
• <mark> - 형광펜 효과

 

 

 

 

목록 태그로 텍스트 정리

목록을 사용하면 내용을 효과적으로 정리할 수 있습니다.

순서 없는 목록

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ul>
    

순서 있는 목록

<ol>
    <li>첫 번째 단계</li>
    <li>두 번째 단계</li>
</ol>
    

 

 

 

CSS를 활용한 텍스트 스타일링

CSS를 활용하면 텍스트의 색상, 크기, 정렬 등을 조정할 수 있습니다.

<p style="color: blue; font-size: 18px; text-align: center;">
    파란색, 18px 크기의 가운데 정렬된 텍스트
</p>
    

 

 

 

실전 예제와 활용 사례

아래는 HTML 텍스트 태그와 스타일링을 조합한 예제입니다.

<h1 style="color: darkred;">이것은 중요한 제목입니다</h1>
<p style="font-style: italic; font-size: 16px;">
    이 문장은 기울임꼴로 표시됩니다.
</p>
<p style="background-color: yellow; padding: 5px;">
    이 부분은 형광펜 효과를 준 것처럼 배경이 노란색입니다.
</p>
    

 

이제 HTML에서 텍스트를 자유롭게 다룰 수 있습니다. 기본적인 태그를 익히고 CSS를 적용하면 더욱 아름다운 웹 페이지를 만들 수 있습니다!