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

body 태그 살펴보기

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


<header id="hero">​

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

<div class="division"></div>​

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

<section id="about" class="container">​

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

<div class="division"></div>​

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

<section id="interests" class="container">​

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

<div id="modal">​

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

<div class="division"></div>​

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

<section id="memory" class="container">​

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

<div class="division"></div>​

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

<section id="contact" class="container">​

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

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!