import {
 A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
 Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
 Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
 Dt, Dd
} from '@/components/Post';

<HtmlGuideMessage/>

우리는 저번 글들을 통해서 HTML에 대해 알게되었고 문법을 알아보았습니다. 태그라는 것은 무엇이며 태그의 특징은 무엇이고, 태그끼리의 관계는 또 어떤지도 알아봤습니다. 기본적인 사전 지식은 다 알아본 셈이고, 이게부터는 코딩을 본격적으로 시작해야 할 때가 왔죠.

하지만 코딩을 본격적으로 시작하기에 앞서 알고 넘어가야 할 것이 있습니다. 그게 무엇인가 하면 이번 글의 주제인 개발환경입니다. 개발환경은 개발자가 개발을 하기 위해 갖춰야 하는 기본적인 조건입니다. 프로젝트들이 모여있는 폴더부터 시작해서 편집기까지 모두를 아울러 부르는 말이 개발환경입니다.

바로 본론으로 넘어가보도록 합시다. 웹 개발을 위한 HTML 가이드 5편 시작합니다.

# 개발환경 구축하기
개발환경을 구축하기 전에 기본적으로 해야하는 설정들이 있습니다. 일단은 그 설정들을 먼저 살펴보도록 합시다. 그 후에는 우리가 개발을 할 때에 사용할 폴더를 만들겁니다. 마지막으로 메모장을 준비해주면 우리의 첫번째 개발환경은 완성된 겁니다.

왜 메모장을 사용하느냐에 대해서는 저는 이렇게 답합니다. 편한 것이 왜 편한지 알려면 불편함을 먼저 경험해야 합니다. 우리는 불편한 방식을 먼저 사용함으로써 편한 것이 왜 편한 것인지를 깨닫는 과정을 겪어볼 겁니다. 이건 중요한 것일 수도 있습니다.

최종적으로 사용할 편집기는 **VS Code**지만 메모장부터 건드려보도록 합시다. **VS Code**에 대한 이야기는 나중에 다른 글을 통해서 하게 될 것 같습니다.

## 개발을 위한 폴더설정
아, 이 블로그의 모든 글은 윈도우를 기반으로 설명합니다. 제가 맥을 다룰 수 없기 때문에 맥 관련으론 설명할 수 없는 점 양해 부탁드립니다. 우리가 우선적으로 해야 하는 설정은 파일의 확장자가 보이게끔 폴더 설정을 건드리는 겁니다.

