FrontEnd

2022. 09. 19 1차

git 설정

• git 명령 정리
• git 설치 https://git-scm.com/download/win
• git config --global user.name ""
• git config --global user.email ""
• git Repository 생성 (온라인 저장소 생성)
• mkdir 폴더명 (로컬 저장소 생성)
• cd 폴더명 (폴더 내부로 이동)
• git init (깃 생성)
• git status (어느 브랜치에 있는지)
• git add .
• git commit -m "파일관련내용"
• git remote add origin 주소 (처음연결시)
• git remote -v (처음연결시)
• git push --set-upstream origin master (처음연결시)
• git push origin master (이후 커밋할 때)

VS-git 연동

• VScode 설치
• git 설치
• github 접속 후 레퍼지토리 생성
• VScode github로 로그인
• 커밋: 변경사항(+), 메세지 입력, 커밋, 동기화

VScode 단축키

• ! + tap : doctype html 기본 틀 자동생성
• alt + shift + f : 입력 라인 자동 정렬
• alt + 커서 : 다중커서
• alt + 방향키 : 해당 커서가 있는 행 이동
• alt + shift + 방향키 : 해당 커서가 있는 행 복사
• ctrl + shift + k : 해당 커서가 있는 행 삭제
• shift + alt + a : 여러 줄 주석
• ctrl + / : 한 줄 주석

프론트엔드 참고사이트

HTML 사이트

• 표준 : https://html.spec.whatwg.org/multipage/
• HTML 튜토리얼:
  • https://www.w3schools.com/
  • https://developer.mozilla.org/ko/docs/Web/HTML
  • https://www.advancedwebranking.com/seo/html-study/
• 반복적인 구문 치트키: https://emmet.io/

CSS 관련 참고

• 포토샵 기능 사이트 : https://www.photopea.com/

• 디자인참고사이트 :

  • https://mycolor.space/
  • https://colorhunt.co/
  • https://fontawesome.com/
  • https://fonts.google.com/
  • https://cssgradient.io/
  • https://www.shapedivider.app/
  • https://haikei.app/
  • https://coolbackgrounds.io/
  • https://dribbble.com/
  • https://www.sliderrevolution.com/resources/css-forms/
  • https://yesviz.com/devices.php
  • https://m3.material.io/
  • https://m3.material.io/theme-builder
  • https://colorpalettes.net/

• CSS 참고사이트 :

  • 버튼hover 효과: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=tokyomari&logNo=220990155818