사이트만들기 마무리 아이콘 애니메이션적용 (10-End)

#사이트만들기 #stroke-dasharray #stroke-dashoffset

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

#

디자인소개

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

​

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

​

학습목표

• 디자인을 마무리한다.
• svg stroke-dasharray, stroke-dashoffset을 이해한다.

사용되는언어

CSS

• stroke-dasharray, stroke-dashoffset을 활용하여 역동적인 웹디자인을 구사한다.
• .on이 되었을 경우에 모션이 일어나도록 세팅한다.

CSS

stroke-dasharray값 찾기

​

stroke-dasharray값을 구하기 이전에 가장 먼저해야할 것은 선의 길이가 가장큰 아이콘을 찾는것이다. 네가지 아이콘 중 새우가 가장 길어 보이니 새우를 선택하자

​

#

적당한 SVG stroke-dasharray값을 구하는 방법

​

• 위링크에서 stroke-dasharray값을 구하는 방법을 공부할 수 있다.
• 적당값을 찾았으니 <path>태그에 stroke-dasharray값 1800을 부여하자.
• stroke-dashoffset값도 1800을 주면된다.

​

모든 배경에 아이콘이 사라지면 성공이다. 아이콘 선이 조금 보일 경우 그 아이콘이 가장 긴 아이콘이라 기준을 바꾸어 가장 긴 아이콘이 사라지는 dasharray값을 찾으면된다.

​

.on일때 인터렉션 구현

​

#

#

#

#

.on이 패널에 붙었을 경우 아이콘이 그려진 후 배경색이 채워지는 것을 볼 수 있다..

복습

#

짚어갈 포인트

• stroke-dasharray, stroke-dashoffset; 양수일때/ 음수일때
• li .on일때 인터랙션 구현하기

​

​

​

후기

이제 모든 강의가 완성되었다. 하나씩 천천히 따라하다보니 배우는 것도 많고 몰랐던 부분도 정리가 잘되었다. 다음강의는 마스크를 활용한 랜딩페이지 제작 강의로 찾아오겠다.