포트폴리오 템플릿 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>

<div class="footer-text">© 2023 CodeFriends</div>
<div class="footer-text">All Rights Reserved.</div>

4. Script (<script>): 웹 페이지에 대한 추가 스크립트 또는 자바스크립트를 포함하는 부분입니다.

<script></script>

다음 내용이 궁금하다면?

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