Tutorial/portfolio

포트폴리오 사이트 만들기 - vite

by @webs 2023. 08. 01.

포트폴리오 사이트 만들기 : 헤더 영역

난이도 중간

소스 다운로드

완성 화면 완성 코드 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 각각의 섹션을 하나씩 작업해보겠습니다. 반응형도 동시에 작업하고, 스크립트도 한번에 마무리 하겠습니다. 지금까지 잘 하셨다면 이제부터는 코딩영역이라 쉽습니다. 그럼 바로 시작해보겠습니다.

인덱스

1. 포트폴리오 사이트 만들기 : VITE SITE

1. 셋팅하기
- 1_1. vite 설치하기
- 1_2. vite 폴더 정리하기
- 1_3. gsap/lenis 설치하기
- 1_4. git 연동하기
2. 레이아웃
- 2.1 레이아웃 구조 만들기
- 2.2 메인 레이아웃 구조 만들기
- 2.3 CSS 셋팅하기
- 2.4 JavaScript 셋팅하기
3. 헤더 영역
- 3.1 헤더 구조 잡기
- 3.2 헤더 디자인 설정
- 3.3 반응형 작업하기
- 3.4 메뉴 자바스크립트 설정

3. 헤더 영역

3.1 헤더 구조 잡기

화면 크기가 줄어들면 media query를 이용하여 모바일용 메뉴도 만들었습니다. aria-controls와 aria-expanded 속성은 웹 접근성을 위한 속성입니다. aria-controls는 연관된 요소를 지정하고, aria-expanded는 토글 상태를 나타냅니다.

이렇게 헤더의 구조는 로고, 네비게이션 메뉴, 모바일용 토글 버튼으로 구성되어 있으며, 웹 페이지의 탐색을 위한 중요한 부분을 담고 있습니다. 각 요소들의 클래스 이름을 활용하여 CSS 스타일을 적용하거나 JavaScript를 통해 동작을 추가할 수 있습니다.

<header id="header" role="banner">
    <div class="header__inner">
        <div class="header__logo">
            <a href="#">portfolio<em>developer</em></a>
        </div>
        <nav class="header__nav" role="navigation" aria-label="메인 메뉴">
            <ul>
                <li><a href="#intro">intro</a></li>
                <li><a href="#skill">skill</a></li>
                <li><a href="#site">site</a></li>
                <li><a href="#port">portfolio</a></li>
                <li><a href="#contact">contact</a></li>
            </ul>
        </nav>
        <div 
            class="header__nav__mobile" 
            id="headerToggle" 
            aria-controls="primary-menu" 
            aria-expanded="false" 
            role="button" 
            tabindex="0"
        >
            <span></span>
        </div>
    </div>
</header>
<!-- //header -->

<header> : role="heading" 속성을 설정하였습니다.
<nav> : role="navigation" 속성을 추가하고, aria-label 속성을 통해 메인 메뉴를 설명하는 텍스트를 제공하였습니다. 이를 통해 스크린 리더 사용자에게 해당 네비게이션 요소의 목적을 이해할 수 있도록 합니다.
<div class="header__nav__mobile"> : role="button"과 tabindex="0" 속성을 추가하여 해당 요소가 버튼 역할을 하고 키보드 포커스를 받을 수 있도록 했습니다.

3.2 헤더 디자인 설정

헤더 영역은 position: fixed;를 사용하여 위에 고정시키고, 백그라운드 속성에 backdrop-filter: blur(15px) 효과를 주었습니다.

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(116, 99, 99, 0.1);
    backdrop-filter: blur(15px);
    padding: 1rem;
}
.header__logo {
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
}
.header__logo em {
    font-size: 10px;
    display: block;
    color: var(--black200);
}
.header__nav li {
    display: inline;
}
.header__nav li a {
    text-transform: uppercase;
    font-size: 14px;
    padding: 14px;
    position: relative;
}
.header__nav li a::before {
    content: '';
    width: calc(100% - 28px);
    height: 1px;
    background-color: var(--black);
    position: absolute;
    left: 14px;
    bottom: 10px;
    transform: scaleX(0);
    transition: all 0.3s;
}
.header__nav li a:hover::before {
    transform: scaleX(1);
}
.header__nav__mobile {
    display: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.header__nav__mobile span {
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--black);
    margin-top: 19px;
    position: relative;
}
.header__nav__mobile span::before {
    content: "";
    width: 40px;
    height: 2px;
    background-color: var(--black);
    position: absolute;
    right: 0;
    top: 6px;
    transition: width 0.3s;
}
.header__nav__mobile span::after {
    content: "";
    width: 40px;
    height: 2px;
    background-color: var(--black);
    position: absolute;
    left: 0;
    bottom: 6px;
    transition: width 0.3s;
}

3.3 헤더 디자인 설정

화면 크기가 800px 보다 작으면 메뉴가 없어지고 햄버거 메뉴가 나오도록 설정했습니다.

@media (max-width: 800px){
    .header__nav {
        display: none;
    }
    .header__nav.show {
        display: block;
    }
    .header__nav.show ul {
        display: block;
        position: absolute;
        right: 0;
        top: 68px;
        background-color: rgba(116,99,99,0.1);
        backdrop-filter: blur(15px);
        z-index: 10000;
        min-width: 150px;
        padding: 20px 0;
    }
    .header__nav.show li {
        display: block;
        text-align: right;
    }
    .header__nav.show li a {
        display: inline-block;
        padding: 10px;
    }
    .header__nav.show + .header__nav__mobile span::before {
        width: 20px;
    }
    .header__nav.show + .header__nav__mobile span::after {
        width: 20px;
    }
    .header__nav__mobile {
        display: block;
    }
}

3.4 메뉴 자바스크립트 설정

