[입문] 웹 프론트 엔드 - 3주차

by Lovefield

Front End / Sep 06 2017

VS code 사용법

VS cdoe는 한국어를 지원하고 window, OS X, Linux에서 모두 사용 가능한 IDE(통합 개발 환경을 제공하는 소프트웨어) 입니다.

이번에 64bit 업데이트가 이루어졌으며.

심지어 무료 입니다.

기본적으로 VS code 는 폴더를 선택한 후에 그 폴더 내에서 사용을 하는 구조입니다.

폴더 선택은 Ctrl + b 나 왼쪽 상단의 파일 아이콘을 선택하면 나오는 창에서 선택할 수 있습니다.

테마 선택

저는 사용하는 테마가 있어서 설정되어있는데요.

파일 - 기본설정 - 색 테마 에서 설정이 가능합니다.

VS code 설정

파일 - 기본설정 - 설정 을 선택해 설정 파일을 열을 수 있습니다.

개발언어로 되어있어서 당황스러우실 수 있지만.

설명이 모두 적혀있으므로 괜찮습니다.

검색기능을 이용해 찾을 수도 있습니다.

왼쪽이 기본 설정 상태이며 오른쪽으로 옮겨 수정이 가능합니다.

VS code 키설정

파일 - 기본설정 - 바로 가기 키 에서 설정이 가능합니다.

검색창에서 단어나 키조합으로 검색이 가능합니다.

HTML 기본 구조.

<!doctype html>
<html lang="ko">
<head>
    <mate charset="utf-8">
    <title>document</title>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

<!doctype html> : 문서의 타입을 나타내는 선언문입니다. (HTML5 선언문)
<html></html> : HTML 태그이며 document 영역이 되는 곳입니다.
- lang="ko" : 이 문서가 어떤 언어로 이루어져 있는지에 대한 선언입니다. (ko = 한국어)
- <mate charset="utf-8"> : 이문서의 캐릭터 셋을 utf-8(유니코드)로 지정한다라는 선언문입니다.
lang="ko" : 이 문서가 어떤 언어로 이루어져 있는지에 대한 선언입니다. (ko = 한국어)
<mate charset="utf-8"> : 이문서의 캐릭터 셋을 utf-8(유니코드)로 지정한다라는 선언문입니다.
<head></head> : 컴퓨터가 이 문서에 대한 정보를 인식하는 부분입니다. 유저가 직접 볼 수 없습니다.
<body></body> : 브라우저를 통해 유저가 볼 수 있는 화면입니다.
- <div class="wrap"></div> : body 를 직접 제어 하는 것은 좋지 않아서 전체를 감싸는 요소를 하나 생성해 사용합니다.
<div class="wrap"></div> : body 를 직접 제어 하는 것은 좋지 않아서 전체를 감싸는 요소를 하나 생성해 사용합니다.