메인 페이지 수정하기

2020/07/15 - [개인 프로젝트/JIDO] - 카카오 지도 API를 이용해 지도 띄우기

카카오 지도 API를 이용해 지도 띄우기

메인 페이지의 디자인이 이랬습니다.

지도가 핵심이지만 따로 노는 느낌이 들어서 디자인을 수정했습니다.

 

 

CSS로 이미지의 검은색을 흰색으로 바꾸기

그냥 지도 API만 지워버리면 밋밋하잖아요??

대신해서 그림을 넣어줄까 합니다.

가끔 블로그 포스팅할때나 학교에서 발표할 때 항상 사용하던 픽토그램을 가져옵니다.

https://www.flaticon.com/

Flaticon, the largest database of free vector icons

복잡한 절차없이 이미지를 찾을 수 있어서 flaticon을 애용합니다.

이런 이미지를 가져왔습니다.

검정색으로 이쁘게 라인이 따져있네요(?)

저는 저 라인을 흰색으로 바꿨으면 합니다.

그림판에서 수작업을 했더니 깔끔하지가 않았습니다..

그런데!! CSS에서 제가 원하는 게 된다면??!!

네 됩니다.

filter: invert(1);

를 추가해주세요.

filter는 css에서 이미지에 다양한 효과를 넣을 수 있는 옵션입니다.

invert는 색 반전을 시키죠.

100% = 1이라서 완전히 색을 뒤집겠다는 의미가 되죠.

검은색 <-> 흰색은 대비되는 색이므로 한 줄로 깔끔하게 끝나죠.

 

아래 버튼도 추가해주면.. 전보다는 깔끔해 보입니다.