HTML CSS 기반 반응형 메뉴바 만들기

반응형 메뉴바 만들기: HTML과 CSS의 조화

오늘은 다양한 디바이스에서 적합한 웹사이트를 구축하기 위한 반응형 메뉴바를 만드는 방법에 대해 알아보겠습니다. 반응형 디자인은 사용자가 어떤 화면 크기에서든 원하는 정보를 쉽게 찾을 수 있도록 해줍니다. 이를 실현하기 위해 HTML, CSS, 그리고 간단한 JavaScript 활용법을 설명드릴 예정입니다.

반응형 웹의 개념

반응형 웹이란 적절한 화면 크기에 따라 자동으로 레이아웃과 콘텐츠가 변형되는 웹사이트를 의미합니다. 이는 여러 장치에서 동일한 품질의 사용자 경험을 제공하게 해주며, 특히 스마트폰과 태블릿 사용자가 증가함에 따라 중요성이 더욱 커졌습니다.

필요한 기술 스택

반응형 메뉴바를 구현하기 위해서는 다음과 같은 기술이 필요합니다:

• HTML: 콘텐츠 구조화
• CSS: 스타일링 및 레이아웃 설정
• JavaScript: 사용자 상호작용 처리

HTML 구조 설정하기

반응형 메뉴바의 HTML 구조는 기본적으로 로고, 메뉴 아이템, 소셜 아이콘 등으로 구성됩니다. 예를 들어:

  
MyWebsite
  

    
HOME
    
ABOUT
    
SERVICES
    
CONTACT
  
  

    
    
  
  

CSS로 스타일링하기

스타일링을 통해 메뉴바의 시각적 요소를 정의합니다. 다음은 CSS 코드의 기본 구조입니다:

:root {
  --main-color: #333;
  --background-color: #fff;
}
* {
  margin: 0;
  padding: 0;
}
.nav {
  background-color: var(--background-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.menu {
  list-style: none;
  display: flex;
}
.menu li {
  margin: 0 15px;
}
.icon {
  font-size: 20px;
}
.fas {
  display: none; /* 기본값으로 숨김 */
}

미디어 쿼리로 반응형 디자인 구현하기

화면 크기에 따라 CSS를 변경하게 하는 미디어 쿼리를 사용하여, 모바일 장치에서 메뉴가 적절히 표시되도록 합니다. 아래는 768px 이하의 화면에 대한 스타일 설정 예시입니다:

@media screen and (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu {
    display: none; /* 기본적으로 숨김 */
    flex-direction: column;
    width: 100%;
  }
  .fas {
    display: block; /* 햄버거 메뉴 아이콘 보이기 */
  }
  .active .menu {
    display: flex; /* active 클래스가 있을 경우 메뉴 보이기 */
  }
}

JavaScript로 메뉴 토글 기능 추가하기

이제 사용자가 햄버거 아이콘을 클릭할 때 메뉴가 표시되거나 숨겨지도록 JavaScript를 추가합니다. 아래와 같은 코드를 사용하여 기능을 구현할 수 있습니다:

const bars = document.querySelector(".fas");
const menu = document.querySelector(".menu");
bars.addEventListener("click", () => {
  menu.classList.toggle("active");
});

간결한 코드로 효율성 높이기

이 방법으로 하나의 메뉴만으로 구현하고, 화면 크기에 따라 CSS 클래스를 변경하여 표시되는 요소를 조절할 수 있게 되었습니다. 메뉴 콘텐츠를 두 개 만들지 않고도 유연하게 대응할 수 있어 코드의 가독성과 유지 관리가 용이해지는 점이 큰 장점입니다.

결론

이번 글에서는 HTML, CSS, JavaScript를 활용하여 반응형 메뉴바를 만드는 법을 살펴보았습니다. 다양한 기기에서 최적의 사용자 경험을 제공하기 위해서는 지속적인 학습과 실습이 필요합니다. 매번 코드를 작성하며 개선해 나가는 과정을 통해 더 나은 웹사이트를 만들어가는 개발자가 되시기 바랍니다.

자주 찾으시는 질문 FAQ