Week 1 · 웹이 작동하는 방식 Day 3 / 42

실전 코드 읽는 법 — 레이아웃 블록 찾기

이론 코드가 아닌, 실제 웹사이트의 복잡한 코드를 겁내지 않는 법

큰 덩어리부터, 한 줄씩 말고

수천 줄의 코드를 한 줄씩 읽으려 하면 누구나 압도당합니다. 하지만 지도를 볼 때 건물 하나하나가 아니라 "여기가 주거지역, 여기가 상업지역"으로 먼저 나누듯, 코드도 큰 블록 단위로 먼저 나누면 전체 그림이 잡힙니다.

1Body 내부 찾기 — 모든 화면 요소는 <body> 태그 안에 있습니다.

2큰 레이아웃 블록 식별 — 단순 태그명보다 div#wrap, div#container 같은 큰 외곽 박스를 먼저 확인합니다.

3반복되는 패턴 알아채기 — 카드 여러 개, 메뉴 항목 여러 개처럼 같은 모양이 여러 번 나오는 반복 블록을 눈에 익힙니다.

4주석으로 경계 표시 — 나만의 메모를 달아두면 나중에 수정할 위치를 바로 찾을 수 있습니다.

    <div id="container"> <!-- 레이아웃 블록 시작 -->

      <header>...</header>

      <main>...</main>

    </div> <!-- 레이아웃 블록 끝 -->

실제 웹사이트를 열어보면, 제목·날짜·글 목록처럼 페이지마다 값이 달라지는 자리가 반드시 있습니다. 지금은 "이런 자리가 존재한다"는 것만 알아두면 충분합니다 — 그 자리에 값이 정확히 어떻게, 언제 채워지는지는 Week 2에서 실습으로 다룹니다.

오늘은 "이 부분이 매번 똑같이 나오는 고정 텍스트인지, 아니면 글마다 달라지는 자리인지"를 구분하는 눈만 기르면 됩니다. 정확한 문법은 아직 몰라도 괜찮습니다.

단순히 찾는 것을 넘어, 각 영역이 어디서 시작해서 어디서 끝나는지 범위를 파악해보세요.

아무 웹사이트나 골라 <header> 구역의 시작과 끝 태그를 찾아 주석을 달아봤다.

카드나 목록처럼 반복되는 블록의 전체 범위를 식별했다.

글마다 달라지는 자리로 보이는 곳을 눈으로 훑어 몇 군데인지 세어봤다.

안 될 때 확인하세요 블록의 시작과 끝을 못 찾겠다면, 여는 태그와 닫는 태그의 이름이 정확히 같은지부터 Ctrl+F로 확인하세요. 이름이 같은 태그가 문서 안에 몇 번 나오는지 세어보면 중첩 관계가 보입니다.

스스로 설명해보기 — 코드를 한 줄씩 읽지 않고 큰 블록 단위로 먼저 나눠 읽어야 하는 이유를 설명할 수 있나요?

레이아웃 블록

큰 외곽 박스 단위로 나뉜 코드 영역 (예: #container)

반복 블록

카드·메뉴 항목처럼 같은 모양이 여러 번 나오는 영역