강의 노트 · 2026년 7월 3일

한글 문단의 폭을 손바닥으로 재는 수업

브라우저 너비 전체에 한글을 흘리면 줄 끝이 책상 모서리까지 갑니다. 4주 차에 우리는 문단 폭을 먼저 잠그고 색은 나중에 바꿉니다.

한 줄에 담는 글자

인쇄 실습지에 같은 소개 글을 두 번 뽑습니다. 하나는 종이 가득, 하나는 손바닥 두 개 너비입니다. 소리 내어 읽으면 좁은 쪽이 문장 끝을 찾기 쉽습니다. 그 느낌을 max-width로 옮깁니다. 교실 표준은 본문 칸 40rem 안쪽입니다.

여백은 margin과 padding을 역할로 나눕니다. 문단과 문단 사이는 margin, 상자 안쪽의 숨 고르기는 padding. 둘 다 20픽셀로 두면 제목과 본문이 붙어 보입니다. 제목 아래는 0.5rem, 문단 사이는 1rem로 시작한 뒤 본인 글 길이에 맞춰 한 단계만 조정합니다.

집 화면과 교실 화면

2025년 가을, 반찬 가게 페이지가 교실 모니터에서는 여유 있고 집 노트북에서는 글자가 작게 보였습니다. 원인은 글자 크기를 픽셀로 고정한 뒤 브라우저 확대만 다르게 둔 것이었습니다. 본문은 rem으로 바꾸고, 같은 파일을 교실 모니터와 노트북에서 연달아 열게 했습니다.

줄 간격은 1.75를 출발점으로 둡니다. 메뉴 이름처럼 짧은 줄은 1.5까지 줄여도 읽힙니다. 소개 이야기처럼 세 줄이 넘는 문단은 1.75를 유지합니다.