본문으로 건너뛰기

The body Tag Defining Content Displayed on the Screen

Exploring the body Tag

Let's take a look at the main sections and structures within the <body> tag.


<header id="hero">

  • This is the header part of the webpage, containing major navigation and contents related to the introduction of the website.
  • Internal structure:
    • <nav class="navbar"> : The main navigation bar
      • Logo (<span id="logo">)
      • Navigation menu items (<ul class="nav-menu">)
      • Hamburger menu button (<div class="hamburger">) : Menu display in mobile environments (the hamburger menu is covered in detail in Chapter 2)
    • <section class="header-container"> : The introduction part of the website
      • Includes profile image, greeting, name, and brief introduction
      • Instagram link icon

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

  • An empty element for dividing sections (can be used for design purposes)

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

  • The 'About' section
  • Includes personal information and a brief self-introduction

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

  • An empty element for dividing sections

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

  • The 'Interests' section
  • Grid layout including photos and videos

<div id="modal">

  • A modal (popup window) that appears when clicking on an image or video
  • Contains an area displaying images and descriptive text

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

  • An empty element for dividing sections

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

  • The 'Memory' section
  • Includes an image slideshow

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

  • An empty element for dividing sections

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

  • The 'Contact' section
  • Includes email address and contact information

  • The footer part of the webpage
  • Contains Instagram and YouTube links