이번 강에서 배울 것
- 인터넷과 웹의 차이 — URL을 입력하면 무슨 일이 생기나
- 클라이언트(브라우저)와 서버의 역할 분리
- HTML·CSS·JavaScript 각각의 역할
- 웹 개발 도구 세팅 — VS Code + Live Server 설치
1. 인터넷 vs 웹 — 다른 개념이다
많은 사람이 "인터넷"과 "웹"을 같은 말로 쓰지만, 엄밀히 다릅니다.
| 용어 | 의미 | 예시 |
|---|---|---|
| 인터넷(Internet) | 전 세계 컴퓨터를 연결하는 물리적 네트워크 인프라 | 이메일, 파일 전송, 게임 서버 |
| 웹(Web) | 인터넷 위에서 동작하는 문서·서비스 시스템 (HTTP 프로토콜) | 네이버, 유튜브, 쇼핑몰 |
웹은 인터넷이라는 도로 위를 달리는 "자동차" 중 하나라고 생각하면 됩니다. 이메일도, 게임 서버도 인터넷을 쓰지만 웹은 아닙니다.
2. URL을 입력하면 생기는 일 — 요청과 응답
브라우저 주소창에 https://naver.com을 치고 Enter를 누르면 내부적으로 다음 일이 일어납니다.
① 브라우저(클라이언트)가 DNS 서버에 질문
"naver.com 의 IP 주소가 뭐야?"
→ DNS 서버 응답: "125.209.222.141"
② 브라우저가 네이버 서버에 요청(Request) 전송
GET / HTTP/1.1
Host: naver.com
③ 네이버 서버가 응답(Response) 전송
HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html>...
④ 브라우저가 받은 HTML·CSS·JS를 해석해 화면에 그림(렌더링)이 과정 전체를 HTTP 통신이라고 부릅니다. 브라우저는 서버에서 받은 파일을 해석해 우리가 보는 예쁜 화면으로 변환하는 역할을 합니다.
3. HTML · CSS · JavaScript — 세 가지 언어의 역할
웹페이지는 세 가지 언어로 이루어져 있습니다. 집을 지을 때의 비유로 이해해 보세요.
| 언어 | 역할 | 집 비유 |
|---|---|---|
| HTML | 구조와 내용 (제목, 문단, 이미지, 버튼) | 뼈대·벽·문 |
| CSS | 디자인 (색상, 크기, 간격, 폰트) | 페인트·인테리어 |
| JavaScript | 동작 (버튼 클릭, 애니메이션, 데이터 처리) | 전기·수도·자동문 |
이 강의에서는 HTML과 CSS를 집중적으로 배웁니다. JavaScript는 별도 시리즈에서 다룹니다.
4. 개발 환경 세팅 — VS Code + Live Server
코드를 작성하고 바로 브라우저에서 확인하려면 두 가지 도구가 필요합니다.
설치 순서:
① VS Code 다운로드
→ code.visualstudio.com 접속 → Download for Windows/Mac
② Live Server 확장 설치
→ VS Code 실행 → 왼쪽 퍼즐 아이콘(Extensions) 클릭
→ "Live Server" 검색 → Ritwick Dey 제작 확장 Install
③ 첫 파일 열기
→ 바탕화면에 "my-web" 폴더 생성
→ VS Code에서 File → Open Folder → my-web 선택
→ 새 파일 index.html 생성
④ Live Server 실행
→ index.html 우클릭 → "Open with Live Server"
→ 브라우저에 http://127.0.0.1:5500/index.html 자동 열림
→ 코드 저장(Ctrl+S)할 때마다 브라우저 자동 새로고침!5. 브라우저의 종류와 개발자 도구
웹 개발에는 Chrome을 강력 추천합니다. 개발자 도구(DevTools)가 가장 강력합니다.
개발자 도구 여는 방법:
Windows: F12 또는 Ctrl + Shift + I
Mac: Cmd + Option + I
주요 탭 설명:
Elements — HTML 구조와 CSS를 실시간으로 확인·수정
Console — JavaScript 오류 메시지 확인
Network — 파일 로딩 속도와 HTTP 요청 확인
Sources — JS 코드 디버깅
팁: Elements 탭에서 원하는 요소를 클릭하면
해당 CSS 속성이 오른쪽에 표시됩니다.
값을 더블클릭해서 즉석 수정도 가능!6. 첫 번째 HTML 파일 작성해보기
지금 바로 따라해 보세요. VS Code에서 index.html을 열고 아래 코드를 입력합니다.
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것이 나의 첫 번째 웹페이지입니다.</p>
</body>
</html>저장(Ctrl+S) 후 Live Server로 열면 브라우저에 "안녕하세요!"가 표시됩니다. 축하합니다 — 첫 웹페이지를 만들었습니다!
1강 핵심 요약
- 웹은 인터넷 위에서 HTTP로 동작하는 문서 시스템
- 브라우저(클라이언트)가 서버에 요청 → 서버가 HTML 파일 응답 → 브라우저가 렌더링
- HTML = 구조 / CSS = 디자인 / JS = 동작
- VS Code + Live Server로 코드 저장 즉시 브라우저 미리보기
- 다음 강: HTML 기본 구조 — DOCTYPE, head, body 완전 분석
관련 검색어 · 웹동작원리, HTTP요청응답, HTML CSS JS차이, VSCode설치, LiveServer, 웹개발입문, 브라우저렌더링
Advertisement