[10편] 설계도를 보는 눈 기르기: 남의 홈페이지를 상자와 줄로 해부하기

2026년 10월 13일

한 줄 요약

잘 만든 홈페이지를 볼 때 색과 사진보다 먼저 “상자가 어떻게 나뉘어 있는가”를 보는 연습을 하세요.

비유로 이해하기

건축가는 멋진 건물 사진에서 기둥과 보를 먼저 찾습니다. 화면도 똑같아요. 섹션(큰 상자) → 칸(그리드) → 줄(플렉스) → 내용물 순서로 쪼개 보면, 아무리 화려한 화면도 지금까지 배운 몇 가지 규칙의 조합입니다.

가장 쉬운 방법은 엑스레이 안경을 쓰는 것입니다. 모든 요소에 점선 테두리를 그리면 숨어 있던 상자들이 한눈에 보입니다.

코드 맨 위 /* * { outline: ... } */ 줄의 주석 기호 /*와 */를 지워 보세요. 엑스레이 안경을 쓴 것처럼 모든 상자가 드러납니다.

직접 고쳐 보세요 · 주석을 풀어 엑스레이를 켜 보세요

브라우저에서 마음에 드는 사이트를 열고 개발자 도구(F12)의 Grid·Flex 표시를 켜 보세요. 그렇게 찾은 구조를 GenerateBlocks의 컨테이너(섹션) → Grid 컨테이너(칸) → Flex 컨테이너(줄) 순서로 옮기면 그대로 재현할 수 있습니다.