이전 시간에는 HTML이 무엇인지, 그리고 웹페이지가 어떻게 만들어지는지 배웠습니다.
이번에는 실제로 코드를 작성할 수 있는 환경을 준비하고,
나만의 첫 웹페이지를 완성해 보겠습니다.
컴퓨터만 있으면 누구나 만들 수 있으니,
지금 바로 따라 해보세요!
[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어
혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —이 모든 사이트의 시작은 바로 HTML이라는 언어입니
ilsandaddy.tistory.com
1. 코딩을 위한 준비물
HTML은 아주 가벼운 언어라서, 별도의 프로그램이 없어도 메모장으로 작성할 수 있습니다.
하지만 더 편하고 깔끔하게 작업하려면 전문 에디터를 쓰는 게 좋아요.
가장 많이 쓰이는 도구가 바로 Visual Studio Code (VS Code)입니다.
전 세계 개발자들이 사용하는 무료 프로그램이에요.
2. VS Code 설치 방법
① 다운로드
- 크롬에서 https://code.visualstudio.com/ 접속
- 메인 화면의 “Download for Windows” 버튼 클릭
② 설치
다운로드된 파일(VSCodeSetup.exe)을 실행
‘다음 → 다음 → 설치’ 순서로 진행
설치 완료 후 Visual Studio Code 실행
팁: 설치 중 “PATH에 추가(Add to PATH)” 옵션이 있다면 체크해 두세요.
나중에 명령어로 실행할 때 유용합니다.
3. 새 HTML 파일 만들기
VS Code를 처음 열면 약간 낯설게 느껴질 수 있어요.
하지만 아래 단계를 그대로 따라 하면 아주 간단합니다!
① 왼쪽 상단 메뉴에서 File → New File (새 파일) 클릭
② 빈 파일에 아래 코드를 입력
③ Ctrl + S 눌러 저장
④ 파일 이름은 index.html 로 저장하세요.
저장 위치는 바탕화면(Desktop)에 폴더 추가 후 저장합니다.
4. 브라우저에서 실행하기
이제 만든 파일을 실제 웹페이지처럼 띄워볼까요?
① 바탕화면에 폴더 안에 index.html 파일을 더블클릭
② 자동으로 Chrome(또는 Edge)이 열리며, 화면에 다음 문장이 나타납니다.
안녕하세요!
이건 제가 VS Code로 만든 첫 HTML 파일이에요.
축하합니다!
이게 바로 “나만의 첫 웹페이지”예요.
5. 코드 한 줄씩 이해하기
지금 작성한 코드가 단순해 보여도, 이미 웹의 기본 구조를 모두 포함하고 있습니다.
| <!DOCTYPE html> | 이 문서가 HTML5 버전임을 알림 |
| <html> | HTML 문서의 시작 |
| <head> | 웹페이지의 제목이나 정보를 담는 부분 |
| <title> | 브라우저 탭에 표시되는 제목 |
| <body> | 실제 화면에 보여지는 내용 |
| <h1> | 가장 큰 제목 (Heading 1) |
| <p> | 문단(Paragraph) |
즉, <html>은 전체 문서의 틀,
<head>는 보이지 않는 정보,
<body>는 화면에 표시되는 부분이에요.
6. VS Code의 꿀기능 3가지
- 자동완성 (Auto Complete)
→ <p>까지만 입력해도 자동으로 </p> 닫는 태그가 생겨요. - 색상 구분 (Syntax Highlighting)
→ 태그, 속성, 텍스트가 각각 다른 색으로 구분되어 보기 쉽습니다. - Live Server 확장팩
→ “HTML을 저장할 때마다 새로고침 없이 자동으로 반영”됩니다.
💡 Live Server 설치 방법
- 왼쪽 메뉴에서 확장(Extensions) 아이콘(네모 4개 모양) 클릭
- 검색창에 Live Server 입력
- “Install” 버튼 클릭
- 설치 후 HTML 파일 우클릭 → “Open with Live Server”
이제 코드 수정하면 자동으로 웹페이지가 즉시 새로고침돼요!
7. 정리하며 — 개발 환경 준비 완료!
이제 여러분은 HTML을 작성할 수 있는 환경을 갖추었습니다.
VS Code에서 새 파일을 만들고, HTML 문법을 직접 입력하고,
브라우저에서 결과를 확인하는 일련의 과정을 직접 경험했어요.
이건 단순한 연습이 아니라,
모든 웹개발의 시작점이에요.
다음 시간에는 HTML의 가장 기본 단위인
“태그(Tag)”를 본격적으로 배워볼 거예요.
제목, 문단, 줄바꿈, 강조, 링크 등을 직접 코드로 만들어보면서
진짜 ‘웹문서’의 구조를 완성하게 됩니다.
코딩이란? HTML 이란 무엇인가?
컴퓨터가 이해할 수 있는 프로그래밍 언어를 이용해서 컴퓨터에게 특정 작업을 지시하고 명령을 내리는 행위로,이를 통해 웹사이트, 애플리케이션, 게임 등 다양한 소프트웨어를 만드는 과정입
ilsandaddy.tistory.com
'CODING' 카테고리의 다른 글
| [HTML 시리즈 5] 링크(<a>)와 이미지(<img>) 삽입하기 (0) | 2025.10.18 |
|---|---|
| [HTML 시리즈 4] <h1>부터 <p>까지 — 텍스트를 구성하는 방법 (0) | 2025.10.18 |
| [HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기 (0) | 2025.10.18 |
| [HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어 (1) | 2025.10.13 |
| 코딩이란? HTML 이란 무엇인가? (1) | 2025.10.12 |
