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-1/assets/logo-icon.svg" /> </div>
- Navigation (
<nav>
)
웹사이트의 주요 내비게이션 메뉴입니다.
<nav> <ul class="navigation"> <li><a href="#intro">WORK</a></li> ... </ul> </nav>
- Dropdown Menu
작은 화면에서 사용되는 드롭다운 메뉴입니다.
<div class="dropdown">...</div>
2. Main Content (<main>
)
웹사이트의 주요 컨텐츠가 위치하는 영역입니다.
<main>...</main>
- Intro Section (
#intro
)
소개 섹션으로, 디자이너의 주요 타이틀과 간략한 소개가 담겨 있습니다.
<section id="intro">...</section>
- Skills Section (
#skills
)
디자이너의 보유 기술을 나타내는 섹션입니다.
<section id="skills">...</section>
- Projects Section (
#project
)
디자이너의 프로젝트 포트폴리오를 보여주는 섹션입니다.
<section id="project">...</section>
3. Footer (<footer>
)
웹사이트의 하단 푸터 부분입니다.
<footer id="contact">...</footer>
- Contact Information
디자이너의 연락처 및 메시지 전송 폼이 위치한 부분입니다.
<div class="footer-top">...</div>
- Social Media Icons
소셜 미디어 아이콘들이 위치한 부분입니다.
<a href="#"> <img class="social-icon" src="https://assets.codefriends.net/templates/web/portfolio-1/assets/instagram.png" /> </a>
- Copyright Information
저작권 정보입니다.
<div class="footer-bottom-text">...</div>
4. Modal (#modal
)
이미지를 클릭했을 때 큰 화면으로 보여주는 모달창입니다.
<div id="modal">...</div>
이렇게 변환하면 가독성이 높아지고, 마크다운의 구조적인 표현력을 최대한 활용할 수 있습니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help