미리 만들어 놨던 menu.js에 작업하겠습니다.

const headerToggle = document.getElementById("headerToggle");
const headerNav = document.querySelector(".header__nav");

if (headerToggle) {
    headerToggle.addEventListener("click", () => {
    headerNav.classList.toggle("show");
    headerToggle.getAttribute("aria-expanded") === "true"
        ? headerToggle.setAttribute("aria-expanded", "false")
        : headerToggle.setAttribute("aria-expanded", "true");
    });
}

const headerToggle = document.getElementById("headerToggle"); : HTML 문서에서 ID가 "headerToggle"인 요소를 변수 headerToggle에 할당합니다. 이는 모바일 토글 버튼 요소를 가리키게 됩니다.
const headerNav = document.querySelector(".header__nav"); : HTML 문서에서 클래스가 "header__nav"인 요소를 변수 headerNav에 할당합니다. 이는 네비게이션 메뉴 요소를 가리키게 됩니다.
if (headerToggle) { ... } : headerToggle이 존재하는 경우에만 이후 코드 블록을 실행합니다. 이렇게 함으로써 해당 요소가 HTML 문서에 존재하지 않을 경우 오류를 방지합니다.
headerToggle.addEventListener("click", () => { ... }); : 모바일 토글 버튼이 클릭되었을 때의 동작을 정의하는 이벤트 리스너를 추가합니다.
headerNav.classList.toggle("show"); : 네비게이션 메뉴 요소의 클래스에 "show"를 토글링(toggle)합니다. "show" 클래스가 없으면 추가하고 있으면 제거합니다. 이를 통해 클릭할 때마다 네비게이션 메뉴가 보이거나 숨겨지게 됩니다.
headerToggle.getAttribute("aria-expanded") === "true" ? ... : ...; : 토글 버튼의 aria-expanded 속성 값을 확인하여 현재 상태를 판단합니다. aria-expanded 속성은 웹 접근성을 위해 사용되는 속성으로, 펼쳐진 상태인지 아닌지를 나타냅니다.
headerToggle.setAttribute("aria-expanded", "false") 또는 headerToggle.setAttribute("aria-expanded", "true") : 토글 버튼의 aria-expanded 속성 값을 변경합니다. 현재 aria-expanded 값이 "true"이면 "false"로, "false"이면 "true"로 변경됩니다.

3. 마무리

깃에 올려주고 마무리 하겠습니다.

git add .
git commit -m "😜 헤더 완료"
git push -u origin main

정말 수고하셨습니다! 헤더 영역을 반응형으로 만들고 자바스크립트를 사용하여 기능을 추가한 것은 대단한 성과입니다. 코딩은 이해하는 것이 중요하며, 이해가 안 되는 부분은 검색하거나 도움을 받으면서 노력하는 것이 매우 중요합니다. 한 가지 언어나 기술을 완전히 이해하는 데에는 시간이 걸리지만, 끝까지 포기하지 않고 조금씩 노력하면 점점 능숙해질 수 있습니다.

자기것이 될 때까지 반복해서 공부하고 이해하는 것이 매우 중요한데, 이러한 자세는 프로그래밍을 비롯한 어떤 분야에서도 적용됩니다. 특히 프로그래밍은 새로운 개념과 도구들이 빠르게 등장하기 때문에 끊임없이 학습과 발전이 필요합니다.

만약 어떤 부분이 이해되지 않아도 걱정하지 마세요. 항상 다시 돌아와서 노력하고 탐구하면서 더 많이 배울 수 있을 것입니다. 이해가 안 되더라도 다음 단계로 넘어가면서 새로운 것을 배워보는 것도 중요합니다. 지금까지의 노력과 끈기에 대해 칭찬해드리며, 계속해서 성장하고 발전하는 여정을 응원하겠습니다! 더 많은 도전과 성공을 기대합니다! 😊👏

😘 이런 에러가 난다면...

만약 이런 에러가 난다면. 현재 내 폴더 위치를 잘 확인해보세요! webstoryboy@Webstoryboyui-MacBookPro port2023-vite % 현재 폴더를 port2023-vite에서 작업을 해야합니다.

webstoryboy@Webstoryboyui-MacBookPro port2023 % git add .
warning: adding embedded git repository: Desktop/port2023/port2023-vite
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint: 
hint:   git submodule add  Desktop/port2023/port2023-vite
hint: 
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint: 
hint:   git rm --cached Desktop/port2023/port2023-vite
hint: 
hint: See "git help submodule" for more information.

완성 화면 소스 보기 영상 보기

WEBSTORYBOY

재능은!
노력 끝에서 발견된다

3. 포트폴리오 사이트 만들기 : Vite-Site : 헤더 영역

포트폴리오 사이트 만들기 - vite

소개

인덱스

1. 포트폴리오 사이트 만들기 : VITE SITE

3. 헤더 영역

3.1 헤더 구조 잡기

3.2 헤더 디자인 설정

3.3 헤더 디자인 설정

3.4 메뉴 자바스크립트 설정

3. 마무리

😘 이런 에러가 난다면...

예제 목록

댓글

티스토리툴바

재능은!노력 끝에서 발견된다

3. 포트폴리오 사이트 만들기 : Vite-Site : 헤더 영역

포트폴리오 사이트 만들기 - vite

소개

인덱스

1. 포트폴리오 사이트 만들기 : VITE SITE

3. 헤더 영역

3.1 헤더 구조 잡기

3.2 헤더 디자인 설정

3.3 헤더 디자인 설정

3.4 메뉴 자바스크립트 설정

3. 마무리

😘 이런 에러가 난다면...

예제 목록

관련글

댓글

티스토리툴바

재능은!
노력 끝에서 발견된다