![폴더 및 검색 옵션 변경을 클릭한다.](https://drive.google.com/uc?export=view&id=1NjHID_LQczRaiQ2dcjvDbjx7BYS-mkIm)

윈도우 탐색기를 열어봅시다. 상단의 메뉴바에서 파일을 클릭하고 **폴더 및 검색 옵션 변경**을 클릭합니다.

![보기 탭을 클릭한다.](https://drive.google.com/uc?export=view&id=12ZY-B1duURh3aQJIOtZhtm2blPxDyHjW)

![스크롤을 내려서 숨김 파일 폴더 및 드라이브 표시를 체크하고, 알려진 파일 형식의 파일 확장명 숨기기의 체크를 해제한다.](https://drive.google.com/uc?export=view&id=10Ee5C4agtsUCuXkVsMHKhZjwacypsFaS)

그 다음에는 **보기** 탭을 클릭하고 스크롤을 내려봅시다. 그리고 이미지에서처럼 **숨김 파일 폴더 및 드라이브 표시**를 체크하고, **알려진 파일 형식의 파일 확장명 숨기기**의 체크를 해제합니다. 이렇게 하면 숨겨진 파일들은 투명하게 보이게 되고, 파일의 확장자들도 보이게 됩니다. 이렇게 하면 기본적인 폴더 설정은 끝난겁니다.

이 부분은 개인의 기호에 따라 다르긴 하지만 코드를 작성하는 개발자들은 파일의 확장자가 보이는 게 더 편할겁니다.

## 개발폴더 만들기
이제는 개발폴더를 만들어야겠습니다. 원하는 경로에 폴더 하나를 만듭니다. **웬만하면 경로에 한글이 없는 것이 개발할 때에 정신건강에 좋습니다.** 폴더의 경로에 한글이 들어가면 혹시라도 오류가 날 수 있기 때문에 영어만 있는 경로를 추천합니다.

우리가 만든 이 폴더는 우리의 전용 개발폴더가 될 겁니다. 이 안에 우리의 다양한 프로젝트를 넣어두면 되는 것이죠. 앞으로도 사용할 폴더이기 때문에 잘 기억해두도록 합시다. 저같은 경우는 아래와 같은 식으로 분류를 해두고 프로젝트들을 관리하고 있습니다.

![개발폴더는 자유롭게 관리하면 된다.](https://drive.google.com/uc?export=view&id=1uWoZB7EcFsGHnq-0fEXruCUIHcg9BNyK)

우리가 만든 폴더는 컨테이너 같은 겁니다. 이 폴더의 안에 각각의 프로젝트 폴더가 생기겠죠. 저는 WebTuto라는 이름의 폴더를 이번 HTML 가이드의 폴더로 결정했습니다. 여러분은 원하는 이름으로 아무거나 만들어주시면 됩니다. 단, 위에서 말한 것처럼 한글은 배제하고 폴더 이름을 정하는 것이 좋습니다.

## 메모장을 사용할 때의 주의사항
오래 사용할 것은 아니지만 적어도 파일 하나 정도는 메모장으로 만들어볼 겁니다. 이번 글에서는 쓰지 않지만요. 지금은 간단하게 메모장으로 파일을 저장할 때에 주의 사항에 대해서 이야기할까 합니다.

메모장은 txt 파일을 관리하는 것에 특화되어있기 때문에 저장을 하면 기본적으로 txt 파일로 저장이 됩니다. 우리가 만들 파일은 html 파일이기 때문에 파일 형식은 모든 파일로 설정합니다. 인코딩은 중요한데 **UTF-8**로 설정하면 됩니다.

HTML 파일의 확장자는 html입니다. CSS나 자바스크립트도 메모장으로 코딩할 수 있습니다. 아무튼 아직은 파일을 만들 것은 아니지만 아래의 이미지처럼 설정해두고 저장하면 되겠습니다.

![인코딩과 파일 형식 설정하기.](https://drive.google.com/uc?export=view&id=1dM86G-OkHSTSWKTzvuXTiKZ0YZRk0F4S)

<Line />

이번 글에서는 개발환경에 대해서 알아봤습니다. 다시 개발환경에 대해 설명하자면 파일을 모아놓는 폴더부터 시작해서 편집기까지 모두를 아울러 부르는 말입니다. 어떤 프로그래밍 언어를 배우더라도 개발환경은 갖추고 시작합니다. HTML은 개발환경 갖추기가 아주 간단한 편에 속한다는 것만 알아두면 좋겠습니다.

처음에는 메모장을 사용하다가 다른 편집기를 사용할건데 다른 설정은 그대로 두면 되고 편집기만 바꾸면 됩니다. 그럼 개발폴더도 만들었고 메모장도 준비했으니 코딩을 할 준비가 확실히 되었습니다. 그럼 다음 글에서는 **HTML의 기본적인 구조**에 대해서 알아보도록 합시다.

우리는 저번 글들을 통해서 HTML에 대해 알게되었고 문법을 알아보았습니다. 태그라는 것은 무엇이며 태그의 특징은 무엇이고, 태그끼리의 관계는 또 어떤지도 알아봤습니다. 기본적인 사전 지식은 다 알아본 셈이고, 이게부터는 코딩을 본격적으로 시작해야 할 때가 왔죠. 하지만 코딩을 본격적으로 시작하기에 앞서 알고 넘어가야 할 것이 있습니다. 그게 무엇인가 하면 이번 글의 주제인 개발환경입니다. 개발환경은 개발자가 개발을 하기 위해 갖춰야 하는 기본적인 조건입니다. 프로젝트들이 모여있는 폴더부터 시작해서 편집기까지 모두를 아울러 부르는 말이 개발환경입니다.

“ 개발환경 ” 태그 관련 포스트 1건

웹 개발을 위한 HTML 가이드 5편 - 개발환경 구축하기