01 HTML 개요, 기본 구문 및 구조_2. HTML 요소

  ● 제목의 종류와 적절하게 사용하는 방법

HTML에는 <h1>(가장 중요)에서 <h6>(가장 중요하지 않음)까지 6단계의 제목 요소가 있습니다. 이러한 요소는 웹 페이지 콘텐츠의 구조와 계층 구조를 정의하는 데 사용됩니다.
<h1> 요소는 페이지의 기본 제목(일반적으로 기사 제목 또는 기본 주제)에 사용되어야 합니다. 그런 다음 주요 섹션의 경우 <h2> 및 해당 주요 섹션 내의 하위 섹션의 경우 <h3>와 같은 하위 수준 제목 요소를 사용하여 하위 제목을 추가할 수 있습니다.
제목을 적절하게 사용하고 페이지 전체에서 일관되게 사용하는 것이 중요합니다. 제목은 문체 목적으로만 사용되는 것이 아니라 사용되는 섹션의 내용을 정확하게 설명해야 합니다. 또한 전체 페이지의 기본 제목이므로 페이지당 하나의 <h1> 요소만 사용하는 것이 중요합니다.
제목을 올바르게 사용하면 화면 판독기 또는 기타 보조 기술에 의존하는 사용자가 콘텐츠에 더 쉽게 액세스할 수 있을 뿐만 아니라 페이지의 전체 구성 및 가독성을 개선할 수 있습니다. 머리글은 검색 엔진이 페이지 콘텐츠의 구조와 계층 구조를 이해하는 데 도움이 되므로 검색 엔진 최적화에도 중요합니다.

  ● 단락 및 단락을 사용하여 텍스트를 그룹화하고 서식을 지정하는 방법

<p> 요소는 웹 페이지에서 텍스트 단락을 정의하는 데 사용됩니다. 이를 사용하여 관련 텍스트를 함께 그룹화하고 글꼴 크기, 색상 또는 정렬 설정과 같은 서식을 전체 단락에 적용할 수 있습니다.
HTML에서 단락을 만들려면 <p> 태그 쌍으로 텍스트를 감싸기만 하면 됩니다. 예를 들어:

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

페이지에 여러 단락을 포함할 수 있으며 단락 내의 다른 HTML 요소를 사용하여 굵은 텍스트(<strong>) 또는 기울임꼴 텍스트(<em>)와 같은 추가 서식을 추가할 수도 있습니다.
<p> 요소 외에도 <div> 요소와 같이 페이지에서 관련 콘텐츠를 함께 그룹화하는 데 사용할 수 있는 다른 요소가 있습니다. <div> 요소는 이미지, 텍스트 또는 양식 컨트롤과 같은 모든 유형의 콘텐츠를 함께 그룹화하는 데 사용할 수 있는 일반 컨테이너 요소입니다.
단락 또는 기타 콘텐츠 그룹에 서식을 적용하려면 CSS 스타일을 사용할 수 있습니다. CSS를 사용하면 페이지의 모든 단락에 대한 글꼴 크기 또는 색상 설정과 같이 페이지의 여러 요소에 적용할 수 있는 스타일을 정의할 수 있습니다. <style> 요소를 사용하여 HTML 문서 내에 직접 CSS 스타일을 포함하거나 <link> 요소를 사용하여 외부 CSS 파일에 연결할 수 있습니다.

  ● 목록 및 다양한 유형(정렬, 비정렬 및 정의)

HTML은 순서가 지정된 목록(<ol>), 순서가 지정되지 않은 목록(<ul>) 및 정의 목록(<dl>)을 포함하여 웹 페이지에서 목록을 만들기 위한 여러 요소를 제공합니다.

정렬된 목록
정렬된 목록은 항목에 번호가 매겨진 목록입니다. 정렬된 목록을 만들려면 <ol> 요소를 사용하고 다음과 같이 각 목록 항목을 <li> 요소로 묶습니다.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

기본적으로 정렬된 목록은 아라비아 숫자(1, 2, 3 등)를 사용하여 번호가 매겨집니다. 그러나 CSS를 사용하여 번호 매기기 스타일을 사용자 지정할 수도 있습니다.

정렬되지 않은 목록
정렬되지 않은 목록은 항목이 글머리 기호 또는 기타 기호로 표시되는 목록입니다. 정렬되지 않은 목록을 만들려면 <ul> 요소를 사용하고 다음과 같이 각 목록 항목을 <li> 요소로 묶습니다.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

기본적으로 정렬되지 않은 목록은 글머리 기호를 사용하여 각 항목을 표시합니다. 다시 말하지만 CSS를 사용하여 글머리 기호의 모양을 사용자 지정할 수 있습니다.

정의 목록
정의 목록은 각 항목이 용어와 정의로 구성된 목록입니다. 정의 목록을 만들려면 다음과 같이 <dl> 요소를 사용하고 각 용어를 <dt> 요소로 묶고 각 정의를 <dd> 요소로 묶습니다.

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

기본적으로 정의 목록에는 용어와 정의를 서로 구분하기 위해 약간의 들여쓰기가 있습니다. 이 들여쓰기는 CSS를 사용하여 사용자 지정할 수 있습니다.
이러한 목록 요소는 서로 또는 다른 HTML 요소와 함께 사용하여 웹 페이지에서 복잡하고 구조화된 목록을 만들 수 있습니다.

  ● 링크 및 링크 생성 방법(상대 및 절대 URL 사용 포함)

HTML은 웹 페이지에 링크를 생성하기 위한 <a> 요소를 제공합니다. 링크를 생성하려면 <a> 요소의 href 속성을 사용하여 링크하려는 URL을 지정해야 합니다. 예를 들면 다음과 같습니다.

<a href="http://www.example.com">Link text goes here</a>

이 예에서 링크 텍스트는 "Link text go here"이고 링크되는 URL은 "http://www.example.com"입니다.

링크를 만들 때 사용할 수 있는 URL에는 상대 URL과 절대 URL의 두 가지 유형이 있습니다.

 

상대 URL
상대 URL은 현재 페이지의 URL에 상대적인 URL입니다. 즉, 웹 페이지를 동일한 웹 사이트의 다른 위치로 이동해도 링크는 계속 작동합니다. 다음은 상대 URL의 몇 가지 예입니다.
  - index.html (현재 페이지와 동일한 디렉토리에 있는 "index.html" 파일에 대한 링크)
  - ../about.html(현재 페이지의 상위 디렉토리에 있는 "about.html" 파일에 대한 링크)
  - http://www.example.com/images/picture.jpg ("www.example.com"의 "picture.jpg" 파일에 대한 링크 홈페이지)

 

절대 URL
절대 URL은 프로토콜(예: "http" 또는 "https")을 포함하여 연결된 리소스에 대한 전체 경로를 포함하는 URL입니다. 즉, 웹 페이지를 다른 웹 사이트로 이동하면 URL을 업데이트하지 않으면 링크가 작동하지 않을 수 있습니다. 다음은 절대 URL의 몇 가지 예입니다.

  - http://www.example.com/index.html ("www.example.com" 웹사이트의 "index.html" 파일 링크)

  - https://www.example.com/about.html("www.example.com" 웹사이트의 "about.html" 파일에 대한 링크 안전한 연결)

  - ftp://ftp.example.com/files/document.pdf("ftp.example.com" 서버의 "document.pdf" 파일에 대한 링크)

링크를 만들 때 연결하려는 URL이 정확하고 링크 텍스트가 링크가 사용자를 어디로 데려갈지 명확하게 설명하는지 확인하는 것이 중요합니다.