lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

webIntroBioChapter1Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroBioChapter2Title

webIntroBioChapter3Title

# body 태그 살펴보기

`<body>` 태그 내의 주요 섹션 및 구성을 살펴보겠습니다.

<br />

## `<header id="hero">`

- 웹페이지의 헤더 부분으로, 주요 내비게이션 및 웹사이트 소개와 관련된 내용을 포함하고 있습니다.
- 내부 구성:
  - `<nav class="navbar">` : 주요 내비게이션 바
    - 로고 (`<span id="logo">`)
    - 내비게이션 메뉴 항목 (`<ul class="nav-menu">`)
    - 햄버거 메뉴 버튼 (`<div class="hamburger">`) : 모바일 환경에서의 메뉴 표시 (햄버거 메뉴는 Chapter 2에서 자세히 다뤄요)
  - `<section class="header-container">` : 웹사이트의 소개 부분
    - 프로필 이미지, 인사말, 이름 및 간략한 소개 내용 포함
    - 인스타그램 링크 아이콘

<br />

## `<div class="division"></div>`

- 섹션 간 구분을 위한 빈 요소 (디자인적 구분을 위해 사용될 수 있음)

<br />

## `<section id="about" class="container">`

- '소개' 섹션
- 개인 정보 및 간단한 자기 소개 내용 포함

<br />

## `<div class="division"></div>`

- 섹션 간 구분을 위한 빈 요소

<br />

## `<section id="interests" class="container">`

- '취미' 섹션
- 사진 및 동영상을 포함한 그리드 레이아웃

<br />

## `<div id="modal">`

- 이미지나 동영상을 클릭했을 때 나타나는 모달(팝업 창)
- 내부에 이미지 및 설명 텍스트를 표시하는 영역이 포함

<br />

## `<div class="division"></div>`

- 섹션 간 구분을 위한 빈 요소

<br />

## `<section id="memory" class="container">`

- '추억' 섹션
- 이미지 슬라이드쇼 포함

<br />

## `<div class="division"></div>`

- 섹션 간 구분을 위한 빈 요소

<br />

## `<section id="contact" class="container">`

- '연락하기' 섹션
- 이메일 주소 및 연락처 정보 포함

<br />

## `<footer id="footer>"`

- 웹페이지의 푸터 부분
- 인스타그램 및 유튜브 링크 포함