02. 개발 환경
안녕하세요.
콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^
html을 개발하기 위한 개발 환경을 만들어 볼거에요.
html은 특별한 개발환경이 필요한건 아니에요.
그냥 간단히 메모장과 같은 아무 에디터를 이용해도 상관없어요.
하지만 전 좀 더 편하게 html를 코딩 할 수 있는 툴을 소개할려고 해요.
바로 Visual studio code라는 에디터에요.
자 그럼 그냥 메모장과 Visual studio code의 차이점을 간단하게 보여드릴께요.
이후 부터는 부르기 편하도록 VS Code라고 부를께요.
어떻신가요? 차이점이 느껴지시나요?
vs code에서는 특정 단위로 색상이 다르게 보이시는 걸 느끼실건데요.
이걸 코드 하이라이팅이라고해요. 덕분에 코드의 영역별로 구분을하기 수월해지조.
단순히 그것분만 아니라 개발에 필요한 여러 편의 기능들을 제공해주기때문에 사용 안한다면 손해겠조.
다른 여러 개발용 에디터들이 있는데요.
다른 어떤걸 사용해도 되고 자신히 편한 걸 이용하셔도 되요.
저는 vs code를 좋아하기 때문에 제 강의에서는 모두 이걸 기준으로 할 거에요.
vs code 설치
다운로드 할 주소는 https://code.visualstudio.com/ 이곳에서 다운받아 설치하시면 되요.
표시되어 있는 버튼을 눌러 자신의 OS에 맞는 설치 파일을 받아 설치하세요.
설치 방법은 간단하니 설치하고 오시면 될거 같아요.
Live Preview 설치
설치가 됐다면 html개발을 위해 간단한 세팅을 할거에요.
LIve Preview라는 확장 프로그램을 설치할거에요. HTML 코딩한 내용이 실시간으로 볼수 있도록 도와주는 확장 프로그램인데요.
공부할때 간단히 사용하기 좋은거 같아요.
설치해보볼께요.
vs code를 실행 후 왼쪽에 '확장' 버튼을 클릭 후 열린 팝업 상단에 검색부분에 'live server'로 입력해볼께요.
Live Server 설치 버튼이 보이 실거에요 설치해주세요.
설치가 완료되면 에디터 오른쪽 하단을 보시면 Go Live라고 문구가 표시되면 준비가 된거에요.
작업 폴더 설정
VS Code에서는 메모장처럼 간단히 파일을 작업해서 저장을 할수도 있지만 내가 주로 작업할 폴더를 선택하여 해당 폴더에서 파일을 생성해서 작업을 할 수 있는 기능을 제공해줘요.
앞으로 생성할 파일들이 많이 있을거에요. 그래서 작업 할 폴더를 설정해 볼 거에요.
왼쪽 메뉴에서 탐색기를 선택 후 폴더 열기를 누르시면 폴더를 선택 할 수 있는 창이 열려요.
저는 HTML이라는 폴더를 만들어 폴더를 열었는데요.
여러분들도 적당한 폴더를 생성해서 폴서를 설정해보세요.
파일 생성 및 HTML테스트
index.html파일을 만들어 html 기본 형태를 만들어 테스트 해볼께요.
폴더 아래쪽 적당한 곳에서 마우스 우클릭해보시면 팝업이 열리는데요. 그 곳에서 '새 파일'을 선택해볼께요.
입력부분에 index.html로 정하고 진행해 볼께요.
오른쪽 index.html 파일 탭에서 html:5라고 입력해볼께요.
그럼 html:5이라고 파란색 글씨가 있는 팝업이 열린는데요. 한번 선택해볼께요.
그럼 html 5의 기본 구성이 자동으로 만들어 저요.
지금 해본 기능은 인텔리 센스라는 기능중에 snippet이라는 기능을 사용한거에요.
몇개의 글자만 입력해도 팝업이 열리며 작업하려고하는 코드를 추천해주고 선택하면 자동으로 코드를 생성해주는 기능을 바로 인텔리센스라고 불러요.
body부분에 test라고 입력하고 저장할께요.
그리고 오른쪽 하단 부분에 'Go Live' 버튼이 추가된거 보셨조. 그걸 눌러볼께요.
그럼 메인으로 설정된 브라우저가 실행되면서 test가 표현이 될거에요.
이건 html코드 중에 body영역에 test문구가 그대로 표현된거에요.
지금 상태에서 html코드에 test를 test2로 하고 저장해볼께요.
그리고 아까 열렸던 브라우저로 돌아가보면 test2가 된걸 확인 할수 있는데요.
확장 프로그램인 Live Server 기능이에요 'Go Live'버튼을 누르면 해당 기능이 활성화 되면서 에디더가 수정되면 즉시 브라우저에 반영이 되게 되요.
이걸 우리는 핫 리로드라고 부르기는 하는데 별로 중요하지는 않아요.
이번 강의는 여기까지에요.
여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.
많은 관심과 사랑 부탁드립니다.
감사합니다.
그럼 콤빠~