HTML사이트, CSS 호버를 활용하여 역동적인 버튼 구현하기 (4)

#CSS호버 #HTML사이트

웹사이트 디자인 소개 및 학습목표

#

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리한 글입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

처음부터 끝까지 하나 하나 손코딩 하는 모습을 보여드릴 것이며. 이전글을 보고오시면 더욱 이해가 빠릅니다.

​

학습목표

• CSS 호버를 활용하여 역동적인 버튼을 구현해 볼 것이다.

사용하는언어

CSS

• 이전글에 구현한 화살표 버튼에 마우스를 올리면 화살표가 사라지면서 글자가 나타나도록 구현할 것이다.
• css 호버(hover), transfrom:rotate;의 이해가 필요하다.

CSS

&::before, &::after 호버(hover) 구현하기

#

#

#

&::before, &::after{ transition: 0.5s 0.2s; }

​

가상선택자에 transition: 0.5s 0.2s(딜레이);

• transform: translateY는 현재 회전된 각도에서 올라간다는 것을 기억하자

span 호버(hover) 구현하기

#

​

​

• <span>태그에도 transition을 걸어주고 위로 올려준다.

​

p 호버(hover) 구현하기

#

​

• p태그에도 transition을 걸어주고 opacity:0 ; top:50%; 를 걸어준다.

복습

​

#

짚어갈 포인트

• css 호버
• css transform :rotate와 translateY에 대한 이해

​

​

​