1. aboutweb

웹의 동작 원리(클라이언트·서버·HTTP), 도메인과 DNS, URL 구조, HTML·CSS·JS 의 역할 분담을 소개한다.

1. 웹서비스란?

Info: 💡 웹서비스 = 인터넷을 통해 주고받는 정보·기능의 집합. 우리가 매일 쓰는 네이버, 유튜브, 인스타그램이 모두 웹서비스.

🐶 HTML 은 웹서비스의 근간이 되는 언어입니다.

웹은 두 주체가 만나는 곳입니다.

구분	설명
클라이언트(Client)	정보를 요청 하는 쪽. 우리가 쓰는 웹브라우저(Chrome, Edge, Safari 등).
서버(Server)	정보를 가지고 있다가 요청을 받으면 응답 하는 쪽. 24시간 켜져 있는 원격 컴퓨터.

브라우저가 서버에게 "이 페이지 줘" 라고 요청(Request) 하면, 서버는 HTML / CSS / JS / 이미지 파일을 응답(Response) 으로 보내줍니다. 이 약속된 대화 규칙이 HTTP 입니다.

[ 브라우저 ]  --- 요청 (HTTP) --->  [ 서버 ]
[ 브라우저 ]  <-- 응답 (HTML 등) -- [ 서버 ]

2. 도메인이란?

Info: 📢 숫자로 된 컴퓨터 주소를 사람이 쉽게 기억할 수 있게 문자로 바꾼 것.

세상의 모든 컴퓨터는 IP 주소 (예: 142.250.196.110) 라는 숫자 주소를 가집니다. 사람이 외우기 어려우니 도메인 (예: google.com) 이라는 문자 별칭을 붙입니다.

브라우저에 google.com 을 입력하면 DNS (Domain Name System) 가 그 도메인을 IP 주소로 변환해서 서버를 찾아갑니다.

내아이디.dothome.co.kr 은 나의 홈페이지 도메인

출처: 한국인터넷정보센터

3. URL 의 구조

Info: 💡 URL = 웹 자원의 위치를 가리키는 주소.

https://www.coalacoding.com/docs/html-css/html/01-aboutweb
└─┬─┘   └────────┬────────┘└──────────────┬──────────────┘
프로토콜        도메인                     경로(path)

구성요소	설명	예
프로토콜	어떤 규칙으로 통신할지	`http`, `https`(보안), `ftp`
도메인	어느 서버로 갈지	`google.com`
경로	그 서버 안 어떤 자원인지	`/docs/html-css/html/01-aboutweb`

Info: 👁️‍🗨️ https 는 http 에 암호화(SSL/TLS)를 더한 버전입니다. 2026년 현재 거의 모든 사이트가 https 를 씁니다.

4. HTML 이란?

Info: 👁️‍🗨️ HTML = HyperText Markup Language 하이퍼텍스트 를 마크업 하는 언어

용어를 풀어보면:

하이퍼텍스트(Hypertext): 다른 문서로 건너뛸 수 있는 텍스트. 즉 링크가 걸린 문서.
마크업(Markup): 텍스트에 "이건 제목, 이건 단락" 같이 역할 표시 를 해두는 것.

즉 HTML 은 링크가 걸린 문서를 의미·구조 단위로 짜는 언어 입니다. 글의 의미와 구조 를 정의할 뿐, 화면 디자인 은 담당하지 않습니다 — 디자인은 다음 단원의 CSS 가 합니다.

1. 역할 분담

언어	담당	비유
HTML	의미·구조 (제목·단락·목록·링크 등)	건물의 뼈대
CSS	디자인 (색·크기·여백·배치)	건물의 외관·인테리어
JavaScript	동작 (클릭·애니메이션·통신)	건물의 전기·기계 시스템

2. HTML 첫 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>안녕 HTML</title>
</head>
<body>
    <h1>처음 만드는 HTML</h1>
    <p>이 문장이 화면에 보입니다.</p>
</body>
</html>

태그	의미
`<!DOCTYPE html>`	이 문서는 HTML5 표준을 따른다고 선언
`<html>`	문서의 뿌리(root)
`<head>`	메타정보(브라우저 탭 제목, 인코딩 등) — 화면에는 안 보임
`<body>`	화면에 보이는 본문 영역
`<h1>`	가장 중요한 제목(heading)
`<p>`	단락(paragraph)

5. 정리

웹은 클라이언트(브라우저) 와 서버 가 HTTP 로 대화하는 시스템이다.
도메인 은 외우기 쉬운 문자 주소이고, 실제 통신은 IP 주소 로 이뤄진다 (DNS 가 둘을 연결).
URL 은 프로토콜 + 도메인 + 경로 로 구성된 자원의 주소다.
HTML 은 문서의 의미와 구조 를 표시하는 언어이며, 디자인은 CSS, 동작은 JavaScript 가 맡는다.