-
말풍선 툴팁 & 드롭다운 메뉴 만들기프론트엔드/컴포넌트 2023. 7. 29. 10:14728x90
말풍선 드롭다운 메뉴 <!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