02 HTML 제목, 단락 및 링크 작업_1. 제목, 2. 단락

 1. 제목:

  ● HTML의 제목 소개

HTML의 제목은 웹 페이지의 콘텐츠를 구조화하고 구성하는 데 사용됩니다. HTML은 h1에서 h6까지 6가지 수준의 제목을 제공하며 h1이 가장 높은 수준이고 h6이 가장 낮은 수준입니다. 제목은 문서의 계층 구조를 전달합니다. h1은 기본 제목을 나타내고 후속 수준은 부제목을 나타냅니다.

  ● 다양한 수준의 제목 이해(h1, h2, h3 등)

각 제목 수준에는 특정 의미론적 의미가 있으며 서로 다른 수준의 중요도 및 계층을 나타내는 데 사용됩니다. h1 요소는 페이지의 주요 제목을 나타내며 페이지당 한 번만 사용해야 합니다. 소제목 및 하위 제목(h2, h3 등)은 콘텐츠를 섹션과 하위 섹션으로 구분하는 데 사용됩니다. 계층 구조에 따라 논리적 순서로 표제를 사용하는 것이 중요합니다.

  ● 문서 구조 및 접근성을 위한 제목의 올바른 사용 및 중요성

제목을 올바르게 사용하면 웹페이지의 구조와 가독성을 개선하는 데 도움이 됩니다. 스크린 리더 및 보조 기술은 제목 태그를 사용하여 콘텐츠를 탐색하고 이해합니다. 적절하게 구조화된 제목은 웹 사이트의 접근성을 향상시켜 장애가 있는 사용자를 포함한 모든 사용자가 페이지 구성을 더 쉽게 이해할 수 있도록 합니다.

  ● 내용을 효과적으로 구조화하기 위해 제목을 사용하는 예

제목은 다른 주제를 소개하거나 관련 정보를 그룹화하는 등 콘텐츠를 의미 있는 섹션으로 구분하는 데 사용되어야 합니다. 예를 들어 블로그 페이지에서 각 블로그 게시물에는 h2 제목이 있을 수 있으며 게시물 내의 개별 섹션은 h3 제목으로 표시될 수 있습니다. 제목을 일관되고 신중하게 사용하면 전반적인 사용자 경험이 향상되고 사용자가 특정 콘텐츠를 빠르게 스캔하고 찾을 수 있습니다.

 

 2. 단락:

  ● HTML로 단락 만들기

HTML에서 단락은 <p> 요소를 사용하여 생성됩니다. <p> 요소는 텍스트 단락을 그룹화하고 서식을 지정하는 데 사용되는 블록 수준 요소를 나타냅니다. 기본적으로 단락은 텍스트 전후에 세로 간격을 만듭니다.

  ● <p> 요소를 사용하여 단락 정의

단락을 만들려면 여는 태그와 닫는 <p> 태그 내에서 텍스트나 내용을 감싸기만 하면 됩니다.
예를 들어:

<p>This is a paragraph of text.</p>

 

  ● 기본 인라인 HTML 태그(예: <strong>, <em>)를 사용하여 단락 내 텍스트 서식 지정

HTML은 단락 내에서 텍스트 서식을 지정하는 데 사용할 수 있는 다양한 인라인 태그를 제공합니다. <strong> 태그는 텍스트를 강조하거나 강조하는 데 사용되며 일반적으로 굵게 표시됩니다. <em> 태그는 이탤릭체로 텍스트를 강조하는 데 사용됩니다. 이러한 태그는 다른 서식 스타일을 적용하기 위해 단락 내에 중첩될 수 있습니다.

<p>This is a <strong>strong</strong> and <em>emphasized</em> text within a paragraph.</p>

 

  ● 단락 내에서 줄 바꿈 추가

기본적으로 HTML은 연속된 공백과 줄 바꿈을 단일 공백으로 축소합니다. 단락 내에서 줄 바꿈을 만들려면 <br> 태그를 사용할 수 있습니다.
예를 들어:

<p>This is the first line.<br>This is the second line.</p>

 

  ● 단락 내 다른 요소 중첩

단락에는 링크, 이미지 또는 다른 단락과 같은 다른 HTML 요소가 중첩되어 포함될 수 있습니다. 이렇게 하면 단락 내의 콘텐츠를 효과적으로 구조화하고 형식을 지정할 수 있습니다.

<p>This is a paragraph with a <a href="https://example.com">link</a> and an <img src="image.jpg" alt="image"> within it.</p>