HTML

1. 마크업(Markup Language)과 URL

박은서's avatar
박은서
Jan 02, 2026
1. 마크업(Markup Language)과 URL
Contents
1. 마크업 랭귀지(Markup Language)1️⃣ 마크업 랭귀지란?2️⃣ 마크업 랭귀지의 핵심 개념3️⃣ 왜 ‘마크업(mark up)’일까?4️⃣ 마크업 랭귀지의 기본 구조5️⃣ 대표적인 마크업 랭귀지들6️⃣ 마크업 랭귀지의 공통 특징7️⃣ 마크업 vs 프로그래밍 언어 차이8️⃣ 마크업 랭귀지가 중요한 이유 ⭐9️⃣ 좋은 마크업 vs 나쁜 마크업2. URL(Uniform Resource Locator)1️⃣ URL이란?2️⃣ URL의 전체 구조 (아주 중요 ⭐)3️⃣ URL과 웹 개발의 관계3. 웹 서버1️⃣ 웹 서버에서의 요청-응답 처리 흐름(Stream 기반)2️⃣ 웹서버 = 반이중통신3️⃣ 웹서버 = 무상태(Stateless) 서버

1. 마크업 랭귀지(Markup Language)

1️⃣ 마크업 랭귀지란?

문서의 구조와 의미를 ‘표식(mark)’으로 표현하는 언어
“이건 제목이다”, “이건 문단이다”, “이건 강조다”를 태그 같은 기호로 표시하는 규칙

2️⃣ 마크업 랭귀지의 핵심 개념

❌ 프로그래밍 언어가 아니다
  • 계산 ❌
  • 조건문/반복문 ❌
  • 로직 ❌
➡️ 문서의 구조와 의미를 정의하는 언어

3️⃣ 왜 ‘마크업(mark up)’일까?

원래 출판/편집에서
  • 종이에 빨간 펜으로 표시(mark) 해서
  • “여기 제목”, “여기 강조”라고 지시
➡ 그 개념이 디지털 문서로 온 것

4️⃣ 마크업 랭귀지의 기본 구조

태그 기반
<p>문단</p>
  • <p> : 문단 시작
  • </p> : 문단 끝
➡️ 태그로 의미를 감싼다

5️⃣ 대표적인 마크업 랭귀지들

1) HTML (HyperText Markup Language)

<h1>제목</h1>
<p>내용</p>
  • 웹 문서 표준
  • 구조 + 의미 표현
  • 가장 대표적인 마크업 언어

2) XML (eXtensible Markup Language)

<book>
<title>책 제목</title>
<author>홍길동</author>
</book>
  • 데이터 구조 표현
  • 사용자 정의 태그 가능
  • 설정 파일, 데이터 교환에 사용

3) Markdown

# 제목
- 목록
**강조**
  • 간단한 문법
  • 읽기 쉬움
  • GitHub, 블로그에서 많이 사용

4) SVG (벡터 이미지 마크업)

<circle cx="50" cy="50" r="40" />
  • 이미지도 마크업으로 표현

6️⃣ 마크업 랭귀지의 공통 특징

특징
설명
구조 표현
문서의 계층
의미 부여
제목, 문단, 강조
사람이 읽기 쉬움
텍스트 기반
렌더링 대상
브라우저/파서

7️⃣ 마크업 vs 프로그래밍 언어 차이

구분
마크업
프로그래밍
목적
구조/의미
동작/로직
실행
❌
⭕
조건/반복
❌
⭕
대표
HTML
Java, JS
➡️ HTML + CSS + JS 조합으로 웹이 동작

8️⃣ 마크업 랭귀지가 중요한 이유 ⭐

1) 검색엔진(SEO)

  • 구조화된 문서 = 잘 이해됨

2) 접근성(A11y)

  • 스크린리더가 문서 이해

3) 유지보수

구조가 명확하면 수정 쉬움

9️⃣ 좋은 마크업 vs 나쁜 마크업

1) ❌ 나쁜 예

