1. HTML 구조 만들기
가로 메뉴를 만들려면 보통 ul과 li 태그를 사용합니다.
각 메뉴 항목은 li > a 형태로 구성하며, 외부 CSS 파일에 스타일을 적용할 준비를 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Menu Example</title>
<!-- 외부 CSS 연결 -->
<link rel="stylesheet" href="./css/mainmenu.css">
</head>
<body>
<ul id="main-menu">
<li><a href="https://www.naver.com"
onclick="alert('네이버로 이동합니다.');">네이버</a></li>
<li><a href="https://www.daum.net">다음</a></li>
<li><a href="https://www.google.com">구글</a></li>
<li><a href="https://www.youtube.com">유튜브</a></li>
</ul>
</body>
</html>- id="main-menu": 스타일 적용의 기준점
- 각 li 안에 링크(a) 요소를 배치
2. 리스트 스타일 제거 및 기본 설정
브라우저 기본 스타일에는 리스트 점(bullet)과 들여쓰기가 포함되어 있습니다.
이를 지우고, 메뉴 전체 너비와 텍스트 정렬을 설정합니다.
/* mainmenu.css 파일 */
#main-menu {
list-style: none; /* 불릿 제거 */
margin: 0;
padding: 0;
text-align: center; /* 메뉴 항목을 가로 중앙 정렬 */
}
3. 메뉴 항목 가로로 배치하기
li 요소는 기본적으로 블록 레벨이지만, 폭 지정이 필요합니다.
inline-block을 사용하면 콘텐츠 기반 너비가 아닌, 고정된 폭을 설정할 수도 있습니다.
#main-menu > li {
display: inline-block; /* 가로로 배치되면서 폭 조절 가능 */
width: 120px; /* 각 메뉴 항목의 동일 폭 */
margin-top: 10px;
background-color: black;
}
- inline-block vs block vs inline
- block: 한 줄 전체 차지, 크기 조절 가능
- inline: 콘텐츠 크기만큼 차지, 크기 조절 불가
- inline-block: inline처럼 흐르면서, block처럼 크기 지정 가능
4. 링크(a) 스타일링 및 호버 효과
가로 메뉴의 클릭 영역을 넓히려면 a를 블록 레벨로 전환하고 전체 영역에 스타일을 적용합니다.
호버 상태는 버튼 위에 마우스를 올린 상태(마우스 오버)를 뜻합니다.
호버 상태에서는 배경색, 그림자, 테두리 등을 추가해 시각 피드백을 줍니다.
#main-menu > li > a {
display: block; /* 전체 li 영역을 클릭 영역으로 사용 */
padding: 10px 0; /* 세로 여백으로 클릭 폭 확보 */
text-decoration: none; /* 밑줄 제거 */
color: yellow; /* 기본 텍스트 색 */
border: 1px solid black;
}
#main-menu > li > a:hover {
background-color: gray; /* 마우스 오버 시 배경색 */
color: white; /* 글자색 변경 */
box-shadow: 1px 1px 2px black;
border: 1px solid chartreuse;
}
5. 완성된 메뉴 미리보기
위의 HTML과 CSS를 적용하면 다음과 같은 가로 메뉴가 완성됩니다.
- 검정 배경에 노란 텍스트
- 마우스 오버 시 회색 배경, 흰색 텍스트, 연두색 테두리 효과
- 각 메뉴 항목이 동일한 너비로 깔끔하게 배열
'HTML, CSS' 카테고리의 다른 글
| CSS Selector와 예제 (2) | 2025.08.08 |
|---|---|
| CSS 적용 방식과 예제 (7) | 2025.08.07 |
| HTML Table 태그 사용법 정리 (4) | 2025.08.07 |
| HTML 리스트(List)와 폼(Form) 태그 총정리 (5) | 2025.08.06 |
| HTML의 주요 특징과 <head>, <body>의 역할 (6) | 2025.08.06 |
