사용자 경험과 웹 디자인 기술을 향상하려면 반응형 탐색 모음(탐색바)이 필수적입니다.
특히 프론트엔드 개발을 배우고 반응형 탐색 모음을 구축하려는 초보자라면 제대로 찾아오셨습니다. 하지만 HTML과 CSS로 내비게이션 바를 만들기 전에 반응형 내비게이션 바의 기본 디자인 원칙을 이해해야 합니다.
자바스크립트를 한 줄도 사용하지 않고 HTML과 CSS만을 사용하여 반응형 탐색 모음을 만드는 방법은 다음과 같습니다.
전제 조건: 반응형 탐색 모음의 세 가지 핵심 요소
대부분의 웹사이트 소유자가 새로운 방문자를 확보하고 싶어하는 것은 당연한 일입니다. 이를 위한 첫 번째 단계는 방문자에게 명확하고 간결한 경로를 보여주는 것입니다. 호기심을 불러일으키고 동시에 방문자를 끌어들이는 탐색 모음을 만들어야 합니다. 이상적인 HTML 탐색 모음을 디자인할 때 고려해야 할 세 가지 핵심 요소:
단순
명확하고 읽기 쉬워야 합니다. 모든 페이지에 대한 링크로 탐색 모음을 복잡하게 만드는 대신 사이트의 더 넓은 범주로 이동해야 합니다. 그런 다음 필요한 경우 하위 메뉴를 드롭다운으로 추가할 수 있습니다.
눈에 띄는
간단한 반응형 탐색 모음은 전혀 지루하지 않아야 합니다. 디자인에 일관성을 더하려면 미리 결정된 브랜드 색상을 고수해야 합니다. 색 구성표를 실험해보고 강조 표시 및 드롭다운 메뉴에 더 밝거나 어두운 색조를 사용할 수 있습니다.
반응형
Statista 의 글로벌 인터넷 사용 보고서에 따르면 전 세계 인구의 59.5%가 인터넷을 적극적으로 사용하고 있으며, 92.6%가 모바일 기기를 통해 인터넷을 사용하고 있습니다. 이는 사이트에 반응형 모바일 내비게이션을 구현하는 것의 중요성을 충분히 이해하기에 충분한 수치입니다.
최상위 모바일 내비게이션은 꽤 인기가 있습니다. 햄버거 메뉴, 길로틴, 플로팅 아이콘 및 탭을 사용할 수 있습니다. 여러 계층으로 구성된 카테고리가 5개 이상일 때 구세주 같은 존재입니다. 최상위 탐색은 특히 콘텐츠가 많은 사이트에서 화면 공간을 크게 절약할 수 있습니다.
관련 아이콘이 있는 탭 모음은 일반적으로 동일한 계층 수준에서 3~5개의 메뉴를 포함하므로 하단 탐색 모음에 완벽하게 맞습니다. 하위 메뉴와 순차 메뉴는 상위-하위 관계로 기본 카테고리를 따릅니다.
웹 디자인이 처음이라면 항상 관련성 있는 반응형 웹 디자인 원칙을 참조하여 더 많은 팁을 얻어야 합니다.
햄버거 메뉴로 반응형 탐색 모음 구축하기
디자인 원칙이 명확해졌으니 이제 전용 반응형 탐색 모음 메뉴를 구축할 차례입니다. 반응형 웹사이트를 구축하기 위한 다양한 CSS 기능이 있습니다. 하지만 이 가이드에서는 CSS 플렉스박스 및 미디어 쿼리를 사용하여 반응형 탐색 메뉴를 처음부터 만드는 방법을 알려드립니다.
그렇다면 CSS 탐색 모음은 어떤 모습일까요? 다음과 같은 최상위 내비게이션이 있을 것입니다:
⭐ 로고
⭐ 탐색 메뉴
⭐ 드롭다운 메뉴
⭐ 햄버거 메뉴(체크박스 해킹 사용)
HTML 시작하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">All Things N</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="services">
<a href="/">Services</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Contact</a></li>
</div>
</ul>
</nav>
</body>
</html>
서비스(메인) 메뉴 안에 드롭다운 메뉴가 있습니다. 데스크톱 탐색 모음을 작성하는 동안 햄버거 메뉴를 건너뛸 수 있습니다.
이제 HTML 탐색 모음 구조가 완성되었습니다. 출력은 다음과 같습니다:
기본 CSS 적용: 유틸리티
몇 가지 기본 CSS 스타일을 적용하여 기본값을 재설정하면 탐색 모음 스타일을 쉽게 지정할 수 있습니다.
/* UTILITIES */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: cursive;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
CSS Flexbox를 사용하여 탐색 모음 스타일 지정
CSS Flexbox를 사용하여 강조 표시를 위한 호버링 효과를 적용할 수 있습니다. 서비스 메뉴는 평상시에는 표시: 없음으로 설정하고 누군가 마우스를 가져가면 표시: 차단으로 설정해야 하므로 조금 더 주의가 필요합니다.
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
background-color: rgb(1, 139, 139);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: #4c9e9e;
}
.services:hover .dropdown {
display: block;
}
이 CSS는 다음과 같은 탐색 모음을 생성합니다:
CSS 미디어 쿼리를 사용한 반응형 탐색 모음
이 코드 조각을 입력하면 화면 크기가 작은 모바일 기기에서만 표시되는 햄버거 메뉴가 만들어집니다. 이를 위해
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">All Things N</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">...</div>
</ul>
</nav>
</body>
체크박스 요소를 사용하는 로직은 체크박스를 선택하지 않으면 표시: 없음이 되고, 선택하면 일반 형제 선택기(~)의 CSS 속성을 표시: 블록으로 설정하여 변경합니다. 간단히 말해, 햄버거 및 탐색 메뉴를 확장된 상태와 숨겨진 상태로 전환하기 위해 체크박스를 사용하는 것입니다.
아래와 같이 CSS 미디어 쿼리를 사용하여 모바일 장치용 CSS 탐색 모음의 스타일을 지정합니다. 이 경우 모바일 메뉴에 CSS 그리드 및 JS를 사용할 수도 있습니다.
/* RESPONSIVE NAVBAR MENU STARTS */
/* CHECKBOX HACK */
input[type=checkbox] {
display: none;
}
/* HAMBURGER MENU */
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
데스크톱 브라우저에서 디자인이 표시되는 모습은 다음과 같습니다:
모바일 화면에서 표시되는 방식은 다음과 같습니다:
실험을 통해 이상적인 탐색 모음을 디자인하는 가장 좋은 방법
웹사이트 탐색이 잘 되어 있으면 이탈률과 전환율에 큰 영향을 미칩니다. 기본적으로 웹사이트의 첫 화면에는 명확한 컨텍스트, 계층적 탐색, 클릭 유도 문안이 있어야 합니다.
웹사이트 탐색 구조는 방문자가 세 번 이하의 클릭으로 사이트의 인기 페이지나 인기 있는 페이지에 도달할 수 있도록 도와야 합니다. 따라서 더 나은 사이트 탐색을 위해 계속 실험하고 디자인하세요!