1. 메뉴 소개
- 사용자가 웹 사이트 내에 있는 다양한
페이지를 이동할 수 있도록 지원한다. - 웹사이트에서 제공되는 정보를 쉽게 찾을 수 있도록 도와준다.
2. 1단 메뉴 제작
-
주요 기능
5개의 항목을 갖는 가로 메뉴
메뉴의 간격은 모두 동일
선택 메뉴는 볼드 처리
메뉴 활성화 시 배경색과 폰트 컬러 변경 -
스타일 정보
메뉴 - 전체 너비(min/max): 500px/700px
메뉴 - 높이: 36px
메뉴 - 폰트: 12px/#333, 외곽선: 1px/#ddd
메뉴(활성화 시) - 배경색: gray, 폰트: 12px/bold/#fff, 외곽선: 1px/#555 -
주요 태그 및 속성
HTML
div, ul, li, a
CSS
display, position, border, margin, background
table-layout, :hover
1) HTML 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="menu1.css">
<title>메뉴실습1</title>
</head>
<body>
<div class="wrap">
<ul class="menu">
<li class="menu_item"><a href="#" class="menu_link">메일</a></li>
<li class="menu_item active"><a href="#" class="menu_link">카페</a></li>
<li class="menu_item"><a href="#" class="menu_link">소프트웨어</a></li>
<li class="menu_item"><a href="#" class="menu_link">지식백과</a></li>
<li class="menu_item"><a href="#" class="menu_link">영화</a></li>
</ul>
</div>
</body>
</html>2) CSS 실습
@charset "UTF-8";
/* 기본 스타일 */
body {
font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
font-size: 14px;
line-height: 16px;
}
body, ul, ol, li, div, a {
margin:0;
padding:0;
}
ul, ol {
list-style:none;
}
a {
color: inherit;
text-decoration: none;
}
/* 1단 메뉴 */
.wrap {
max-width: 700px;
min-width: 500px;
margin: 5px;
}
.menu {
display: table;
width: 100%;
table-layout: fixed;
}
.menu_item {
display: table-cell;
}
.menu_link {
display: block;
height: 36px;
border: 1px solid #ddd;
font-size: 12px;
line-height: 36px;
color: #333;
text-align: center;
}
.menu_item + .menu_item .menu_link {
margin-left: -1px;
}
.menu_item:hover .menu_link {
color: green;
font-weight: bold;
}
.menu_item.active .menu_link {
position: relative;
border-color: #555;
font-weight: bold;
color: #fff;
background: gray;
}-
display: table속성을 사용하여 각 메뉴 셀을 테이블 그리드 UI로 배치할 수 있으며, 각 메뉴 너비를 균등하기 위해 table-layout: fixed를 반드시 입력해주어야 한다. -
각 셀이 가지고 있는 외곽선 겹침 문제는 margin-left: -1px을 적용하여 해결할 수 있다.
반대로 말하면 이걸 굳이 써줘야 외곽선이 두껍지 않게 보일 수 있다....😣
3. 2단 메뉴 제작
-
주요 기능
메인, 서브 메뉴를 갖는 2단 가로 메뉴
메인, 서브 메뉴는 가로 중앙 정렬 처리
메인 선택 메뉴는 볼드, 컬러 변경 처리
서브 선택 메뉴는 볼드, 컬러 변경, 하단 라인 추가 처리 -
스타일 정보
메인/서브 메뉴 - 높이: 50px
메인 메뉴 - 폰트: 20px/#333
메인 메뉴 (오버/활성화 시) - 폰트: 20px/bold/green
서브 메뉴 - 폰트: 17px/#333
서브 메뉴 (오버/활성화 시) - 폰트: 17px/bold/green, 하단 라인: 2px/green -
주요 태그 및 속성
HTML
div, ul, li, a, span
CSS
position, border, margin, padding, background
text-align, :after, :hover
1) HTML 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="menu2.css">
<title>메뉴실습2</title>
</head>
<body>
<div class="wrap">
<!-- 메인 메뉴 -->
<ul class="menu">
<!-- 메인 메뉴 활성화 클래스 active 추가 -->
<li class="menu_item active">
<a href="#" class="menu_link">웹툰</a>
<!-- 서브 메뉴 -->
<ul class="submenu">
<!-- 서브 메뉴 활성화 클래스 active 추가 -->
<li class="submenu_item active"><a href="#" class="submenu_link"><span>요일별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>장르별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>작가별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>연도별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>작품별</span></a></li>
</ul>
</li>
<li class="menu_item">
<a href="#" class="menu_link">블로그</a>
</li>
<li class="menu_item">
<a href="#" class="menu_link">지식백과</a>
<!-- 서브 메뉴 -->
<ul class="submenu">
<li class="submenu_item"><a href="#" class="submenu_link"><span>건강백과</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link active"><span>밀리터리백과</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>음식백과</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>동물백과</span></a></li>
</ul>
</li>
<li class="menu_item">
<a href="#" class="menu_link">카페</a>
</li>
</ul>
</div>
</body>
</html>2) CSS 실습
@charset "UTF-8";
/* 기본 스타일 */
body {
font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
font-size: 14px;
line-height: 16px;
}
body, ul, ol, li, div, a {
margin:0;
padding:0;
}
ul, ol {
list-style:none;
}
a {
color: inherit;
text-decoration: none;
}
/* 2단 메뉴 */
.menu {
width: 700px;
margin: 20px auto 0;
text-align: center;
}
.menu_item {
display: inline-block;
}
.menu_link {
display: block;
padding: 13px 20px;
font-size: 20px;
line-height: 24px;
font-weight: bold;
color: #444;
}
.menu_item:hover .menu_link,
.menu_item.active .menu_link {
color: green; /* 메인 메뉴 선택, 활성화 효과 */
}
.menu_item.active .submenu {
display: block; /* 메인 메뉴 활성화 시 서브 메뉴 노출 처리 */
}
.submenu {
display: none; /* 서브 메뉴는 기본 비노출 처리 */
position: absolute;
left: 0;
width: 100%;
min-width: 700px;
border-top: 1px solid #eee; /* 서브 메뉴 상단 라인 */
border-bottom: 1px solid #eee; /* 서브 메뉴 하단 라인 */
}
.submenu_item {
display: inline-block;
}
.submenu_link {
display: block;
padding: 15px 35px;
font-size: 17px;
line-height: 20px;
color: #333;
}
/* 서브 메뉴 선택, 활성화 시 효과 */
.submenu_item:hover .submenu_link,
.submenu_item.active .submenu_link {
font-weight: bold;
color: green;
}
.submenu_link span {
position: relative;
}
/* 서브 메뉴 선택, 활성화 시 하단 라인 노출 효과 */
.submenu_item:hover span:after,
.submenu_item.active span:after {
position: absolute;
content: '';
right: 0;
bottom: -15px;
left: 0;
border-bottom: 2px solid green;
}-
가로 중앙 정렬 : 고정 너비 값을 가지고 있는 block 요소의 경우
margin:0 auto;속성을 주고, inline-block 요소의 경우에는text-align: center;를 주어 중앙 정렬이 가능 -
메인 메뉴가 비활성화 일 경우에 서브 메뉴는 노출되지 않아야 하므로
ul.submenu는display:none;을 기본 속성을 가지고 있다.
만약, 메인 메뉴가 활성화된다면 li.menu_item에 active 클래스를 추가하여 ul.submenu가display:block;으로 변경될 수 있도록 처리가 가능하다. -
서브 메뉴 마우스 오버 또는 활성화 시 노출되는 하단 라인을 메뉴명 텍스트 너비와 동일한 라인을 생성하기 위해 메뉴명을 감싸는 span 태그를 추가하고
:after(가상선택자)를 사용하여 보더 속성을 선언할 경우 향후 메뉴명 텍스트가 늘어나더라도 동일한 너비의 보더를 가질 수 있다.
