1. Visual Studio Code 설치
-
code.visualstudiocode.com으로 들어가 자신의 운영체제에 맞는 다운로드 파일을 선택하여 다운로드 받는다. (본인은 window)
-
프로그램 설치를 진행한다.
-
밖에 폴더를 만들고 vscode로 드래그를 한다. 그러면 해당 폴더에서 작업을 진행할 수 있다.
-
왼쪽 상단의 해당 폴더 명 옆에 파일아이콘을 누르면 파일을 추가할 수 있고, 폴더아이콘을 누르면 폴더를 추가할 수 있다.
-
해당 폴더 안에 파일아이콘을 눌러 index.html, main.css등의 파일들을 만들어 지는 것을 확인해 본다.
2. 확장 기능
- Auto Rename Tag : 앞쪽 태그를 바꾸면 뒤쪽 태그도 바뀌게 해주는 모듈, 확장 기능
- Beautify : 어떤 상황에 의해 코드가 지저분 해질때 손쉽게 깔끔하게 수정 가능한 확장기능.
- Ctrl+shift+p (모든 명령 표시)
- 바로 가기 검색
- HookyQR.beautify 누르기
- alt + ctrl + l 키로 단축키 등록
- 지저분한 코드 드래그 하여 단축키를 사용
- Korean Language Pack for Visual Studio Code : 한글 지원
- Live Server : 브라우저 출력을 위한 라이브 서버. alt+l, alt+o를 누르면 서버가 열리고 alt+l, alt+c를 누르면 서버가 닫힌다.
3. 단축키
- Ctrl+shift+p : 모든 명령 표시
- Ctrl+w : 현재 tab 닫기
- Ctrl+f : 찾기
- Ctrl+h : 찾기(검색)/바꾸기(대체)
- Ctrl+z : 되돌리기
- Alt+화살표up : 줄 위로 이동
- Alt+화살표down : 줄 아래로 이동
- Alt+Shift+화살표up: 위에 줄 복사
- Alt+Shift+화살표down: 아래에 줄 복사
- Tab : 들여쓰기(Indent)
- Shift+Tab : 내어쓰기(Outdent)
- Ctrl+PageUp or Ctrl+PageDown : 다음 편집기 열기(왼, 오른쪽)
- Ctrl+\ : 편집기 분할
4. TAG 영역
<!DOCTPYPE html>
<html>
<head>
<meta charset="">
<meta name="" content="">
<title></title>
<link rel="" href="">
<script src=""></script>
<style></style>
</head>
<body>
</body>
</html>
- DOCTPYPE(DTD) tag : 마크업 언어에서 문서 형식을 정의
웹 브라우저가 어떤 HTML버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도.
HTML 버전을 지정- html tag : 문서의 전체 범위
HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할이다.- head tag : 문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은, 웹페이지의 보이지 않는 정보를 작성하는 범위.- body tag : 문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위.- meta : HTML문서(웹페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공한다. 즉, 정보를 제공해주는 태그이다.
charset : 문자 인코딩 방식을 지정하는 HTML 속성
name : 정보의 종류
content : 정보의 값- title tag : HTML 문서의 제목(Title)을 정의. 웹 브라우저 Tab에 표시가 된다.
- link : 외부 문서를 가져와 연결할 때 사용한다.(대부분 CSS파일, Tab의 아이콘 등..)
rel(Relationship) : 가져올 문서와 현재 HTML과의 관계.
href(Hyper Text Reference) : 가져올 문서의 경로.- style : 스타일(CSS)를 HTML 문서 내부에서 직접적으로 작성하는 경우에 사용한다.
- script : 자바스크립트(JS)를 HTML 문서 내부에서 작성하는 경우에 사용한다.
- script src : 자바스크립트(JS) 파일을 가져오는 경우에 사용한다.
5. CSS, JS, Image 적용
5-1. 폴더 없이 CSS와 JS 적용시키기
- index.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>이후 body tag에 다음 코드를 추가시켜준다.
<div>Hello World!</div>-
lang="en" -> lang="ko"로 바꿔준다. (선택사항)
-
main.css를 생성하고 다음과 같은 코드를 입력한다.
div {
color: red;
font-size: 100px;
}div 태그로 이루어진 부분에 대해서 빨간색 글씨와 100px의 폰트 사이즈를 적용한다는 의미이다.
- main.js를 생성하고 다음과 같은 코드를 입력한다.
console.log('TEST!');브라우저를 켜서 F12를 누르고 console을 선택하면 TEST! 라는 문구가 나온다는 의미의 코드이다.
- main.css와 main.js를 연결하기 위해 index.html에서 head tag내부의 title 태그 아래에 다음과 같은 코드를 추가 시켜준다.
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>- 완성된 코드는 다음과 같으며
<!DOCTYPE html>
<html lang="ko">
<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>
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
</head>
<body>
<div>Hello World!</div>
</body>
</html>- Live Server를 실행시켜 (Alt+L, Alt+O) CSS가 적용이 되는지, JS가 아래와 같이 적용이 되는지 확인해 본다.
5-2. 폴더를 이용한 CSS, JS, Image 적용
-
css, js, images 폴더를 만든다.
-
위에서 만든 main.css는 css폴더로, main.js는 js폴더로, 아무 logo사진을 다운받아 이름을 logo.png로 바꿔준 후 images폴더에 넣어준다.
★ index.html 파일은 절대 폴더로 관리하면 안된다.
프로젝트의 가장 최상위 경로(Root path)에 index.html파일이 존재 해야지만 브라우저가 자동으로 찾아 출력을 하기 때문이다.
이후 화면을 보면 style tag에 적용된 내용을 뺀 나머지는 적용이 되지 않는 것을 확인할 수 있다. -
적용되지 않는 css와 js를 적용 시켜주기 위해, 위에서 작성한 link tag의 href와 script tag의 src의 경로를 2번에서 옮긴 경로로 바꿔준다.
그리고 logo는 다음과 같은 코드를 Hello world! 밑에 넣어준다.
경로에 관한 개념은 아래 5-3을 참고하면 된다.
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script><body>
<div>Hello World!</div>
<img src="./images/logo.png" alt="logo"/>
</body>- 이후 바뀐 내용이 적용이 잘 되었는지 확인 해본다.
5-3. 경로
- 상대, 절대 경로
- 상대 경로
./ 주변 (생략 가능)
../ 상위 폴더- 절대 경로
http(https) : 원격 경로
/(//) : 최상위 경로 (Root path)- 우리의 환경 : localhost, local
- 우리가 들어온 파일의 위치가 Root 경로
css파일에서도 아래와 같이 경로를 사용하여 이미지를 출력할 수 있다.
div {
width: 200px;
height: 200px;
background: url("../images/logo.png");
}- a tag
<a href="https://naver.com">NAVER</a>
- href : 경로를 입력하는 속성
- a tag 내부에 있는 특정 글자 혹은 내용을 선택을 하면
a tag 명시되어있는 href의 속성에 있는 경로로 페이지를 이동시켜준다.
예시로 a tag와 절대 경로를 이용해보자.
about, login 이라는 폴더를 만들고 각 폴더 아래에 index.html을 만든다.
이후 기본 세팅을 해주고 body tag에 아래와 같이 코드를 입력해준다.
About(Login)!!
<a href="/">HOME</a>최상위 경로의 index.html에서는 아래의 코드를 입력해준다.
<a href="/about">About</a>
<a href="/login">Login</a>이후 실행을 시켜 해당 경로로 잘 이동이 되는 것을 확인해보자.
★브라우저는 자동으로 index.html파일을 찾기 때문에 위의 방식이 잘 되는 것을 확인할 수 있다.
6. 브라우저 스타일 초기화
브라우저에서 기본적으로 제공하는 스타일을 초기화 하기 위해 하는 작업이다.
<!DOCTYPE html>
<html lang="ko">
<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>Start VScode</title>
<style>
div {
width: 200px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>위의 코드를 입력 했을 때 분명 width와 height만 설정했는데 f12를 눌러 개발자 모드로 들어가 보면 내가 설정 하지도 않은 margin이 설정되어 있는 것을 확인할 수 있다.
이는 브라우저 마다 기본적으로 제공되는 스타일이 문제가 되는 것이므로 이를 초기화를 해줘야 내가 원하는 결과로 보이게 만들 수 있다.
이를 해결하기 위해 https://www.jsdelivr.com/package/npm/reset-css에 접속하여 아래와 같은 화면에서 Copy url을 한다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">Copy url을 하고 난 뒤 위의 코드를 head tag -> title tag 아래에 넣어준다.
이후 다시 실행시켜보면 브라우저에서 기본적으로 제공하는 스타일을 초기화되어 내가 의도한 대로 정상적으로 출력이 되는 것을 확인할 수 있다.
7. Emmet
요소를 자동으로 완성을 해주는 문법.
예를 들어 div 입력 후 tab키나 enter를 누르면
<div></div>이런식으로 자동으로 입력된다.
