[HTML/CSS] HODU Landing Page

프로젝트 소개

GitHub URL

https://github.com/chdev-kr/2025-project-hodu-landing-page
배포 URL

https://chdev-kr.github.io/2025-project-hodu-landing-page/

구현 화면 및 기능

데스크톱 버전
모바일 버전

프로젝트명

HODU Landing Page

사용 기술 및 기술 스택

HTML: 시맨틱 마크업
CSS:
- CSS Grid & Flexbox
- CSS Custom Properties
- Media Queries
- clamp() 함수
JavaScript:
- DOM 조작
- 이벤트 리스너
- 모달 기능
명명법: 케밥 케이스
배포: GitHub Pages

주요 특징

반응형 디자인: 데스크톱, 태블릿, 모바일 환경 지원
모달 시스템: 구독 폼 및 모바일 메뉴 모달
웹 접근성: 스크린 리더 지원 및 키보드 네비게이션
스무스 스크롤: 부드러운 페이지 내 이동
고정 헤더: 스크롤 시에도 항상 접근 가능한 네비게이션

개발 배경

모두의연구소 프론트엔드스쿨 1차 프로젝트로, HTML과 CSS를 활용해 반응형 호두 랜딩페이지를 구현했습니다. 웹 접근성 준수를 위해서 HTML Role 속성을 활용했습니다.

<!-- 모달에 role 속성 적용 -->
<div id="myModal" class="modal" role="dialog" aria-labelledby="modal-title">
  <div class="modal-content">
    <h2 id="modal-title" class="a11y-hidden">구독 모달</h2>
    <form role="form" aria-describedby="subscribe-help">
      <label for="email">이메일 주소</label>
      <input type="email" id="email" name="email" required />
      <button type="submit" role="button">구독하기</button>
    </form>
  </div>
</div>
 
<!-- 네비게이션에 role 속성 적용 -->
<nav role="navigation" aria-label="메인 네비게이션">
  <ul role="menubar">
    <li role="menuitem"><a href="#home">Home</a></li>
    <li role="menuitem"><a href="#about">About</a></li>
  </ul>
</nav>

화면 설계도(figma)

주요 특징

반응형 디자인: 데스크톱, 태블릿, 모바일 환경 지원

모달 시스템: 구독 폼 및 모바일 메뉴 모달

웹 접근성: 스크린 리더 지원 및 키보드 네비게이션

스무스 스크롤: 부드러운 페이지 내 이동

고정 헤더: 스크롤 시에도 항상 접근 가능한 네비게이션

개발 배경

<!-- 모달에 role 속성 적용 -->
<div id="myModal" class="modal" role="dialog" aria-labelledby="modal-title">
  <div class="modal-content">
    <h2 id="modal-title" class="a11y-hidden">구독 모달</h2>
    <form role="form" aria-describedby="subscribe-help">
      <label for="email">이메일 주소</label>
      <input type="email" id="email" name="email" required />
      <button type="submit" role="button">구독하기</button>
    </form>
  </div>
</div>
 
<!-- 네비게이션에 role 속성 적용 -->
<nav role="navigation" aria-label="메인 네비게이션">
  <ul role="menubar">
    <li role="menuitem"><a href="#home">Home</a></li>
    <li role="menuitem"><a href="#about">About</a></li>
  </ul>
</nav>