(김유선) 풀스텍 양성과정 팀프로젝트 프론트엔드 05.22 전체 디자인 변경 - 프론트엔드 좋은 사이트

이번에 디자인을 살짝 변경하려고 했는데

팀원이 전체적인 디자인 분위기가 웹사이트 같지 않다고 하셔서 전체 디자인 변경을 진행했다.

 

디자인을 변경하는 부분은 어렵지 않으니 적지 않고

 

이번에 퍼블리싱을 하면서 알게 된 좋은 몇 가지 사이트를 작성해둔다.

 

gif 편집 사이트

https://ezgif.com/effects?err=expired

Add effects to animated gifs

gif를 hue(색조), 배경 지우기 등의 다양한 것들을 한번에 처리할 수 있는 사이트 (동영상을 넣으면 gif로 바꿔주는 기능도 있음)

 

이미지 색상 변경 사이트

https://tech-lagoon.com/imagechef/ko/image-modulate.html

HSL(색조/채도/명도) | 무료 쉬운 온라인 도구 - DataChef | TechLagoon

이미지 파일을 업로드해서 색조, 채도, 명도를 변경할 수 있는 사이트 (gif 색조 바꾸기 전에 여기서 이미지로 먼저 테스트 해도 좋음)

 

gif 배경 지우는 사이트

https://www.unscreen.com/upload

Select Video or GIF – Unscreen

gif 배경을 투명하게 해줄 수 있는데 위의 사이트로 가면 다 해결할 수 있어서 굳이?긴 함

 

 

그리고 문법적인 부분

 

clearInterval

https://velog.io/@heejeen-choi/setInterval-clearInterval-%EC%BD%9C%EB%B0%B1

setInterval(), clearInterval() 그리고 콜백()

clearinterval을 어떻게 했는지 기억 안 나서 인터벌 이름 짓는 법 다시 봄

 

숫자가 올라가면서 카운팅되는 애니메이션

https://webd.tistory.com/157

[Vanilla JS] 숫자 상승 애니메이션 / 카운트 애니메이션

보통 사이트에서 와라락 하고 올라가는 숫자를 적용하는 법 참고하려고 찾아봄

 

그림자 적용법

https://hianna.tistory.com/753

[HTML/CSS] div 박스에 그림자 만들기(box-shadow)

그림자가 많이 퍼져있는데 그림자 오랜만에 써서 한번 찾아봄

 

 

 

 

그래서 내가 디자인한 것은 아래와 같다.

https://www.wishket.com/?referer_type=2010212012&utm_source=google&utm_medium=cpc&utm_campaign=SKAG_others&utm_content=%EA%B0%9C%EB%B0%9C%ED%9A%8C%EC%82%AC&utm_term=&gad_source=1&gclid=Cj0KCQjw6auyBhDzARIsALIo6v8PGqDsv2CQNJbH6IVMW6SqbFQFKmLl7_mn3AbE7xmNTIP0XgOWyJkaAu-hEALw_wcB

위시켓-대한민국 대표 IT프로젝트 플랫폼

얘랑

https://www.avansoft.co.kr/main/sub.asp?avan=1014010000

아반소프트™ (주)앱피플

얘를 조금 벤치마킹해서 만들었다.

 

 

그렇게 완성된 메인페이지

 

그렇게 완성된 업소 상세 페이지