2. HTML&CSS의 활용 (5) 메뉴

Yujin Lee·2021년 4월 17일

CSS html 웹UI

Web_UI

목록 보기

23/28

1. 메뉴 소개

사용자가 웹 사이트 내에 있는 다양한 페이지를 이동할 수 있도록 지원한다.
웹사이트에서 제공되는 정보를 쉽게 찾을 수 있도록 도와준다.

2. 1단 메뉴 제작

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단 메뉴

주요 기능
메인, 서브 메뉴를 갖는 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(가상선택자)를 사용하여 보더 속성을 선언할 경우 향후 메뉴명 텍스트가 늘어나더라도 동일한 너비의 보더를 가질 수 있다.

Yujin Lee

I can be your Genie🧞‍♀️ How ‘bout Aladdin? 🧞‍♂️

이전 포스트

2. HTML&CSS의 활용 (4) 레이아웃

다음 포스트

2. HTML&CSS의 활용 (5) 메뉴

Web_UI

1. 메뉴 소개

2. 1단 메뉴 제작

1) HTML 실습

2) CSS 실습

3. 2단 메뉴 제작

1) HTML 실습

2) CSS 실습

2. HTML&CSS의 활용 (4) 레이아웃

2. HTML&CSS의 활용 (6) 탭

0개의 댓글

관련 채용 정보