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..
프론트엔드
이번에는 여러 사이트에서 사용하고 있는 드롭다운 네비게이션 디자인을 만들어보겠습니다. 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..
기본 제작 See the Pen Untitled by seongtae (@stae1102) on CodePen. 위처럼 기본적으로 3개의 도형이 움직이는 아티클을 만들고, 마우스를 올렸을 때 색상을 부여하는 방식의 디자인이다. 1. HTML Heading Text Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias qui aperiam ducimus omnis enim. Consequuntur esse quisquam laborum aspernatur, officiis ipsum fugit optio et hic suscipit ipsam veritatis vero consectetur. Read More HTML 구조는 아래와 같다. └ di..
See the Pen test1 by seongtae (@stae1102) on CodePen. 로딩 애니메이션 두 번째 입니다. 사각형이 각각 위치를 옮겨가며 색상을 바꿉니다. 여기서 사용하는 것은 position 속성과 background-color 속성입니다. 1. HTML 작성 HTML의 구조를 보면 └ div .loading ├ span └ span 이렇게 class가 "loading"인 div 태그 아래 자식으로 span 태그를 두 개 갖고 있습니다. div 태그는 두 개의 태그를 감싸고 포지션을 사용하기 위함입니다. 2. CSS 작성 2-1. 기본 구조 .loading { width: 100px; height: 100px; position: relative; } .loading span { ..
