17. image-map.net, float, transition-duration, delay, colorzilla.com

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

---

- https://image-map.net

Free Online Image Map Generator

- 위 사이트에서 보다 쉽게 이미지맵을 만들 수 있다.

 

▲예제 01. float right, 우측으로 일렬 세우기

 - float: left, right로 좌 우측으로 일렬로 세울 수 있다.

 

 

▲예제 02. float, 이미지 주위에 글자 배치하기

 - 이미지에 float 속성을 줌으로써 주위에 글자를 배치할 수 있다.

 

 

▲예제 03. transition-duration과 hover를 활용한 예제

▲문제. hover, active, transition-duration, transition-delay 활용

 

 

▲예제 04. ColorZilla를 이용해 그라데이션 넣기

 - https://www.colorzilla.com 

ColorZilla - Eyedropper, Color Picker, Gradient Generator and more

 - cololrzilla를 이용해 손쉽게 그러데이션 효과를 넣을 수 있다.

 

 

▲문제. 화면 보고 따라 만들기