부록 · 빠른 참조 모음
← 7부 | 목차
본문에서 배운 내용을 한자리에 모았습니다. 막힐 때 여기서 찾아보세요.
A. 전체 파이프라인 한눈에
flowchart LR
U["주소 입력"]:::user
DNS["① DNS<br/>이름→주소"]:::net
TCP["② 연결<br/>TCP/TLS"]:::net
REQ["③ 요청<br/>HTTP"]:::net
SRV["④ 서버 처리"]:::server
RES["⑤ 응답<br/>HTML·CSS·JS"]:::net
REN["⑥ 렌더링<br/>DOM→화면"]:::render
U --> DNS --> TCP --> REQ --> SRV --> RES --> REN
REN -.->|추가 파일| REQ
classDef user fill:#fff3b0,stroke:#d4a017,color:#000
classDef net fill:#cfe8ff,stroke:#2b6cb0,color:#000
classDef server fill:#e9d8fd,stroke:#6b46c1,color:#000
classDef render fill:#c6f6d5,stroke:#276749,color:#000
B. 용어집 (가나다순)
| 용어 | 한 줄 뜻 | 처음 등장 |
|---|
| 객체 모델(DOM) | HTML을 브라우저가 조립한 '살아있는 나무'. JS가 만짐 | 6부 |
| 도메인(domain) | 사람이 읽는 사이트 이름 (예: example.com) | 2부 |
| 레이아웃(layout) | 각 요소의 위치·크기를 계산하는 단계 | 6부 |
| 렌더링(rendering) | 텍스트 설명서를 화면 픽셀로 그리는 일 | 6부 |
| 리플로(reflow) | 배치가 바뀌어 위치를 다시 계산하는 것 | 6부 |
| 메서드(method) | HTTP 요청의 동사 (GET·POST 등) | 3부 |
| 백엔드(backend) | 서버 측에서 도는 부분 (데이터·보안) | 6부 |
| 변수(variable) | 값을 담는 이름표 붙은 상자 | 5부 |
| 상태 코드(status code) | 요청 결과를 알리는 숫자 (200·404 등) | 3부 |
| 서버(server) | 요청에 응답하는, 항상 켜진 컴퓨터 | 1부 |
| 선택자(selector) | CSS에서 꾸밀 대상을 고르는 표현 | 5부 |
| 세션(session) | 여러 요청을 한 '방문'으로 묶은 것 | 3부 |
| 시맨틱 태그 | 의미를 담은 HTML 태그 (header·nav 등) | 4부 |
| 요소(element) | 여는/닫는 태그가 감싼 HTML 한 덩어리 | 4부 |
| 이벤트(event) | 클릭·입력 등 사용자 행동(사건) | 5부 |
| 캐시(cache) | 한 번 구한 답을 가까이 두고 재사용 | 2·3부 |
| 쿠키(cookie) | 서버가 준 신원 표, 요청마다 자동 첨부 | 3부 |
| 클라이언트(client) | 요청하는 쪽, 보통 브라우저 | 1부 |
| 프런트엔드(frontend) | 브라우저(클라이언트) 측에서 도는 부분 | 6부 |
| 헤더(header) | 요청·응답에 붙는 부가 정보 메모 | 3부 |
| DNS | 이름을 IP 주소로 바꾸는 인터넷 전화번호부 | 2부 |
| HTML | 페이지의 구조·내용을 적는 마크업 언어 | 4부 |
| HTTP | 클라이언트·서버의 통신 규칙 | 3부 |
| HTTPS | 암호화된 안전한 HTTP | 3부 |
| IP 주소 | 인터넷에서 컴퓨터를 가리키는 번호 | 2부 |
| URL | 자원의 위치를 적은 웹 주소 | 1부 |
C. HTTP 상태 코드 빠른 참조
| 코드 | 뜻 |
|---|
| 200 OK | 성공 |
| 301 / 302 | 다른 주소로 이동 (영구 / 임시) |
| 304 Not Modified | 안 바뀜 → 캐시 쓰라 |
| 400 Bad Request | 요청 형식이 잘못됨 |
| 401 / 403 | 인증 필요 / 권한 없음 |
| 404 Not Found | 그런 자원 없음 |
| 500 Internal Server Error | 서버 내부 오류 |
| 503 Service Unavailable | 서버가 잠시 불가 (과부하·점검) |
기억법: 4로 시작하면 내(요청) 잘못, 5로 시작하면 서버 잘못.
D. 증상 → 원인 진단표
| 증상 | 흔한 원인 | 먼저 볼 곳 |
|---|
| 사이트를 찾을 수 없음 | 도메인 오타·DNS | 주소 다시 확인 |
| 404 | 경로가 틀림·페이지 없음 | URL 경로 |
| 403 | 권한·로그인 필요 | 로그인 상태 |
| 500·503 | 서버 문제 (내 잘못 아님) | 잠시 후 재시도 |
글자 깨짐(���) | 인코딩 (<meta charset="UTF-8"> 누락) | HTML head |
| 스타일 안 먹음 | CSS 경로·선택자 오류 | 개발자도구 Elements |
| 버튼 안 눌림 | JS 오류 | 개발자도구 Console |
| 이미지 안 뜸 | src 경로 오타 | 개발자도구 Network |
만능 첫걸음: F12 → Console(빨간 오류 글씨)과 Network(빨간 실패 요청)를 확인.
E. 새 페이지 만들 때 체크리스트
- [ ]
<!DOCTYPE html>로 시작했는가
- [ ]
<meta charset="UTF-8">을 넣어 한글 깨짐을 막았는가
- [ ]
<title>로 탭 제목을 정했는가
- [ ] 이미지에
alt 설명을 달았는가 (접근성)
- [ ] 큰 구획에 시맨틱 태그(
header·main·footer)를 썼는가
- [ ] CSS·JS 파일 경로가 맞는가
- [ ]
<script>를 <body> 끝이나 defer로 두었는가
- [ ] 휴대폰·작은 화면에서도 보이는가
- [ ] (공개 시) HTTPS로 제공되는가
F. 더 배울 때 신뢰할 출처
- MDN Web Docs (developer.mozilla.org) — HTML·CSS·JS 표준 레퍼런스. 한국어 문서 다수. 가장 권장.
- 브라우저 개발자 도구(F12) — 직접 만지며 배우는 최고의 도구.
- 표준 문서가 헷갈릴 땐 "MDN + 키워드"로 검색하는 습관.
특정 강의·책·제품을 정답으로 권하지 않습니다. 기술은 빠르게 바뀌므로, 위 표준 출처에서 현재 시점의 최신 내용을 확인하는 습관이 가장 오래갑니다.
← 7부로 | 목차로 돌아가기