가이드 목록으로
입문
웹페이지 기본 구조
Header, Main, Section, Footer와 시맨틱 태그들로 이루어진 웹페이지의 기본 구조를 배웁니다.
📰
신문처럼 생각하세요!
신문에는 "사설", "스포츠", "광고" 같은 영역이 구분되어 있죠? 웹페이지도 마찬가지예요. header(머리말), main(본문), footer(꼬리말) 같은 영역으로 나뉘어요.
왜 나눠야 할까요?
구조가 명확해져요
검색엔진에게
"이건 메뉴야" 알려줘요
스크린 리더가
내용을 잘 읽어줘요
각 영역을 클릭하여 자세한 설명을 확인하세요
<header>
Logo
<nav>
홈
소개
서비스
연락처
<main>
<section>
히어로 섹션
메인 타이틀과 CTA
<section>
섹션
기능 소개, 가격표 등
<article>
콘텐츠 영역
<figure>
IMG
이미지 캡션
<aside>
사이드바
관련 글
태그
광고
<footer>
Copyright 2026
이용약관개인정보처리방침
요소를 선택하세요
다이어그램에서 영역을 클릭하면
자세한 설명을 볼 수 있습니다.
레이아웃 개념
개념을 선택하세요
왼쪽에서 개념을 선택하면
자세한 설명을 볼 수 있습니다.