WebApp Cookbook

기능코드 조각 모음집

WebApp Cookbook 기능코드 조각 모음집
본 토픽은 현재 준비중입니다. 함께 배우는 중: 에 참여하시면 완성 되었을 때 알려드립니다.

[HTML & CSS] 드롭 다운 메뉴

필요한 사전 지식

  • 작업물을 웹페이지로 렌더링 하는 건 누구?
  • HTML에서 태그란?
  • HTML에서 부모요소와 자식요소란?
  • 원하는 HTML 요소를 꾸미기 위해 필요한 것들은?

기능

메인메뉴에 마우스를 올리면, 해당 메인메뉴의 서브메뉴가 나타남

기능코드 조각

아래 상자에서,
왼쪽의 HTML & CSS 코드를 보기 전에 오른쪽의 결과물을 구경 해볼까요?

어떻게 작동하나요?
메인메뉴인 Menu01에 마우스를 올리면, Menu01의 서브메뉴인 subMenu01이 나타납니다.
메인메뉴인 Menu02에 마우스를 올리면, Menu02의 서브메뉴인 subMenu02가 나타납니다.

Menu01과 Menu02는언제나 보이는 메인메뉴입니다.
subMenu01과 subMenu02는 평소에는 안 보이다가 자신의 상위 메뉴에 마우스가 올려지면 보이는 서브메뉴입니다.

설명

하고자 하는 것은?

HTML을 통해: "메인메뉴들을 하나의 보따리에 담을 거야. 그리고 그 각각의 메인메뉴 안에는 또다른 보따리(메뉴)가 있는데, 여기에는 서브메뉴들을 담을 거야."라는 의도를 웹브라우저에게 전해 줍시다.

CSS를 통해: "평소에는 서브메뉴들이 담긴 보따리를 안 보이게 해줘. 그러다가 어떤 메인메뉴에 마우스가 올려지면 그 메인메뉴의 서브메뉴들을 보여줘"라는 의도를 웹브라우저에게 전해 줍시다.

코드와 함께

아래의 HTML 코드를 한 번 볼까요? 설명 보조를 위해서 원본코드에는 없는 class 속성을 몇 개 추가 했습니다.

<ul class="Menu">
  <li>Menu01<ul class="subMenu">
    <li>subMenu01</li>
  </ul></li>
  <li>Menu02<ul class="subMenu">
    <li>subMenu02</li>
  </ul></li>
</ul>

메인메뉴의 부모 요소는, 가장 바깥쪽 ul 태그(class="Menu")입니다.
서브메뉴의 부모요소는, 메인메뉴의 자식요소인 ul 태그(class="subMenu")입니다.

대충 어떻게 생겨먹은 구조인지 감 잡으셨나요? 그럼...

이번엔 아래의 CSS 코드를 한 번 봅시다.

ul>li> ul{
  display: none;
}
ul>li:hover> ul{
  display: block;
}

평소에는 모든 서브메뉴(ul>li> ul)를 숨기고(display: none),
숨겨진 서브메뉴의 부모요소에 마우스를 올리면(ul>li:hover> ul) 해당 서브메뉴가 보입니다(display: block).

  • 알아요 (0명)

댓글

댓글 본문
작성자
비밀번호
graphittie 자세히 보기