[CSS] 31. CSS Dropdowns 드롭 다운

Posted by 낭만사업가 정대표 블로그 on 2022-09-19 05:47:32

기본 드롭다운

사용자가 요소 위로 마우스를 이동할 때 표시되는 드롭다운 상자를 만듭니다.

예시

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
직접 사용해 보기 »

예시 설명

HTML) 모든 요소를 사용하여 드롭다운 콘텐츠를 엽니다(예: <span> 또는 <button> 요소).

컨테이너 요소(예: <div>)를 사용하여 드롭다운 콘텐츠를 만들고 그 안에 원하는 것을 추가합니다.

CSS를 사용하여 드롭다운 콘텐츠를 올바르게 배치하려면 요소 주위에 <div> 요소를 래핑합니다.

CSS) .dropdown  클래스는 드롭  position:relative 다운 콘텐츠를 드롭다운 버튼 바로 아래에 배치할 때 필요한 를 사용합니다(  position:absolute ).

클래스 는  .dropdown-content 실제 드롭다운 콘텐츠를 보유합니다. 기본적으로 숨겨져 있으며 마우스를 가져가면 표시됩니다(아래 참조). 160px  min-width 로 설정되어 있습니다. 자유롭게 변경하세요. 팁: 드롭다운 콘텐츠의 너비를 드롭다운 버튼만큼 넓히려면  width 100% 로 설정  overflow:auto 하고 작은 화면에서 스크롤을 활성화합니다.

테두리를 사용하는 대신 CSS  box-shadow 속성을 사용하여 드롭다운 메뉴가 "카드"처럼 보이도록 했습니다.

:hover 선택기는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다 .

 

드롭 다운 메뉴

사용자가 목록에서 옵션을 선택할 수 있는 드롭다운 메뉴를 만듭니다.

이 예제는 드롭다운 상자 안에 링크를 추가하고 스타일이 지정된 드롭다운 버튼에 맞게 스타일을 지정한다는 점을 제외하면 이전 예제와 유사합니다.

예시

<style>
/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
직접 사용해 보기 »

오른쪽 정렬된 드롭다운 콘텐츠

 

드롭다운 메뉴가 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 이동하도록 하려면 right: 0;

예시

.dropdown-content {
  right: 0;
}
직접 사용해 보기 »

더 많은 예

드롭다운 이미지

드롭다운 상자 안에 이미지 및 기타 콘텐츠를 추가하는 방법입니다.

이미지 위로 마우스를 가져갑니다.


직접 사용해 보기 »
 

Total 220
번호 제목 글쓴이 조회 날짜
122 07-15
347 07-15
218 100 07-20
217 80 07-20
216 110 07-20
215 132 07-20
214 78 07-20
213 91 07-20
212 329 06-20
211 103 07-20
210 1,040 06-21
209 216 06-20
208 310 02-25
207 886 02-27
206 108 07-08
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!