창이 줄었다. CSS가 옷을 갈아입었다.

요약

• W3C는 2001년 4월 4일 첫 Media Queries 작업 초안을 냈다. HTML4와 CSS2에도 screen과 print 같은 매체 유형은 있었고, 초안은 환경의 특징을 더 자세히 물을 수 있게 했다.
• 2002년 7월 8일 후보 권고안이, 2012년 6월 19일 권고안이 나왔다. 너비, 높이, 색 같은 조건으로 스타일을 골라도 글의 내용은 한 문서에 남는다.

넓은 화면에서 세 단짜리 기사는 자신만만했다. 제목은 어깨를 펴고 사진과 곁단도 서로 자리를 지켰다. 편집자가 창 가장자리를 끌어오자 분위기가 달라졌다. 곁단이 본문을 밀고 메뉴가 제목 앞에 버티었다. 프린터는 종이 한 장을 들고 와서 클릭용 길 찾기까지 인쇄할 생각이냐고 따졌다. 기사가 잘못한 일은 없었다. 옷을 한 치수로만 만든 탓이다.

2001년 4월 4일 W3C의 첫 작업 초안은 기존 구분에서 출발했다. HTML4와 CSS2는 screen, print 같은 매체 유형으로 화면과 종이에 다른 스타일을 줄 수 있었다. 하지만 화면이라는 말은 너무 넓다. 같은 화면이라도 넉넉한 창과 좁은 창은 한 기사의 세 단을 전혀 다르게 받아들인다. 양복점에 가서 “사람이 입습니다”라고만 말하는 셈이었다.

Media Queries는 치수를 묻게 했다. 너비와 높이, 색, 해상도 같은 환경 특성을 조건으로 쓸 수 있다. min-width는 한 배치에 필요한 최소 공간을, max-width는 더 좁은 자리에서 쓸 배치를 고를 수 있게 한다. 인쇄할 종이의 너비도 예시에 등장한다. 브라우저는 독자의 환경을 알고, 제작자는 조건과 그때 적용할 스타일을 쓴다. 기사의 문장은 자리를 떠나지 않는다.

넓은 창에서는 사진, 본문, 곁단이 나란히 선다. 창이 좁아지면 곁단을 아래로 보내 제목과 본문에 숨 쉴 공간을 줄 수 있다. 인쇄할 때는 클릭 메뉴를 걷어 내고 종이의 폭에 맞춘다. 기자가 한 문장을 세 번 쓰는 일이 아니다. 한 편의 기사를 읽는 장소에 맞춰 배열하는 일이다.

2002년 7월 8일의 후보 권고안은 그 방식을 구현과 검토에 더 알맞게 다듬었다. 후보라는 말은 표준화 과정의 단계다. 그날 모든 브라우저가 일제히 새 옷을 입었다는 기록은 아니다. 중요한 것은 내용은 공유하면서 표현의 조건을 더 세밀하게 적는 방식이 자리를 잡아 갔다는 점이다.

2012년 6월 19일 W3C 권고안에서는 매체 유형에 특성 표현식을 하나도 붙이지 않거나 여러 개 붙이는 구조가 정리됐다. 너비, 높이, 색이 대상이고, min-width와 max-width로 범위를 잡는 예도 있다. 인쇄 페이지의 너비도 다룬다. 단을 바꿀 지점은 요즘 인기 있는 기기의 이름에서 찾기보다, 실제로 제목과 본문이 서로 밀기 시작하는 폭에서 찾는 편이 오래 간다.

치수를 읽을 때도 주의할 점이 있다. 질의 속 px는 CSS 픽셀이다. 화면을 이루는 물리적 점의 개수를 그대로 센 값이 아니다. 촘촘한 화면에 점이 많아도 CSS 배치가 보는 너비는 다른 척도로 나타날 수 있다. 옷의 어깨 너비를 정하면서 천의 실 가닥 수부터 세지는 않는다. 콘텐츠가 들어갈 실제 배치 공간을 봐야 한다.

2012년 문서는 only, not, 알 수 없는 특성의 처리도 정했다. 환경이 바뀌면 사용자 에이전트가 질의를 다시 평가하고 페이지를 재배치하기를 기대하지만, 매번 즉각 똑같이 반응하도록 의무화하지는 않았다. 그러니 창을 움직여 보고 인쇄 화면을 열어 실제 결과를 확인해야 한다. 문법이 맞는 규칙도 기사에 맞지 않는 옷을 고를 수 있다.

이 기술에서 제작자는 어떤 조건에 어떤 옷을 입힐지 결정한다. 브라우저는 독자의 공간을 재고 조건이 맞는지 판단한다. 독자는 창을 줄여 그 판단이 좋았는지 바로 볼 수 있다. 세 단짜리 기사는 좁은 창에서 한 단으로 돌아섰고, 종이에서는 메뉴를 벗었다. 이야기는 그대로였고 CSS만 제때 갈아입었다.