[HTML/CSS] 웹 개발환경 갖추기

HTML과 CSS로 웹 문서를 만들기 위해서는 웹 편집기를 사용해야합니다. 이 웹 편집기로는 메모장, 노트패드++, 드림위버 등 다양한 프로그램이 있습니다. 어떤 프로그램을 선택하셔도 상관이 없으시나 이 글은 비주얼 스튜디오 코드를 사용해 웹 개발환경 갖추는 법에 대한 내용을 담고 있습니다.

---

 

 

1. 비주얼 스튜디오 코드 설치

---

비주얼 스튜디오 코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. 

https://code.visualstudio.com/

 

자세한 설치 방법이 궁금하시면 아래 Visual Studio Code 다운로드 및 설치 방법 게시물을 참조해주세요

pururing-log.tistory.com/65

Visual Studio Code 다운로드 및 설치 방법

 

2. 라이브 서버 설치

---

Visual Studio Code를 실행하신 후 좌측의 확장 아이콘을 클릭해주세요. 아이콘을 누른 후 검색 창이 나타났다면 live server를 누르신 후 Live Server를 설치해주세요.

 

 

 

3. 작업 폴더 만들기

---

Visual Studio Code로 웹을 개발하기 위해서는 작업 폴더를 만들어야합니다. 원하시는 위치에 작업 폴더를 만들어주세요.

 

 

4. Visual Studio Code에 작업 폴더 불러오기

---

파일 -> 폴더 열기를 통해 작업 폴더를 불러와주세요.

 

 

 

탐색기를 확인하면 폴더가 열러 있는 것을 확인하실 수 있습니다.

 

 

 

5. html파일 만들기 

---

이제 '예시입니다'라는 텍스트를 출력하는 html파일을 만들어보겠습니다. 먼저, 불러온 폴더의 이름 옆에 보시면 4개의 아이콘이 있습니다. 이 중에서 첫번째 아이콘 새 파일을 클릭해주세요.

 

 

 

원하시는 파일 이름을 입력해주세요. 단, 반드시 파일의 확장자는 html이어야 합니다.

 

 

 

만들어진 html파일에 '예시입니다.'를 작성하신 후 저장해주세요.

 

 

 

저장을 하신 후 마우스 오른쪽 버튼을 클릭하시면 왼쪽 그림과 같은 창이 나타납니다. Open with Live Server를 눌러주세요. 그러면 오른쪽 사진과 같이 웹브라우저에 '예시입니다.'라는 텍스트가 출력된 것을 확인하실 수 있습니다.