번외. UI 작업할 때 참고하는 사이트

기운찬곰·2020년 10월 6일
0

CSS 기초

목록 보기
1/1
post-thumbnail

Icon

1) Material Design Icon : https://material.io/resources/icons/?style=baseline

  • 장점 : 표준 아이콘은 쓰기 좋다. 쓰기 간편함.
  • 단점 : 아이콘 개수가 그렇게 많지는 않다. 없는게 있을 수 있다.

2) Font Awesome : https://fontawesome.com/icons?d=gallery&m=free

  • 장점 : 여러 아이콘이 존재. 다운 받지 않고도 html i 태그만으로도 쓸 수 있음
  • 단점 : 일부 유료

3) icomoon : https://icomoon.io/

  • 장점 : 여러 아이콘이 존재. icon libaray가 많이 존재
  • 단점 : -

4) Remix icon : https://remixicon.com/

  • 장점 : 모든 아이콘은 개인 및 상업용 모두 무료입니다.
  • 단점 : 별로 안써봐서 모르겠음

5) React icons : https://react-icons.github.io/

  • 장점 : 리액트를 쓰는 사람이라면 간단히 설치하고 import만으로 아이콘 사용가능
  • 단점 : 리액트 써야함. 앵귤러나 다른것도 설치하면 가능할것도 같음.

6) flaticon : https://www.flaticon.com/

  • 장점 : 커스텀 아이콘이 꽤나 많음
  • 단점 : 일부 유료. 구글 로그인 나만 안되는건가?

Color

1) https://htmlcolorcodes.com/color-chart/

  • 장점 : 간단한 색상을 찾는거라면 편리하게 찾아서 쓸 수 있음
  • 단점 : 그렇게 많은 색상을 찾을 수는 없음

2) https://yeun.github.io/open-color/

  • 장점 : 첫번째와 비슷함. 근데 뭔가 깔끔해서 더 보기 좋음
  • 단점 : 역시 많은 색상을 찾을 수는 없음

3) https://simpleicons.org/

  • 장점 : 특정 기업의 대표적인 색상값을 알 수 있음. 정말 다양한 색상을 찾을 수 있음
  • 단점 : 글쎄? 방금 찾은거라서 앞으로는 여기를 많이 이용할듯

Image

1) unsplash : https://unsplash.com/

  • 장점 : 무료 이미지를 찾는거라면 대표적인 곳. 이쁜 사진이 많음
  • 단점 : 원하는 이미지는 찾기 어려울 수 있음

2) https://pixabay.com/

  • 장점 : 역시 무료 이미지가 많이 보임
  • 단점 : 글쎄? 쓸만한데?

Video

1) cover : https://coverr.co/

  • 장점 : 무료 영상을 쓸 수 있음
  • 단점 : 글쎄.. 써본적이 없어서

Font

1) 구글 폰트 : https://fonts.google.com/

  • 장점 : 폰트하면 역시 구글 폰트지. link 태그 추가한다음 css font-family 적용하면 끝.
  • 단점 : 글쎄?

Layout

1) https://wpastra.com/ready-websites/?page-builder=elementor

  • 장점 : 능력만 있으면 괜찮은 웹 사이트를 만들려고 할때 참고하기 좋음.
  • 단점 : 회원가입. 돈 주고 사야 함.

2) https://www.pinterest.co.kr/

  • 장점 : 레이아웃 검색하기 좋음. 남들이 만든 디자인 구경할 수 있음. 자료 많음
  • 단점 : 직접 개발해야 함

기타

1) Pure CSS Loaders : https://loading.io/css/

  • 장점 : CSS로 loader를 만들 수 있음
  • 단점 : 종류는 그렇게 많지 않음. 하지만 이정도면 감지덕지하지

Hits

profile
배움을 좋아합니다. 새로운 것을 좋아합니다.

0개의 댓글