1. URL, IP, PORT 개념정리

1) URL (Uniform Resource Locator)

• URL은 웹상에서 문서, 이미지, 동영상 등의 특정 자원의 위치를 나타내는 주소이다.
  예를 들어,

  다음 URL > https://www.daum.net/
  네이버 URL > https://www.naver.com/

  이다.
  

• URL은
  1. 프로토콜 종류
  2. 자원이 있는 서버의 IP주소, 도메인 주소, 포트 주소
  3. 자원 위치

  URL : https://ko.wikipedia.org/wiki/URL (위키의 URL문서)

  • https -> 프로토콜
  • ko.wikipedia.org -> 도메인 주소
  • wiki/URL -> 자원 위치

  로 구성되어 있다.

2) IP (Internet Protocol)

• IP는 인터넷 상에서 컴퓨터 간의 통신을 위한 주소 체계로, 집 주소같이 모든 인터넷에 연결된 기기들은 각자의 IP주소를 가지고 있다.
  예를 들어,

  네이버 IP > 220.95.233.172
  다음 IP > 114.108.157.19

  이다

3) PORT

• PORT는 네트워크 서비스를 식별하는 데 사용되는 주소이다.
  IP주소가 집 주소와 비슷하다면, 포트 번호는 방 번호와 비슷하다.

  http://www.naver.com:80/
  :80 -> 포트번호

• 포트 번호는

  1. 잘 알려진 포트 (0번 ~ 1023번) : 국제 도메인 관리 기구에서 통제
     ex) HTTP : 80 || HTTPS : 443
  2. 등록된 포트 (1024번 ~ 49151번) : 국제 도메인 관리기구에 등록
  3. 동적 포트 (49152번 ~ 65535번) : 임시 포트들, 어떤 프로세스들에게 임의로 사용 가능

  로 이루어져 있다.

2. Emmet 문법

• Emmet(에밋)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다.
  간단하게 코드를 입력하면 자동으로 완전한 HTML 코드를 생성한다.
  VSCode는 Emmet을 지원하며, Tab 키를 통해 사용할 수 있다.

  h1{hello world} -> <h1>hello world</h1>
  
  h1+p
  <h1></h1>
  <p></p>
  
  h$*6
  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>
  
  p#hello -> <p id="hello"></p>
  p.hello -> <p class="hello"></p>
  
  p#hello1.hello2 -> <p id="hello1" class="hello2"></p>
  p.one.two.three -> <p class="one two three"></p>
  
  table>(tr>td*2)*1
  <table>
  	<tr>
      	<td></td>
      	<td></td>
  	</tr>
  </table>
  
  ul>li.item$*3
  <ul>
  	<li class="item1"></li>
  	<li class="item2"></li>
  	<li class="item3"></li>
  </ul>
  
  ul>li*3
  <ul>
  	<li></li>
  	<li></li>
  	<li></li>
  </ul>
  
  lorem -> 예시를 보여줄 때 사용하는 자리 표시자로 아무 의미없는 말들을 적어둔 것.
  lorem5 (lorem * 5단어) -> Lorem ipsum dolor sit amet.
  lorem*3 (lorem * 3문장)
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aperiam quo impedit amet adipisci nisi rerum, illum ullam deleniti laudantium atque ut doloremque porro molestiae. Ratione commodi aliquid ad id.
  Assumenda voluptas eius iste optio ipsa nisi itaque possimus ullam voluptates nostrum explicabo ex quibusdam et perferendis, sed non placeat exercitationem odio ut, aut ea. Voluptas unde dolore repudiandae qui.
  Voluptatibus qui debitis reprehenderit fugit aut esse ab quibusdam tempora ducimus quasi molestias, laborum temporibus. Minus consequuntur, optio, possimus culpa, impedit asperiores ad animi sunt reiciendis quam excepturi laborum id!
  
  .one -> <div class="one"></div>
  #one -> <div id="one"></div>
  
  a[href='https://www.naver.com'] -> <a href="https://www.naver.com"></a>
  
  p[a='one' b='two' c='three'] -> <p a="one" b="two" c="three"></p>

3. GitHub 필수 명령어

• git init
  로컬저장소를 생성한다.

    git init

• git clone <저장소주소>
  원하는 폴더위치에 기존의 다른 저장소를 가져와서 사용한다.

  git clone https://github.com/[가져올 저장소 주소]

• git remote add <저장소이름> <저장소주소>
  자신의 원격저장소를 추가한다.

  	git remote add origin http://github.com/[저장소 주소]

• git status
  현재 stage 상태를 확인한다.

  git status

• git pull <저장소이름>
  원격저장소의 모든 데이터를 가져와서 원격저장소와 로컬저장소 데이터를 모두 합친다.

   git pull origin

• git add <파일이름>
  원하는 파일을 커밋 대상에 추가한다.

  git add [파일이름]

• git commit -m '커밋 메시지'
  커밋 대상에 추가된 파일과 수정된 파일들 모두를 커밋한다.

  git commit -m "first commit"

• git push <저장소이름> <브랜치이름>
  원격저장소에 데이터(특정 브랜치)를 넣는다.

  git push origin main