본문으로 건너뛰기
실습하기

첫 번째 템플릿 구성요소 살펴보기

첫 번째 템플릿의 주요 섹션 및 구성을 살펴보겠습니다.


<header>

  • 이 섹션은 웹 페이지의 상단에 위치하며 주로 탐색과 관련된 요소를 포함합니다.
  • <nav class="header"> : 주요 탐색 바
    • .icon-menus: SNS 아이콘 링크 목록
    • .header-title: 웹사이트의 제목 또는 브랜드명
    • .dropdown: 햄버거 메뉴 형태의 드롭다운 메뉴 주요 페이지로의 링크를 포함하고 있습니다

<main>

  • 웹 페이지의 주요 내용을 포함하는 섹션
  • <section id="intro">: 웹 페이지의 서론이나 소개 섹션
  • <section id="popular">: 인기 상품을 보여주는 섹션
  • <section id="interior">: 인테리어 디자인 사례를 보여주는 섹션
  • <section id="showcase">: 특정 디자인 프로젝트를 보여주는 섹션
  • <section id="design">: 다양한 디자인 작품을 보여주는 섹션

<footer>

  • 웹 페이지의 하단에 위치하는 섹션으로, 일반적으로 회사 정보, 연락처 정보, 사회적 링크 등의 정보를 포함합니다.
  • .footer-items-container: 회사 이름과 SNS 아이콘 링크를 포함합니다.
  • .footer-right: 사용자에게 연락하도록 권장하는 문구와 버튼을 포함합니다.