📍 URL, IP, PORT의 개념
'www.google.com'를 검색할 경우 우리는 구글 사이트로 이동한다.
어떻게 사이트로 이동한 것일까?
여행을 갔다 집에 오는 길에 택시를 탔다. 기사님에게 우리집, 어느 아파트라고 말했을 때 모를 수 있다. 그럼 우리는 주소를 알려드린다. 주소로 아파트에 도착했으면 우리는 문을 통해 집에 들어간다. 이것을 URL, IP, PORT와 연결시킬 수 있다.
URL = 이름-> www.google.com
IP = 주소는 DNS에서 전송한 URL에 맞는 값, 주소를 클라이언트에게 전송한다. -> 142.250.76.132
PORT = 문-> www.google.com:80
대표적인 PORT번호
80: http
443: https📍 emmet 문법
Emmet은 HTML 혹은 CSS를 작성할 때 작성 시간을 줄여주는 확장 기능- ! + tab : HTML 자동 완성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- h1 + tab : h1태그 완성
<h1></h1>- h1{문장} : 문장이 h1태그로 설정
h1{hello world}
-> <h1>hello world</h1>- h1+p : h1태그와 p태그 완성
<h1>Hello World</h1>
<p>hello world</p>
h1 작성 후 tab을 누르면 p로 이동- h$*5 : h1태그부터 h5태그까지 만들어짐
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>- p#이름 : p태그의 id="이름"
p#hello
-> <p id="hello"></p>- p.이름 : p태그의 class="이름"
p.hello
-> <p class="hello"></p>
#, . 같이 사용 가능
p#hello1.hello2
-> <p id="hello1" class="hello2"></p>- table>(tr>td3)2 : 3개의 테이블데이터가 2줄(데이터로우)이 있다.
table>(tr>td*3)*2
-> <table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>-
Alt+방향키(위, 아래) : 코드 줄 이동
-
ul>li*숫자 : 숫자만큼 li가 ul 형태로 생성
ul>li*3
-> <ul>
<li></li>
<li></li>
<li></li>
</ul>- ul>li.item$*숫자 : class="item1"에서 class=item숫자"까지 li가 ul 형태로 생성
ul>li.item$*3
-> <ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
-
lorem : lorem 내용(의미없는 내용)-한문단
-
lorem숫자 : 숫자만큼 단어 표현
-
lorem*숫자: 숫자만큼 문단 표현
-
div
.one -> <div class="one"></div>
#two -> <div id="two"></div>- a[href='주소']
a[href='www.naver.com']
-> <a href="www.naver.com"></a>- p[a='이름' b='이름1' c='이름2']
p[a='one' b='two' c='three']
-> <p a="one" b="two" c="three"></p>📍 VSC 단축키
- Settings : Ctrl + ,
- Sidebar : Ctrl + B
- Terminal : Ctrl + Shift + `
- Command palette : Ctrl + Shift + P, F1
- 동시 수정 : Ctrl + Alt + 방향키(상, 하) / Alt + Click
- Quick Open : Ctrl + P
- 문장 이동 : Alt + 방향키(위, 아래)
- 줄 복사 : Ctrl + Shift + 방향키(위, 아래)
- 주석 : Ctrl + /
- 들여쓰기 / 내어쓰기 : tab, shift + tab
- 한 줄 삭제 : Shift + Del
- 파일 생성 : Ctrl + N
더 많은 vsc 단축키-cheatsheet (window)
->vsc에서 ctrl + k + s를 누르면 모든 단축키 확인 가능
📍 GitHub 명령어
✅ 꼭 알아야 하는 명령어(순서대로)
- git pull
- git add .
- git commit -m '메시지'
- git push
위의 명령어를 하기 전 git clone을 해주어야 한다.
작업할 새로운 디렉토리를 만들고 생성된 디렉토리로 이동한다.
git clone 다음 다운할 폴더 주소를 입력한다. (code를 누른 다음 https에 나온 주소를 사용하면 된다.)
$ mkdir filename
$ cd filename
$ git clone https://github.com/id/clone-filename.git .GitHub에서 폴더, 데이터를 가져와서 수정한 후 수정한 정보로 업데이트를 할 경우 5번까지의 과정을 거친다.
git pull을 통해 폴더를 다운받는다.- 코드를 수정한다.
git add .로 폴더에서 수정한 파일들을 모두 저장한다.
만약 one.txt 폴더만 수정한 후 저장할 경우 git add one.txt 하면 된다.git add <filename>git commit -m '메세지'를 입력한다.git push로 GitHub에 보낸다.
5번까지 과정을 하면 다운받은 폴더에서 내가 수정한 코드를 확인할 수 있다.
$ git pull
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 657 bytes | 54.00 KiB/s, done.
From https://github.com/yejilee0714/sample
d4d8b95..08dfcf6 main -> origin/main
Updating d4d8b95..08dfcf6
Fast-forward
sample.txt | 1 +
1 file changed, 1 insertion(+)
$ git add .
$ git commit -m 'hello'
[main c560920] hello
1 file changed, 1 insertion(+), 1 deletion(-)
$ git push
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 269 bytes | 269.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/yejilee0714/sample.git
08dfcf6..c560920 main -> main