웹 기초

처음 몇 달의 프론트엔드 작업 가운데 절반은 DevTools 사용법을 익히는 시간이라 해도 과장이 아닙니다. 콘솔에 값을 찍고, 네트워크 요청을 검사하고, 스타일을 즉석에서 바꿔 보고, 모바일 화면을 시뮬레이션 하는 모든 작업이 한 패널 안에서. 이 글은 DevTools 의 출자 · 핵심 패널 · 자주 쓰는 디버깅 흐름.

"브라우저에 google.com 을 치면 무슨 일이 일어나는가" 는 면접 단골 질문. 그 짧은 한 줄 안에 OSI 일곱 계층 · IP · DNS · TCP · TLS · HTTP 가 차례로 등장합니다. 이 글은 입문자가 큰 그림을 한 번 잡을 수 있도록 각 계층과 핵심 프로토콜.

브라우저 주소창의 한 줄은 보기보다 정밀한 구조를 가집니다. 어떤 자원에 어떻게 접근할지를 표현하는 작은 문법. 이 글은 URL 의 각 부분 · 인코딩 규칙 · URL 과 URI 와 URN 의 차이 · 절대 / 상대 경로 · 데이터 URL 과 blob URL.

브라우저가 서버에 무엇을 요청하고, 서버가 어떻게 답하는가. 이 단순한 질문 위에 웹의 거의 모든 것이 얹혀 있습니다. 이 글은 HTTP 의 출자 · 메서드와 상태 코드 · 헤더 · REST 의 원래 의미 · HTTP/2 · 3 의 변화.

HTML 이 뼈대, CSS 가 모양이라면 JavaScript 는 동작. 버튼을 누르면 모달이 뜨고, 입력값을 검사하고, 서버에서 데이터를 받아 화면에 그리는 일이 모두 JS 의 영역. 이 글은 변수 · 자료형 · 함수 · 배열 / 객체 메서드 · 비동기 · 모듈 같은 입문에 자주 등장하는 항목.

HTML 이 무엇인지를 적는다면 CSS 는 어떻게 보이고 어떻게 배치될지를 적습니다. 색 · 크기 · 여백 · 정렬 · 반응형까지 화면의 시각적 결정 대부분이 CSS 의 영역. 이 글은 CSS 의 출자 · 박스 모델 · 레이아웃 도구 · 셀렉터 우선순위 · 단위와 미디어 쿼리 · 모던 CSS 의 흐름.

브라우저가 화면에 보여 주는 모든 것은 결국 텍스트 문서에서 출발합니다. 그 텍스트 문서의 형식이 HTML. 처음 배우는 사람이 가장 먼저 마주하는 언어이기도 하고, 다른 어떤 기술을 배우든 결국 다시 돌아오는 자리이기도 합니다. 이 글은 HTML 의 출자 · 문서 구조 · 자주 쓰는 요소 · 시맨틱 마크업 · 접근성…