HTML Section 태그 활용

소개

HTML 에서 <section> 태그는 문서의 명확성과 구분을 위해 여러 섹션으로 나눌 때 사용됩니다. 이는 독립적인 섹션 또는 문서 내의 중첩된 섹션에 사용될 수 있는 의미론적 요소입니다. 이 랩에서는 HTML 파일에서 <section> 태그를 사용하는 간단한 단계를 안내합니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

기본 섹션 추가

먼저, 선호하는 코드 편집기에서 index.html 파일을 생성합니다. 이 파일에는 우리가 작업할 HTML 코드가 포함됩니다.

<section> 태그를 사용하여 기본 섹션을 추가하는 것으로 시작합니다. 이는 다음과 같이 수행할 수 있습니다.

<section>
  <h1>Section Title</h1>
  <p>Section content goes here.</p>
</section>

위 코드에서 h1과 p는 각각 제목과 단락을 위한 HTML 태그입니다. h1 태그는 섹션의 최상위 헤더를 정의하고, p 태그는 섹션에 텍스트 콘텐츠를 추가하는 데 사용됩니다.

하위 섹션 추가

<section> 태그의 중첩을 사용하여 섹션 내에 하위 섹션을 만들 수도 있습니다. 예를 들어:

<section>
  <h1>Section Title</h1>
  <p>Section content goes here.</p>

  <section>
    <h2>Subsection Title</h2>
    <p>Subsection content goes here.</p>
  </section>
</section>

위 코드에서는 다른 중첩된 섹션을 포함하는 섹션이 있으며, 이는 하위 섹션 역할을 합니다. 중첩된 섹션 내의 h2 태그는 하위 섹션의 헤더를 정의하고, p 태그는 하위 섹션에 텍스트 콘텐츠를 추가합니다.

CSS 스타일 적용

기본적으로 <section> 태그는 HTML 에서 블록 레벨 요소입니다. 다른 HTML 요소와 마찬가지로 CSS 를 사용하여 <section> 요소를 스타일링할 수 있습니다. 다음은 예시입니다.

<style>
  section {
    border: 2px solid black;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>

위 코드에서는 <section> 태그에 대한 CSS 를 포함하기 위해 style 태그가 사용되었습니다. CSS 코드는 <section> 요소에 테두리, 패딩 및 마진을 추가합니다. 이러한 속성은 선호도에 따라 조정할 수 있습니다.

섹션 추가하기

마지막으로, 필요에 따라 HTML 파일에 더 많은 섹션을 추가할 수 있습니다. 섹션 태그를 열고 닫는 구조를 따르는 것을 잊지 마세요.

<section>
  <h1>Section 1</h1>
  <p>Content goes here.</p>
</section>

<section>
  <h1>Section 2</h1>
  <p>Content goes here.</p>
</section>

<section>
  <h1>Section 3</h1>
  <p>Content goes here.</p>
</section>

요약

HTML 의 <section> 태그는 문서의 명확성과 구분을 위해 문서를 여러 섹션으로 나누는 데 사용되는 시맨틱 요소입니다. 독립적인 섹션과 문서 내의 중첩된 하위 섹션을 생성할 수 있습니다. 이 랩에서 제공된 단계를 통해 이제 HTML 파일에 <section> 태그를 추가하고, CSS 로 사용자 정의하며, 문서의 구성과 가독성을 향상시킬 수 있습니다.