web design rules : colour, image,icon

Juyeon Lee·2022년 1월 12일
0

CSS

목록 보기
20/32

컬러 선택할 때 사용하는 사이트
: open color, tailwindcss, flat ui colors2

coolors의 contrast-checker을 이용해서
at least 4.5:1 for notmal text 3:1 for large text

이미지 사용할때 사용하는 사이트
unsplash, pexels, drawkit, undraw

scale factor: actula pixels the screen contains
on high-res screens, scale factor is 2x or even 3x
make image dimensions 2x as big as their displayed size

사진이용할때 원래 생각하는 이미지 크기보다
항상 두배로 해서 올려야 한다고 한다.
high-res screens에서 깨져서 보이기 때문이다.

이미지 파일 크기 줄일때 쓰는 사이트
squoosh

아이콘 사용할때 쓰는 사이트
phosphor icons, ionicons, icons8

don't use bitmap image formates(.jpg and.png)
you should use SVG images
아이콘은 무조건 SVG파일만 쓰기!!!!

아이콘은 사이트에서 svg 링크 복사해서
넣고 싶은곳에 붙여넣기 한뒤
class이름을 바꿔주고 그 이름에 맞춰서
css에서 이런식으로 설정해주면 된다.

.chair-icon {
  stroke: #087f5b;
  width: 24px;
  height: 24px;
}

stroke가 색깔을 지정할때 쓴다는게 신기했다ㅎㅎ

0개의 댓글