Guidelines
Practice
포트폴리오 템플릿 2
두 번째 템플릿의 구조를 살펴보겠습니다.
1. Header (<header>
): 웹사이트의 상단 헤더 부분입니다.
<header>...</header>
- Logo: 로고 이미지가 위치한 부분입니다.
<div class="header-icon"> <img class="logo-icon" src="https://assets.codefriends.net/templates/web/portfolio-2/assets/logo-icon.svg" /> </div>
- Navigation (
<nav>
): 웹사이트의 주요 내비게이션 메뉴입니다.
<nav> <ul class="navigation"> <li>WORK</li> <li>PROJECT</li> <li>ABOUT</li> </ul> </nav>
- Dropdown Menu: 작은 화면에서 사용되는 드롭다운 메뉴입니다.
<div class="dropdown"> <img class="dropdown-icon" src="https://assets.codefriends.net/templates/web/portfolio-2/assets/hamburger.png" /> <ul class="dropdown-content"> <li><a href="#intro">WORK</a></li> <li><a href="#career">PROJECT</a></li> <li><a href="#about">ABOUT</a></li> </ul> </div>
2. Main Content (<main>
): 웹사이트의 주요 컨텐츠가 위치하는 영역입니다.
<main>...</main>
- Intro Section (
#intro
): 소개 섹션으로 간략한 소개가 담겨 있습니다.
<section id="intro">...</section>
- Career Section (
#career
): 경력 정보를 나타내는 섹션입니다.
<section id="career">...</section>
- Projects Section (
#project
): 프로젝트 포트폴리오를 보여주는 섹션입니다.
<section id="project">...</section>
- About Section (
#about
): 추가적인 소개와 연락처 정보가 담겨 있는 섹션입니다.
<section id="about">...</section>
3. Footer (<footer>
): 웹사이트의 하단 푸터 부분입니다.
<footer>...</footer>
- Copyright Information: 저작권 정보를 표기합니다.
<div class="footer-text">© 2023 CodeFriends</div> <div class="footer-text">All Rights Reserved.</div>
4. Script (<script>
): 웹 페이지에 대한 추가 스크립트 또는 자바스크립트를 포함하는 부분입니다.
<script></script>
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help