HTML(텍스트 및 제목 태그)

이번 포스팅에서는 HTML에서 텍스트와 제목 태그에 대해 깊이 있게 알아보겠습니다. 웹 페이지에서 텍스트는 가장 중요한 요소 중 하나이며, 제목 태그는 콘텐츠의 구조를 명확하게 하고 SEO(검색 엔진 최적화)에도 큰 영향을 미칩니다. 이번 포스트에서는 텍스트 태그, 스타일링 태그, 그리고 리스트 태그에 대해 자세히 설명하고 예제를 통해 이해를 돕겠습니다.

 

1.텍스트 태그 소개

HTML에서는 다양한 텍스트 태그를 제공하여 콘텐츠의 구조를 정의합니다. 여기서는 주요 텍스트 태그를 소개합니다.

 

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

제목 태그는 웹 페이지의 제목을 정의하며, <h1>이 가장 중요한 제목이고 <h6>이 가장 덜 중요한 제목입니다. 제목 태그는 검색 엔진이 페이지의 중요한 내용을 이해하는 데 도움을 줍니다.

<h1>주요 제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
<h4>세부 제목</h4>
<h5>하위 제목</h5>
<h6>가장 하위 제목</h6>

 

1.2 문단 태그 (<p>)

문단 태그는 일반 텍스트를 그룹화하는 데 사용됩니다. 문단은 기본적으로 블록 요소로, 각 문단 사이에는 기본적으로 여백이 추가됩니다.

<p>이것은 첫 번째 문단입니다. HTML의 기초를 배우고 있습니다.</p>
<p>이것은 두 번째 문단입니다. 웹 개발의 재미를 느끼고 있습니다.</p>

 

1.3 인용 태그 (<blockquote>)

인용 태그는 다른 출처에서 인용한 내용을 표시할 때 사용됩니다. 보통 블록 요소로 사용되며, 기본적으로 인용된 내용을 들여쓰기로 표시합니다.

<blockquote>
    "HTML은 웹의 기초입니다." - 웹 개발자
</blockquote>

 

1.4 수평선 태그 (<hr>)

수평선 태그는 콘텐츠를 구분하는 수평선을 생성합니다. 주로 섹션을 나누거나 강조할 필요가 있을 때 사용됩니다.

<p>첫 번째 섹션입니다.</p>
<hr>
<p>두 번째 섹션입니다.</p>

 

2.텍스트 스타일링 태그

HTML에서는 텍스트의 스타일을 변경하는 다양한 태그를 제공합니다. 아래는 주요 스타일링 태그입니다.

 

2.1. 강조 태그 (<strong>)

강조 태그는 텍스트를 굵게 표시하여 중요성을 강조합니다.

<p>이 문장은 <strong>중요한 내용</strong>을 포함하고 있습니다.</p>

 

2.2 기울임 태그 (<em>)

기울임 태그는 텍스트를 이탤릭체로 표시하여 강조합니다.

<p>이 문장은 <em>강조된 내용</em>을 포함하고 있습니다.</p>

 

2.3 밑줄 태그 (<u>)

밑줄 태그는 텍스트에 밑줄을 추가합니다.

<p>이 문장은 <u>밑줄이 있는 내용</u>을 포함하고 있습니다.</p>

 

2.4 마크 태그 (<mark>)

마크 태그는 텍스트를 하이라이트하여 강조합니다. 주로 중요한 내용을 강조할 때 사용됩니다.

<p>이 문장은 <mark>특별한 내용</mark>을 강조합니다.</p>

 

2.5 작은 글씨 태그 (<small>)

작은 글씨 태그는 텍스트를 작게 표시합니다.

<p>이 문장은 <small>작은 글씨로 표시된 내용</small>을 포함하고 있습니다.</p>

 

3.리스트 태그 사용법

HTML에서는 리스트를 사용하여 콘텐츠를 정리할 수 있습니다. 주로 두 가지 유형의 리스트가 있습니다: 순서 없는 리스트와 순서 있는 리스트입니다.

 

3.1 순서 없는 리스트 (<ul>)

순서 없는 리스트는 항목을 순서 없이 나열할 때 사용합니다. 각 항목은 <li> 태그로 정의됩니다.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

 

3.2 순서 있는 리스트 (<ol>)

순서 있는 리스트는 항목을 순서대로 나열할 때 사용합니다. 마찬가지로 각 항목은 <li> 태그로 정의됩니다.

<ol>
    <li>웹 페이지 만들기</li>
    <li>스타일 적용하기</li>
    <li>인터랙션 추가하기</li>
</ol>

 

3.3 리스트 중첩

리스트는 중첩하여 사용할 수도 있습니다. 이 경우, 리스트 안에 또 다른 리스트를 포함할 수 있습니다.

<ul>
    <li>프로그래밍 언어
        <ul>
            <li>Python</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>웹 기술
        <ol>
            <li>HTML</li>
            <li>CSS</li>
        </ol>
    </li>
</ul>

 

4.결론

이번 포스트에서는 HTML에서 텍스트 및 제목 태그에 대해 알아보았습니다. 다양한 텍스트 태그를 사용하여 웹 페이지의 콘텐츠를 구조화하고, 스타일링 태그로 강조할 수 있습니다. 리스트 태그를 활용하여 정보를 체계적으로 정리할 수 있습니다. 감사합니다!