HTML 공부를 시작하려면 먼저 코드를 작성하고 실행할 수 있는 환경이 필요합니다.
거창한 프로그램이 필요한 것은 아닙니다.
처음에는 다음 세 가지만 준비하면 충분합니다.
- 코드를 작성할 편집기
- HTML 파일
- 결과를 확인할 브라우저
이번 글에서는 HTML 공부를 시작하기 전에 필요한 개발 환경을 차근차근 정리해보겠습니다.
이 글에서 다루는 내용
- VS Code 설치하기
- HTML 파일 만들기
- 브라우저에서 HTML 실행하기
- Live Server 사용하기
VS Code 설치하기
HTML 코드를 작성하려면 코드 편집기가 필요합니다.
여기서는 많이 사용하는 VS Code를 사용합니다.
VS Code는 Visual Studio Code의 줄임말입니다.
HTML, CSS, JavaScript를 작성할 때 많이 사용하는 무료 코드 편집기입니다.
설치 후에는 VS Code를 실행합니다.
처음 실행하면 복잡해 보일 수 있지만, 처음에는 파일을 만들고 코드를 작성하는 정도만 알면 됩니다.
작업 폴더 만들기
HTML 파일을 만들기 전에 작업할 폴더를 하나 만들어줍니다.
예를 들어 바탕화면에 다음과 같은 폴더를 만들 수 있습니다.
html-study
이 폴더는 HTML 공부용 파일을 모아두는 공간입니다.
폴더를 만든 뒤 VS Code에서 해당 폴더를 열어줍니다.
VS Code에서 폴더를 여는 방법은 다음과 같습니다.
File → Open Folder → html-study 선택
Windows에서는 파일 → 폴더 열기로 보일 수 있습니다.
HTML 파일 만들기
작업 폴더를 열었다면 HTML 파일을 하나 만들어줍니다.
파일 이름은 보통 다음처럼 작성합니다.
index.html
여기서 중요한 부분은 .html입니다.
파일 이름이 index.html이어야 브라우저가 이 파일을 HTML 문서로 인식합니다.
만약 index.txt처럼 만들면 일반 텍스트 파일로 인식될 수 있습니다.
첫 HTML 코드 작성하기
index.html 파일을 만들었다면 아래 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 HTML</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>HTML 공부를 시작했습니다.</p>
</body>
</html>
처음에는 코드가 길어 보일 수 있습니다.
하지만 지금은 전부 이해하지 않아도 괜찮습니다.
중요한 것은 body 안에 작성한 내용이 브라우저 화면에 보인다는 점입니다.
<body>
<h1>안녕하세요</h1>
<p>HTML 공부를 시작했습니다.</p>
</body>
위 코드에서 h1은 큰 제목이고, p는 문단입니다.
브라우저에서 실행하기
HTML 파일은 브라우저에서 실행할 수 있습니다.
가장 쉬운 방법은 index.html 파일을 더블 클릭하는 것입니다.
그러면 크롬, 엣지, 사파리 같은 브라우저에서 HTML 파일이 열립니다.
브라우저에 다음 내용이 보이면 성공입니다.
안녕하세요
HTML 공부를 시작했습니다.
HTML은 서버가 없어도 기본적인 화면 확인은 가능합니다.
그래서 처음 공부할 때는 파일을 만들고 브라우저에서 바로 열어보면 됩니다.
코드를 수정한 뒤 확인하기
HTML 코드를 수정했다면 저장을 해야 합니다.
저장 단축키는 다음과 같습니다.
Windows: Ctrl + S
Mac: Command + S
저장한 뒤 브라우저에서 새로고침을 누르면 수정된 내용이 반영됩니다.
예를 들어 문장을 이렇게 바꿔보겠습니다.
<p>HTML 파일을 브라우저에서 실행했습니다.</p>
저장하고 새로고침하면 브라우저 화면의 문장도 바뀝니다.
이 과정이 HTML 공부의 기본 흐름입니다.
코드 작성 → 저장 → 브라우저 새로고침 → 결과 확인
Live Server 사용하기
HTML을 공부하다 보면 매번 브라우저를 새로고침하는 것이 귀찮을 수 있습니다.
이때 VS Code 확장 프로그램인 Live Server를 사용하면 편합니다.
Live Server는 HTML 파일을 브라우저에서 실행해주고, 코드를 저장하면 화면을 자동으로 새로고침해주는 도구입니다.
Live Server 설치하기
VS Code 왼쪽 메뉴에서 확장 프로그램 아이콘을 클릭합니다.
그다음 검색창에 다음을 입력합니다.
Live Server
검색 결과에서 Live Server를 선택하고 설치합니다.
설치가 끝나면 index.html 파일을 열고 마우스 오른쪽 버튼을 클릭합니다.
그다음 아래 메뉴를 선택합니다.
Open with Live Server
그러면 브라우저가 자동으로 열리면서 HTML 파일이 실행됩니다.
Live Server를 사용하는 이유
Live Server를 사용하면 다음과 같은 장점이 있습니다.
- 브라우저 실행이 편합니다.
- 저장하면 화면이 자동으로 갱신됩니다.
- 실제 웹 서버에서 보는 것과 비슷한 환경으로 확인할 수 있습니다.
- HTML, CSS, JavaScript를 함께 연습하기 좋습니다.
처음에는 더블 클릭으로 HTML 파일을 열어도 됩니다.
하지만 CSS와 JavaScript까지 공부할 예정이라면 Live Server를 사용하는 것이 좋습니다.
자주 생기는 실수
HTML을 처음 실행할 때 자주 생기는 실수가 있습니다.
파일 확장자를 잘못 만든 경우
파일 이름이 아래처럼 되어 있으면 HTML 파일이 아닐 수 있습니다.
index.html.txt
Windows에서는 확장자가 숨겨져 있어서 이런 실수가 생기기도 합니다.
파일 이름은 반드시 다음처럼 끝나야 합니다.
index.html
저장하지 않고 브라우저를 새로고침한 경우
코드를 수정했는데 화면이 바뀌지 않는다면 저장을 했는지 먼저 확인해야 합니다.
코드 수정 → 저장 → 브라우저 확인
이 순서를 기억하면 됩니다.
Live Server 메뉴가 보이지 않는 경우
Live Server를 설치했는데 메뉴가 보이지 않는다면 다음을 확인합니다.
- VS Code를 다시 실행했는지
index.html파일을 열고 우클릭했는지- Live Server 확장이 제대로 설치되었는지
보통은 VS Code를 한 번 껐다 켜면 해결되는 경우가 많습니다.
정리
HTML 공부를 시작하기 위해서는 복잡한 준비가 필요하지 않습니다.
처음에는 다음 순서만 따라 하면 됩니다.
- VS Code를 설치합니다.
- 작업 폴더를 만듭니다.
index.html파일을 만듭니다.- HTML 코드를 작성합니다.
- 브라우저에서 실행합니다.
- 필요하면 Live Server를 설치해서 사용합니다.
HTML 공부의 기본 흐름은 단순합니다.
파일 만들기 → 코드 작성하기 → 저장하기 → 브라우저에서 확인하기
이 흐름에 익숙해지면 이후 CSS와 JavaScript를 배울 때도 훨씬 편해집니다.