프로젝트 기초 기반 작업 과정

1. github에서 new Repository 만들기

   → README.md(X) / .gitignore(O)

2. package.json 생성

   → npm init -y

3. .prettierrc 파일 생성 및 구성

   https://gist.github.com/hxxtae/3f9a747f784e12827428d3e7cc6f6259

4. .sass-lint.yml 파일 생성 및 구성

   → https://gist.github.com/hxxtae/bce53de952619001e1c0b1a8be0455b4

5. html, scss 파일 생성

   → index.html

   → style / main.scss

   → style / base

6. html head 안에 <link> 설정

   → css 링크 추가

   → fonts.googleapi 링크 추가

7. image, icon생성

   → assets 폴더 안에 Image 폴더 안에 icon 파일 생성 및 구성

   → Figma 에서 프로젝트 사용 이미지들을 image 폴더 안에 jpg로 Export

   → Figma 에서 프로젝트 사용 아이콘들을 image / icon 폴더 안에 svg로 Export

8. icon-fonts 생성

   → assets 폴더 안에 fonts 파일 생성 및 구성

   → iconmoon 사이트( https://icomoon.io/app/#/select ) 에서 icon-fonts 만들기

   → iconmoon 에서 생성된 압축 파일을 풀고 복사, assets 폴더 안 fonts 파일 생성 후 붙여 넣기

   → style / base 폴더 안에 _fonts.scss 생성 후 iconmoon에서 만들어진 css 파일 붙여 넣기

   → main.scss 에 @import 하기

9. favicon 생성

   → Figma 에서 favicon 으로 지정 할 SVG 파일 svg로 Export

   → https://realfavicongenerator.net/ 에서 해당 svg 파일 불러오기 후 favicon 생성 진행

   → 다운받은 압축 파일 해제 후 index.html가 위치하는 최상위 경로 안에 파일 전부 넣기

   → 해당 <link>는 index.html 에 추가

10. css Reset

    → https://necolas.github.io/normalize.css/ 다운로드(코드 복사)

    → style / base 폴더 안에 _nomarlize.scss 생성 후 코드 붙여 넣기

    → https://gist.github.com/hxxtae/8be05a965f34f6bbea5180c138891e1c (코드 복사)

    → style / base 폴더 안에 _reset.scss 생성 후 코드 작성 및 붙여 넣기

    → main.scss 에 @import 하기