<div class="big bold">제목</div>

2) ⭕ 좋은 예

<h1>제목</h1>
👉 의미 있는 태그 사용 = 시맨틱 마크업
 

2. URL(Uniform Resource Locator)

1️⃣ URL이란?

인터넷에서 특정 자원(resource)의 ‘주소’
웹페이지, 이미지, 파일, API 등 어디에 무엇이 있는지 정확히 가리키는 표준 주소 체계
인터넷에서 자원의 위치와 접근 방법을 알려주는 주소
https://www.example.com:8080/products/list?id=10#review

2️⃣ URL의 전체 구조 (아주 중요 ⭐)

scheme://host:port/path?query#fragment
구성 요소
예시
설명
scheme
https
통신 방식
host
www.example.com
서버 주소
port
8080
서버 포트 (보통 생략)
path
/products/list
자원 위치
query
id=10
추가 데이터
fragment
review
페이지 내 위치

3️⃣ URL과 웹 개발의 관계

  • HTML <a href="URL">
  • <img src="URL">
  • API 요청 주소
  • 페이지 라우팅
➡️ 웹의 모든 이동은 URL로 이루어짐
 

3. 웹 서버

1️⃣ 웹 서버에서의 요청-응답 처리 흐름(Stream 기반)

1) 클라이언트 요청 단계

  • 클라이언트(브라우저) 가 웹 서버에 접속
  • TCP 연결(소켓) 생성
  • 서버와 스트림(Stream) 연결
클라이언트  ──(Stream)──▶  웹 서버

2) URL 요청 전송

  • 브라우저는 URL을 포함한 HTTP 요청 메시지를 전송
  • 이 요청은 문자열 형태로 서버에 전달됨
예
GET /index.html HTTP/1.1
Host: localhost

3) 서버에서 요청 읽기

  • 웹 서버는 클라이언트 소켓에 연결된 InputStream 획득
  • InputStream을 BufferedReader로 감싸서 요청을 읽음
BufferedReader br = new BufferedReader(new InputStreamReader(socket.getInputStream()));
  • 서버는 이 요청 문자열을 읽고 파싱(parse) 함
    • 요청 메서드 (GET)
    • 요청 URL (/index.html)
    • 프로토콜 (HTTP/1.1)

4) 요청 URL 분석 (파싱)

  • 요청 라인에서 URL 경로 추출
GET /index.html HTTP/1.1
        ↑
      요청 파일
  • URL에 해당하는 실제 파일 경로를 서버 내부에서 결정

5) 서버 파일 스트림 연결

  • 요청한 파일이 존재하면:
    • 파일에 대한 FileInputStream 생성
    • 다시 BufferedReader로 감싸서 파일 내용을 읽음
BufferedReader fileReader = new BufferedReader(new FileReader("index.html"));

6) 응답 데이터 생성

  • 서버는 다음을 순서대로 준비:
      1. HTTP 응답 헤더
      1. 파일 내용(문자열)
예:
HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

7) 클라이언트로 응답 전송

  • 서버는 소켓의 OutputStream 획득
  • OutputStream을 BufferedWriter로 감싸서 문자열 전송
BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(socket.getOutputStream()));
  • 응답 데이터를 문자열 형태로 클라이언트에 전송
  • flush() 호출 → 실제 전송
  • 클라이언트는 받은 HTML 문자열을 해석해서 웹브라우저에 그림으로 보여줌

8) 연결 종료

  • 응답 전송 완료 후:
    • 서버는 스트림 닫기
    • 소켓 닫기
    • 클라이언트와의 통신 종료
클라이언트  ◀──(Response)──  서버
                연결 종료

2️⃣ 웹서버 = 반이중통신

1) 반이중 통신이란?

한 번에 한 방향으로만 통신 가능한 방식
  • 동시에 보내기 + 받기 ❌
  • 번갈아가며 통신 ⭕

2) 웹 서버에서의 반이중 통신

