📌 URL, IP, PORT
네이버 홈페이지를 접속할 때 발생하는 과정을 살펴보면 다음과 같다.
www.naver.com(URL) > DNS[도메인 네임 서버] > 223.130.195.200(IP) > Server > 웹 브라우저에 표시
PC에 접속하기 위해서는 PC를 가리키는 주소를 알아야 하는데 PC의 주소를 나타내는 체계를 IP라고 한다.
DNS는 URL을 IP로 바꿔주는 역할을 한다.
PORT는 IP 주소가 가리키는 PC에 접속할 수 있는 정해진 문이다.
잘 알려진 PORT 번호에는 80(HTTP), 443(HTTPS)이 있다.
네이버 회사 5층을 찾아가는 것으로 비유를 해보면
URL은 네이버 회사
DNS는 내비게이션
IP는 경기도 성남시 분당구 불정로 6
PORT는 엘레베이터 5층 버튼
과 같다.
📌 emmet 문법
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
!
<!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, h1{hello world}, h1+p, h$*6
<h1></h1>
<h1>hello world</h1>
<h1></h1>
<p></p>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>p#hello, p.hello, p#hello2.#hello2, p.one.two.three
<p id="hello"></p>
<p class="hello"></p>
<p id="hello2" class="hello2"></p>
<p class="one two three"></p>table>(tr>td*6)*4
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>lorem, lorem*3, lorem5
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui error fugit dolorum sequi totam debitis quia velit ipsum molestiae, ratione pariatur nisi, officia magnam voluptatum alias quis aliquid, delectus eos?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi distinctio quibusdam fuga. Iure blanditiis nisi animi laudantium corrupti? Tempore eum perferendis placeat impedit deserunt hic natus voluptates aut officia modi?
Aliquam quae odio earum ad a. Inventore recusandae quaerat repudiandae iure quia, maxime eum vitae odio cupiditate ipsa provident neque ducimus corporis eligendi excepturi assumenda rem aspernatur quis unde iusto.
Vel eum voluptatum incidunt pariatur quibusdam possimus ducimus reprehenderit magni recusandae, omnis consequatur eveniet dolorem voluptate mollitia vitae! Aliquam officia iure asperiores ducimus quas temporibus molestiae quae consequatur laudantium harum?
Lorem ipsum dolor sit amet.#one, .one
<div id="one"></div>
<div class="one"></div>emmet을 사용하면 굉장히 편리하다! 속도 향상👍🏻
emmet cheat sheet 틈틈히 보면서 기억하고 개발해야지..!🔥
📌 VS Code 단축키
- Settings :
Ctrl + , - 동시 선택 :
Ctrl + D - 동시 수정 :
Ctrl+Alt+방향키(상, 하),Alt + Click,Alt + Shift + Drag,Alt + Shift + I - 들여쓰기 / 내어쓰기 :
Ctrl + ]/Ctrl + [,tab/shift + tab - 한 줄 위치 이동 :
Alt + 방향키(위, 아래) - 한 줄 삭제 :
Shift + Del - 문장의 양 끝 :
Home/End - 코드의 양 끝 :
Ctrl + Home/Ctrl + End - htmltagwrap :
alt + W
📌 Git/GitHub⭐
Git : 소스코드 및 파일의 변경내역을 저장하는 분산 버전 관리 시스템
GitHub : Git 기반의 웹 서비스
Repository 생성
Pages 사용하여 웹 페이지 생성
Settings > pages > Branch main > Save
GitHub에 파일 올리기
GUI
Add file > Upload files > 001.html
CLI
레파지토리 생성시 README.md 파일을 생성하지 않았을 경우
git 명령어를 git bash에 입력해주면 README.md파일이 GitHub 레파지토리로 들어간다
git clone repo주소
: 프로젝트 다운로드 받을 때
: repo주소 붙여넣기 Shift + Insert
git pull
: 받아오기
: 혼자 하는 프로젝트에서는 필요 없음
코드 수정
git add
: 추가하기
: 변경한 파일 목록 중 스테이지에 올리기 원하는 파일만 선택
: 파일 전체를 올리고 싶은 경우 git add 뒤에 .을 입력
(이미지 출처 - 프론트엔드스쿨 5기 교안)
git commit -m '메시지'
: 버전 만들기
(이미지 출처 - 프론트엔드스쿨 5기 교안)
git push
: 보내기
깃헙은 뭔가 장벽이 높게 느껴져서 이번에 처음 해보게 되었는데 차근차근 알려주셔서 그런지 아직 기초적인 부분이라 그런지 생각보다 괜찮았다! 웹개발 처음 배울 때 깃헙도 알아놓았으면 좋았을걸 하는 생각도 든다ㅠ 지금쯤이면 잔디가 많이 심어져있을텐데하는 아쉬움..ㅎ 이제라도 1일 1커밋 해서 잘 채워나가봐야겠다🔥
앞으로 협업과 포트폴리오를 위해 깃헙 더 공부해야겠다!
도움되는 글 감사요