반응형 헤더는 화면 크기에 따라 레이아웃이 자동으로 조정되는 웹 페이지 상단 영역을 말합니다. CSS의 미디어 쿼리(@media)와 float 속성을 함께 사용하면, 데스크톱에서는 가로로 배치되던 내비게이션 메뉴가 모바일처럼 좁은 화면에서는 세로로 정렬되도록 손쉽게 구현할 수 있습니다.
아래는 CSS만으로 반응형 헤더를 만드는 전체 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
nav {
overflow: hidden;
background-color: #330b7c;
padding: 10px;
}
.links {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
float: left;
color:white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
nav .logo {
font-size: 25px;
font-weight: bold;
}
nav .links:hover {
background-color: rgb(214, 238, 77);
color: rgb(42, 10, 94);
}
nav .selected {
background-color: dodgerblue;
color: white;
}
.rightSection {
float: right;
}
@media screen and (max-width: 870px) {
nav .links {
float: none;
display: block;
text-align: left;
}
.rightSection {
float: none;
}
}
</style>
</head>
<body>
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="h">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</nav>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 반응형 헤더가 화면에 표시됩니다.
브라우저 창의 너비를 870px 이하로 줄이면 미디어 쿼리가 작동하여, 내비게이션 메뉴가 아래와 같이 세로 정렬 형태로 자동 전환됩니다.
코드 핵심 포인트
- box-sizing: border-box — 패딩과 테두리를 포함해 요소 크기를 계산하므로 레이아웃이 어긋나지 않습니다.
- float: left / right — 로고는 왼쪽에, 메뉴 그룹(.rightSection)은 오른쪽에 배치하여 데스크톱용 가로 헤더를 구성합니다.
- @media screen and (max-width: 870px) — 화면 너비가 870px보다 작아지면 float를 해제하고 display: block으로 변경해 메뉴가 세로로 쌓이도록 합니다.
- :hover와 .selected 스타일 — 마우스를 올렸을 때와 현재 선택된 메뉴에 시각적 강조 효과를 주어 사용성을 높입니다.
이처럼 미디어 쿼리의 분기점(브레이크포인트)만 적절히 설정하면, 별도의 JavaScript 없이도 순수 CSS만으로 다양한 기기에 대응하는 반응형 헤더를 완성할 수 있습니다.