Guidelines
Practice
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">
- '연락하기' 섹션
- 이메일 주소 및 연락처 정보 포함
<footer id="footer>"
- 웹페이지의 푸터 부분
- 인스타그램 및 유튜브 링크 포함
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help