멋사 D+3 HTML/CSS + Git

오전시간에는 HMTL과 CSS의 역사에 대해 배웠다!

 

강사님이 강조한~!

요로코롬~ 구조 아웃라인 신경써서 설계하기

 

최신 CSS 지원 확인 방법

Chrome, Firefox, Edge 등 웹 브라우저 마다 최신 CSS 지원 현황이 다르고 운영체제에 따라서도 차이가 발생한다.

CSS 지원 수준을 확인하고자 할 때는 CSS3Test 서비스를 사용할 수 있다.

크롬

파이어폭스

 

궁금했던 것

npm과 npx의 차이

https://velog.io/@kimkyeseung/%EB%B2%88%EC%97%AD-%EA%B7%B8%EB%9E%98-npx-npm%EB%A7%90%EA%B3%A0-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%84%A4%EB%AA%85

 

https://hanamon.kr/npm-npx-%EC%B0%A8%EC%9D%B4/

VS CODE Git 5k 없애는 방법(how to delete vs code git 5k)

저번에 나도 이렇게 떴어서 걍 삭제했는데 하마터면 로컬에 있는 파일들 삭제될 뻔 했었던거였음..ㄷㄷ.. 조심해야겠다.

 

Git unstage 하는 방법

~/likeLion/git-study (main)
$ git add hello.txt
warning: in the working copy of 'hello.txt', LF will be replaced by CRLF the next time Git touches it

~/likeLion/git-study (main)
$ git status
On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   hello.txt

커밋을 한 번도 하지 않았을 때는 (use "git rm --cached <file>..." to unstage)

~/likeLion/git-study (main)
$ git status
On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   hello.txt

커밋을 하고 나서는 (use "git restore --staged <file>..." to unstage)

 

레포에서 특정 폴더 클론하기

~/likeLion (master)
$ npx degit seulbinim/webcafeHTML5/assets src
Need to install the following packages:
  degit
Ok to proceed? (y) y
> cloned seulbinim/webcafeHTML5#HEAD to src

 

Git Clone

~/likeLion (master)
$ git clone https://github.com/seulbinim/webcafeHTML5.git
Cloning into 'webcafeHTML5'...
remote: Enumerating objects: 73, done.
remote: Counting objects: 100% (15/15), done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 73 (delta 1), reused 14 (delta 1), pack-reused 58Receiving objects:  89% (65/73), 1.14 MiB | 2.26 MiB/s
Receiving objects: 100% (73/73), 4.62 MiB | 4.96 MiB/s, done.
Resolving deltas: 100% (3/3), done.

~/likeLion (master)
$ ls
git-study/  webcafeHTML5/

~/likeLion (master)
$ cd webcafeHTML5

~/likeLion/webcafeHTML5 (main)
$ git log --oneline
e78f1bd (HEAD -> main, origin/main, origin/HEAD) 초기화 및 백업(Initialization & Backup)

~/likeLion/webcafeHTML5 (main)
$ ls -a
./   .git/       .htmlhintrc  bookmarks.html  font/       index-complete.html  package.json       README.md
../  .gitignore  assets/      css/            index.html  js/                  package-lock.json  styles/

 

Git Remote

~/likeLion/webcafeHTML5 (main)
$ git remote -v
origin  https://github.com/seulbinim/webcafeHTML5.git (fetch)
origin  https://github.com/seulbinim/webcafeHTML5.git (push)

~/likeLion/webcafeHTML5 (main)
$ git remote add test https://github.com/내계정/test.git

~/likeLion/webcafeHTML5 (main)
$ git remote -v
origin  https://github.com/seulbinim/webcafeHTML5.git (fetch)
origin  https://github.com/seulbinim/webcafeHTML5.git (push)
test    https://github.com/내계정/test.git (fetch)
test    https://github.com/내계정/test.git (push)

~/likeLion/webcafeHTML5 (main)
$ git push test main
Enumerating objects: 73, done.
Counting objects: 100% (73/73), done.
Delta compression using up to 8 threads
Compressing objects: 100% (67/67), done.
Writing objects: 100% (73/73), 4.62 MiB | 2.00 MiB/s, done.
Total 73 (delta 3), reused 73 (delta 3), pack-reused 0
remote: Resolving deltas: 100% (3/3), done.
To https://github.com/내계정/test.git
 * [new branch]      main -> main

클론은 깃과 함께 받지만, 디짓은 깃을 빼고 받는다

 

Remote 삭제

~/likeLion/webcafeHTML5 (main)
$ git remote rm test

~/likeLion/webcafeHTML5 (main)
$ git remote -v
origin  https://github.com/seulbinim/webcafeHTML5.git (fetch)
origin  https://github.com/seulbinim/webcafeHTML5.git (push)

 

.gitignore

.gitignore 파일은 git 버전관리에서 제외할 파일 종류를 지정하는 역할이다.

 

npm i

package.json에 넣어놓은 패키지 자동으로 설치해줌

 

HTMLHint

강사님이 소개해주신 html코드분석 확장도구!

오류와 문제의 수를 확인할 수 있고 세부 설정 커스텀도 가능한!

원하는 설정으로 커스텀하고 Download rc 눌러서 .htmlhintrc파일받아서 해당 레포가서 파일넣어주면 된다.

그리고 수업시간에 Git Flow에 대해서 얘기가 나와서 정리된 블로그 찾아보았다.. 요건 좀 더 공부해보ㅏ야할듯

---

 

수업 끝나고 운동하니까 넘 피곤쓰..집와서 저녁먹고 씻고 하니까 시간 너무 잘간다..

지금은 초반이라 괜찮은데 점점 어려운거 배우면 복습 더 많이 해야 될텐데 걱정쓰