syleemomo의 IT 블로그

프론트엔드/컴포넌트

말풍선 툴팁 & 드롭다운 메뉴 만들기

syleemomo 2023. 7. 29. 10:14
728x90

말풍선 드롭다운 메뉴

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <a href="#"><span class="material-icons">format_color_text</span></a>
    <div class="color-box">
      <span style="background-color: red;"></span>
      <span style="background-color: blue;"></span>
      <span style="background-color: green;"></span>
      <span style="background-color: orange;"></span>
      <span style="background-color: purple;"></span>
      <span style="background-color: brown;"></span>
      <span style="background-color: aquamarine;"></span>
      <span style="background-color: silver;"></span>
      <span style="background-color: red;"></span>
      <span style="background-color: blue;"></span>
      <span style="background-color: green;"></span>
      <span style="background-color: orange;"></span>
      <span style="background-color: purple;"></span>
      <span style="background-color: brown;"></span>
      <span style="background-color: aquamarine;"></span>
      <span style="background-color: silver;"></span>
    </div>
  </div>
  <div class="container">
    <a href="#"><span class="material-icons">format_color_text</span></a>
    <div class="color-box">
      <span style="background-color: red;"></span>
      <span style="background-color: blue;"></span>
      <span style="background-color: green;"></span>
      <span style="background-color: orange;"></span>
      <span style="background-color: purple;"></span>
      <span style="background-color: brown;"></span>
      <span style="background-color: aquamarine;"></span>
      <span style="background-color: silver;"></span>
      <span style="background-color: red;"></span>
      <span style="background-color: blue;"></span>
      <span style="background-color: green;"></span>
      <span style="background-color: orange;"></span>
      <span style="background-color: purple;"></span>
      <span style="background-color: brown;"></span>
      <span style="background-color: aquamarine;"></span>
      <span style="background-color: silver;"></span>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>
body{
  text-align: center;
}
.container{
  max-width: 2rem;
  display: inline-flex;
  flex-flow: column;
  align-items: center;
  position: relative;
}
.color-box{
  width: 10rem;
  background-color: #333;
  position: absolute;
  display: none;
  bottom: -11rem;
}
.color-box::before{
  content: '';
  width: 1.4rem;
  height: 1.4rem;
  background-color: #333;
  position: absolute;
  left: 50%; top: -0.6rem;
  z-index: -1;
  transform: translateX(-50%) rotateZ(45deg);
}
.color-box span{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin: .2rem;
  cursor: pointer;
  flex: 0 0 auto;
}
a:hover + .color-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

부모요소에서 자식요소의 위치를 잡을때 부모요소에 relative 주고 자식요소에 absolute 를 주었다. 하지만 부모요소가 absolute 이고 자식요소가 absolute 라도 부모요소를 기준으로 위치를 잡을수 있다. 

728x90
저작자표시 비영리 변경금지

'프론트엔드 > 컴포넌트' 카테고리의 다른 글

돋보기 효과  (0) 2024.02.14
입력창에서 숫자만 입력 가능하게 하기  (36) 2023.08.24
부드러운 가로 스크롤링 (3) - ease 함수 사용  (0) 2023.07.06
로딩 애니메이션  (0) 2023.07.05
부드러운 가로 스크롤링 (2)  (0) 2023.07.05

'프론트엔드/컴포넌트'의 다른글

  • 현재글말풍선 툴팁 & 드롭다운 메뉴 만들기

관련글

티스토리툴바