HTML 기초 - 2 | 개발환경 세팅

HTML을 작성하기 위해서는 무엇이 필요할까?

거창한 거 필요 없다.

메모장과 브라우저만 있으면 된다.

 

진짜로 메모장으로 된다. 메모장 저장 시 파일확장자를 .html 로 저장하자.

그리고 브라우저에서 그 파일을 열어서 확인하면 끝이다.

 

그럼 진짜 메모장만 써요???

그건 아니다.

메모장으로도 HTML 작성을 할 수는 있지만, 더 좋은 프로그램이 있다면 굳이 메모장을 쓸 이유는 없다.

 

우리는 Visual Studio Code 라는 Microsoft의 무료 코드에디터 프로그램을 사용할 것이다.

 

---

Visual Studio Code

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

위의 링크로 들어가서 Visual Studio Code (VSCode) 를 다운로드하도록 하자.

크게 어려운 건 없다. 그냥 다운로드 버튼 누르고 몇 가지 동의하면 끝난다.

 

주의할 부분 몇 가지만 설명하자면 

 

1. 설치 경로에 한글이 들어가지 않도록 하자. 한글로 된 폴더 안에 설치하지 말라는 말이다.

2. 추가작업선택 부분에서 PATH에 추가 를 꼭 체크하도록 하자.

이게 끝이다.

 

---

HTML 폴더 & 파일 생성하기

자신의 PC의 원하는 곳에 폴더를 하나 만들도록 하자.

평소에 폴더를 만들듯이 '우클릭 > 새로만들기 > 폴더' 를 이용해 만들어보자.

이때 그 폴더명과 폴더 경로에 한글 이름이 없는지 확인하도록 하자.

 

나 같은 경우에는 '내PC > 문서' 에 practice 라는 폴더를 하나 만들어 보았다.

C:\Users\Cookie\Documents\practice

위와 같이 경로가 모두 영어로 나오게 폴더를 하나 만들면 된다.

---

다 되었으면 VSCode 를 실행하자.

VSCode 창 가장 윗부분을 보면 File, Edit, Selection, View 등 여러 메뉴가 보인다.

여기서 'File' 을 클릭 후 'Open Folder' 를 클릭하자

 

VSCode > File > OpenFolder

여기서 아까 자신이 만들어 두었던 폴더를 선택하자.

---

이제 그 폴더가 VSCode 에 열렸을 것이다.

그 후 VSCode 에서 새 HTML 파일을 만들어 보자.

 

PRACTICE(자신이 설정해둔 폴더 이름) > New File 아이콘

위의 사진에서 빨간 네모로 표시된 New File 아이콘을 클릭하면,

그 아래에 긴 빨간 네모로 표시된 새 파일의 이름을 입력할 수 있는 입력란이 나온다.

 

그 입력란에 자신이 생성할 HTML 파일의 이름을 적자.

이때 반드시 파일의 확장자는 .html 이어야 한다.

 

나는 'index.html' 로 이름지었다.

 

index.html

위와 같이 html 파일이 만들어 지면 성공이다.

---

 

다음 글에서는 이 html 파일을 하나씩 작성해보도록 하자.