wpdoor

홈페이지 구조 이해하기

홈페이지를 만들다 보면 헤더(header), 푸터(footer), 내비게이션(nav), 섹션(section) 같은 말들을 자주 듣게 돼요.
이게 다 영어라 처음 보면 좀 낯설지만, 사실은 집 구조랑 비슷한 개념이라서 조금만 살펴보면 쉽게 이해할 수 있습니다. 하나씩 알아볼게요.


🏠 1. Header (헤더)

헤더는 홈페이지의 머리 부분이에요.

  • 사이트 로고, 상단 메뉴, 검색창 같은 게 주로 들어갑니다.
  • 방문자가 페이지에 들어오면 가장 먼저 보게 되는 곳이죠.

👉 예를 들어, 사이트 맨 위에 “wpdoor” 로고랑 로그인 버튼이 딱 보이는 부분이 헤더랍니다.


🧭 2. Nav (내비게이션)

Nav는 이름처럼 길 안내 역할을 해요.

  • 보통 메뉴바 형태로 되어 있어서, 사람들이 원하는 페이지로 쉽게 이동할 수 있게 도와줍니다.
  • 헤더 안에 있기도 하고, 화면 옆 사이드바에 따로 있기도 해요.

👉 예: “템플릿 | 강의 | 매뉴얼 | 블로그 | 문의하기” 메뉴


📌 3. Main (메인)

메인은 말 그대로 홈페이지의 핵심 공간이에요.

  • 한 페이지 안에서 딱 하나만 있어야 하는 영역이고, 사용자가 실제로 보려고 들어온 정보가 여기에 담겨 있어요.
  • 블로그라면 글 본문, 쇼핑몰이라면 상품 목록이 들어가겠죠.

👉 예: 내가 지금 읽고 있는 이 글의 본문 전체가 바로 메인 부분 이랍니다!


📦 4. Section (섹션)

Section은 큰 덩어리라고 생각하면 쉬워요.

  • 성격이 비슷한 요소끼리 묶어주는 역할을 해요.
  • 한 페이지 안에 여러 개의 Section이 있을 수 있어요.

👉 예: “회사 소개”, “서비스 특징”, “고객 후기” 같은 큰 단락들이 각각 하나의 섹션이에요.


📄 5. Article (아티클)

Article은 Section보다 더 구체적인, 독립적으로 볼 수 있는 콘텐츠 조각이에요.

  • 블로그 글 하나, 뉴스 기사 하나, 카드 뉴스 하나 같은 게 다 Article이에요.
  • 혼자 떼어놔도 의미가 있고, 모이면 Section을 이룰 수 있죠.

👉 예: 블로그에 올라온 글 하나하나


👣 6. Footer (푸터)

푸터는 홈페이지의 발 부분, 즉 맨 아래예요.

  • 회사 정보, 저작권 표시, 연락처, 약관, SNS 링크 같은 게 들어가요.
  • 헤더와 마찬가지로 대부분의 페이지에서 똑같이 반복됩니다.

👉 예: “© 2025 wpdoor. All rights reserved.”


✨ 정리하면?

홈페이지를 집에 비유하면 더 쉬워요.

  • Header → 집 간판
  • Nav → 안내판
  • Main → 집 공간의 대부분 (주 활동 공간)
  • Section → 방 (독립적 아이덴티티를 가진 각 공간)
  • Article → 책 한 권 (독립 콘텐츠)
  • Footer → 현관문 옆 주소판

홈페이지 구조는 이렇게 기본 틀만 이해해도 제작할 때 많은 도움이 돼요.
앞으로 웹사이트를 만들거나 볼 때, “아 여기가 헤더구나, 이건 섹션이구나” 하고 눈에 들어올 거예요 👀