{chDEV}
HTMLCSS

[HTML/CSS] HODU Landing Page

Chae-hyeon Kim
2025년 8월 13일
목차

프로젝트 소개

  1. GitHub URL

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

  2. 배포 URL

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

구현 화면 및 기능

  • 데스크톱 버전

    gi1.gif

  • 모바일 버전

    gif2.gif

프로젝트명

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)

image.png