웹 통신(HTTP)은 다음 순서로 동작함:
1. 클라이언트 → 서버 : 요청(Request)
2. 서버 → 클라이언트 : 응답(Response)
3. 통신 종료
👉 요청 중에는 응답 없음
👉 응답 중에는 요청 없음

3) 왜 웹은 반이중인가?

  • HTTP는 요청 → 응답 구조
  • 서버는 요청이 와야만 응답
  • 실시간 양방향 대화 구조가 아님
  • 다른 클라이언트의 요청을 계속 받아야 하기 때문에 부하 줄이기 위함

3️⃣ 웹서버 = 무상태(Stateless) 서버

1) 무상태(Stateless)의 의미

서버가 이전 요청의 상태(정보)를 기억하지 않는다
  • 각 요청은 완전히 독립적으로 처리
  • 이전 요청이 무엇이었는지 서버는 모름
  • 요청이 끝나면 연결 종료 + 상태 제거

2) 웹 요청 관점에서 본 무상태

예시 흐름
요청 1: 로그인 요청
요청 2: 게시글 요청
요청 3: 결제 요청
👉 서버 입장에서는:
요청 1 = 새로운 요청
요청 2 = 새로운 요청
요청 3 = 새로운 요청
➡ 같은 사용자라도 서버는 “연속된 사용자”로 인식하지 않음

3) 왜 웹 서버는 무상태인가?

① HTTP 프로토콜의 특성
  • HTTP는 Stateless 프로토콜
  • 요청(Request) ↔ 응답(Response) 단위 통신
  • 응답 후 연결 종료
② 확장성과 성능
  • 서버가 상태를 기억하지 않으면:
    • 서버 부하 감소
    • 여러 서버로 분산 처리 쉬움 (로드 밸런싱)
    • 장애 복구 쉬움

4) 상태 서버(Stateful)와 비교

구분
Stateless
Stateful
상태 저장
❌
⭕
이전 요청 기억
❌
⭕
서버 확장
쉬움
어려움
웹 서버
⭕
❌
게임 서버
❌
⭕

5) 문제점 ❌ (중요!)

무상태라서 생기는 문제:
  • 로그인 유지 불가
  • 장바구니 유지 불가
  • 사용자 식별 불가
서버: "너가 누군지 모르겠는데?"

6) 해결 방법: 상태를 “클라이언트 쪽”에 둔다 ⭐

① 쿠키(Cookie)
  • 클라이언트에 상태 저장
  • 매 요청마다 자동 전송
Cookie: userId=123
② 세션(Session)
  • 서버에 상태 저장
  • 클라이언트는 세션 ID만 보관
JSESSIONID=abcd1234
③ 토큰(JWT)
  • 상태 정보를 토큰에 담아서 클라이언트가 들고 다님
  • 서버는 검증만 함
 
 
클라이언트(브라우저)가 웹서버에 소켓 스트림(외부 네트워크이기 때문) 연결해서 파일을 URL로 요청(리퀘스트)
웹서버는 버퍼드리더로 클라이언트 요청 읽어서 URL 파싱(분석) → 파싱된 파일에 스트림 연결 → 버퍼드리더로 파일 내용을 읽어서 버퍼드라이트로 클라이언트에게 보내줌(문자열) 응답(리스펀스) → 통신 끊어버림
⚠️ 통신을 끊으면 → 웹서버는 무상태 서버(Stateless) : 통신을 끊은 이후에 클라이언트의 상태를 🚨기억하지 않는🚨 서버(서버에서 상태는 클라이언트의 상태를 말하는 것) → 이렇게 해야 힙이 적게 들고 부하가 줄어듦
브라우저가 받은건 HTML 문자열 → 이걸 해석해서 그림을 그림
필요한 걸 요청해서 받았으면 통신 유지할 필요 없음 → 반이중 통신
웹서버는 반이중 프로토콜로 만들어져 있음(웹서버는 다른 클라이언트의 요청을 계속 받아야 하기 때문에 부하 줄이기 위해 반이중 사용)
notion image
 
 
 
 
Share article