See the Pen Untitled by seongtae (@stae1102) on CodePen. 각 품목에 hover 했을 때, 이미지의 상세설명이 나오는 디자인을 구현해봅니다. display: none으로 구현하는 것은 transition의 영향을 받지 않기에 opacity를 조정하여 구현하는 것이 보기 좋습니다. 1. HTML MacBook Air M2 13in Don’t take it lightly. Price : $1199 View details MacBook Air M2 13in Don’t take it lightly. Price : $1199 View details MacBook Air M2 13in Don’t take it lightly. Price : $1199 View details..
hover
이번에는 여러 사이트에서 사용하고 있는 드롭다운 네비게이션 디자인을 만들어보겠습니다. 1. HTML 작성 Real Estate Type All One Room 1.5 Rooms Two Room Three Room Officetel Apartment 기본적인 계층 구조는 다음과 같습니다. └ div .dropdown ├ button .dropdown-btn └ div dropdown-submenu ├ a ├ a ├ a ├ a ├ a ├ a └ a 전체를 감싸는 div를 만들어주고, 드롭다운에 사용할 버튼, 그리고 그 버튼에 의해 표시될 내용을 작성해줍니다. 2. CSS 작성 2-1. 전체 공통 디자인 body { font-family: "Raleway", sans-serif; line-height: 1.5..
