$$config title: New Title keywords: - IT - ... $$ # 카카오 뱅크 탑바 구현 - [x ][폰트, 테일윈드 불러오기](https://codepen.io/notae87/pen/JjBProL) - [ ][탑바, 로고]() # 카카오 R : 255 G: 205 b:0 - # FFCDOO # 사이트 https://nerdcave.com/tailwind-cheat-sheet https://fontawesome.com/start https://drive.google.com/uc?export=view&id=/1J2gGSKLeILZ3WyD1a6NPICPQYHXs0Oye # html

서류제출하기

# css @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } html > body{ font-family: 'GmarketSansMedium'; } .con{ width: 1080px; } /* 커스텀 */ :root { --site-width: 1080px; } /* 임시 */ body { background-color: #afafaf; } /* 탑바 메뉴 구현 시작 */ .menu-1 > ul > li > a { display:flex; height: 100%; align-items: center; padding: 0 10px; } .menu-1 > ul > li:hover > a { text-decoration: underline; } .img-globe:hover { color: #afafaf; } .menu-1 > ul > li > a { position: relative; } .menu-1 > ul > li > a::after { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background-color: black; transition: width .3s; } .menu-1 > ul > li:hover > a::after { width: 100%; } /* 2차 메뉴 구현 */ .menu-1 > ul > li > div { position: absolute; display: none; width: 100%; left:0; height: 300px; transform: translateY(1px); } .menu-1 > ul > li:hover > div { display: block; } /* 2차 메뉴 구현 끝 */ /* 탑바 메뉴 구현 끝 */