반응형
poiter-events:none
-
<HTML/CSS> Transition 3 : Sub-Menu 만들기 - Display와 Opacity 이용컴퓨터 알아가기/HTML CSS 2022. 9. 17. 19:30
CSS 애니메이션 기초는 Rock's Easy Web을 기본으로 공부를 하고 있습니다. 다음과 같이 홈페이지를 보면 Sub-Menu가 위에서 아래로 내려오는 동작을 본 적이 있는데 역시 이러한 기능도 transition의 속성을 이용하여 만듭니다. 1. HTML 기본 구성 list태그를 이용하여 기본 구성을 작성합니다. 브라우저상 다음과 같이 기본 형태만 보이게 됩니다. 이제부터 CSS를 이용하여 SubMenu가 흘러내리도록 효과를 줄 수 있도록 하겠습니다. 2. CSS 기능구현 CSS 애니메이션 효과를 위해서는 단계별 접근이 필요합니다. 기본적으로 다음과 같은 기초단계에서 시작해 보겠습니다. 관련되서 브라우저는 다음과 같이 보일겁니다. main은 검은색(#666), main ul은 회색 (#333) 그..