포트폴리오 제작

git: https://github.com/maplesyrup0423/portfolio-YEJIN-2024

참고 강의:
02. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 레이아웃 | 프론트앤드 | 포트폴리오
03. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 헤더 영역 | 웹스토리보이 | 포트폴리오

레이아웃

전체 구조는 3단으로 설계하며, meta 정보를 설정하고 웹 표준을 준수하기 위해 skip 메뉴와 header, main, footer 구조를 사용합니다. 여기서 role 속성은 웹 접근성을 향상시키기 위해 HTML 요소의 역할을 정의하여 스크린 리더 사용자들이 쉽게 이해하도록 돕습니다.

주요 개념

• 웹 표준: 권장 사항과 지침의 모음으로, 호환성과 일관성을 높입니다.
• 웹 접근성: 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 하는 것.
• WAI-ARIA: 웹 접근성을 향상시키기 위한 기술 규격으로, 동적 웹 애플리케이션의 접근성을 개선합니다.
  • 역할(Role): 요소의 역할을 지정합니다.
  • 상태(State): 요소의 상태를 나타냅니다.
  • 속성(Property): 추가 정보를 제공합니다.

JavaScript 연동

CSS와 JavaScript 파일을 모듈 방식으로 연동하였습니다. 모듈 방식은 코드 재사용성과 관리 효율성을 높이며, ES6부터 지원됩니다.

헤더 영역

참고 사이트: https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

화면 크기에 따라 media query를 사용해 모바일 메뉴를 생성합니다. aria-controls와 aria-expanded는 웹 접근성을 위한 속성으로, 각각 연관된 요소와 토글 상태를 나타냅니다.

헤더는 로고, 네비게이션 메뉴, 모바일 토글 버튼으로 구성되며, CSS 스타일과 JavaScript 동작을 추가할 수 있습니다.

• 헤더는 position: fixed;로 고정하고, backdrop-filter: blur(15px);로 배경을 흐리게 처리했습니다.
• 화면 크기가 800px 이하일 때 메뉴는 사라지고 햄버거 메뉴가 표시됩니다.

햄버거 메뉴 클릭시 네비메뉴 보여줌

export function menu() {
  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");
    });
  }
}