[내일의집] asset 준비

01 figma에서 이미지 export

1. rester 이미지 (bitmap, pixel 기반)
   1. jpg == jpeg
      • 용량이 낮고 이미지 손실이 큼
   2. png
      • 용량이 크고 이미지 퀄리티 높음
      • 투명도를 지원
   3. webp (from 구글)
      • 둘의 장단점 보완
      • 아직 지원되지 않는 브라우저 있음
2. vecter 이미지
   1. svg (scalable vector graphics)
      • 크기와 상관없이 같은 용량 => 사이즈 클 때는 점 찍는 bitmap에 비해 용량 효율 좋음
3. 형식 선택 어떻게?
   1. 간단한 아이콘 / 깨지면 안 되는 로고 등은 svg (ie 6 7 8에 대응해야 한다면 png)
   2. 그 외에는 효율 좋은 쪽으로
4. export 실행
   1. 이미지 일괄 rename : ctrl+R
   2. 파일 이름에 / 가 들어있으면 디렉토리로 인식하고 해당 폴더를 만들어 저장함

02 icon fonts 만들기

1. 사용하는 이유
   
   • svg 파일은 html에서 img나 background-img로 넣지 않고 그냥 <svg> element로 넣을 수 있음.  -> attribute로 컨트롤 할 수 있는 게 많아짐
     • e.g.) fill="currentColor" 하면 부모의 컬러값을 상속받음. css에서 {transition: color 30ms ease-in-out} 등 가능.
2. icon font화
   • icomoon 등에서 font화, iconfont를 쓰기 위한 tag 이름 설정
   • scss 파일 만들에 @font-face 데이터 복붙하고, url 경로 수정하기

03 favicon 설정

1. 만들기
   1. 이미지를 sgv로 export하고 https://realfavicongenerator.net/ 에서 변환
   2. favicon 패키지 다운받아 root에 압축풀고 html에 <link> 넣기

04 CSS 리셋

 

방법 1 : Reset.css로 모든 태그를 초기화시키기 https://meyerweb.com/eric/tools/css/reset/

방법 2 : Normalize.css로 모든 브라우저에서 동일하게 보이도록 하향평준화하기 https://necolas.github.io/normalize.css/

방법 3: 여러 방법을 조합해서 쓰기. e.g. Normalize.css + 커스텀 리셋 css

 

+@ scss문법

가상선택자 입력 : 따로 다시 적을 필요 없이 { } 내부에 &:focus { }  넣고 입력하면 됨.

개발자도구에서 scss 위치 확인하기 : script에 옵션 추가