On a couch

[내일의집] 환경 세팅 본문

프론트엔드 공부/클론코딩 실습

[내일의집] 환경 세팅

couch 2022. 3. 16. 17:18

1. 피그마 & git (git bash) & node

1) 피그마 : 프론트엔드 디자인 툴

 

2) git bash : 컴퓨터를 현재 os와 상관없이 리눅스 언어로 제어할 수 있게 해 주는 것. (오호!)

 2-1) github과 vscode 연결하기

  • gitbash에서 repository를 복사해 올 폴더로 이동
  • 'git clone' + repository url 입력

 2-2) vscode에서 terminal 열기 : ctrl + ` (토글)

 

3) node sass 설정

  *LTS버전(Long Term Support, 장기 지원 버전) : 큰 버그 없이 오래 사용할 수 있는 버전​

  *document : https://www.npmjs.com/package/node-sass

  3-1) package.json 만들기 : terminal에서 'npm init -y' 입력하면 생성

  3-2) scripts에 모드, 명령 추가 : 실행 시에는 'npm run "key"' 로 명령 실행

node-sass야 src폴더의 style.scss를 dest폴더에 style.css로 컴파일해서 뱉어 주겠니

 

2. html 세팅

 

1) <html lang="ko-KR"> 한국에서 한국어로 사용되는 페이지

2) <titlt> 태그 적절히 수정

3) 웹폰트 적용 - 구글 웹폰트, 눈누, 스포카(https://spoqa.github.io/spoqa-han-sans/#header), 경기도서체(https://www.gg.go.kr/contents/contents.do?ciIdx=679&menuId=2457), 혜민체(레귤러 https://noonnu.cc/font_page/687 볼드 https://noonnu.cc/font_page/686) 웹폰트 사용법(https://webactually.com/2017/12/05/16734/ https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0)등 참조

저작자표시

'프론트엔드 공부 > 클론코딩 실습' 카테고리의 다른 글

[내일의집] Sass 활용하기 : 변수, 그리드  (0) 2022.03.18
[내일의집] asset 준비  (0) 2022.03.17
[노마드] 영화서비스 만들기  (0) 2022.03.03
[노마드] 모멘텀 클론코딩 개인화 trouble shooting  (0) 2022.01.27
[노마드] 모멘텀 클론코딩  (0) 2022.01.19
'프론트엔드 공부/클론코딩 실습' Related Articles more