9강 · 화면 크기에 맞추기

한눈에

이 화면에서는 페이지가 제대로 보입니다. 오늘은 휴대폰에서도 제대로 보이게 만들겠습니다.

오늘 다룰 내용은 세 가지입니다. 먼저 meta 태그 하나입니다. 이게 없으면 나머지가 소용없습니다. 그다음 미디어 쿼리인데, 조건이 붙은 규칙 묶음입니다. 창을 좁혀서 시험합니다. 휴대폰은 필요 없습니다. 시작하기 전에 좋은 소식이 있습니다. 대부분의 일은 이미 5강에서 끝났습니다. max-width 는 정확히 그 폭이 아니라 최대 그 폭이라는 뜻입니다. 좁은 화면에서는 기둥이 그냥 있는 만큼을 채웁니다. 반응형이라는 것은 대부분 그런 습관의 모음입니다. 폴더를 다시 열어보겠습니다. HTML 의 head 에 한 줄을 넣습니다. 그리고 스타일시트 맨 아래에 묶음 하나를 넣습니다. 두 군데만 고치면 페이지가 어떤 폭에서도 버팁니다. meta 태그가 먼저입니다. 규칙이 그것에 기대고 있습니다. 이것이 meta 태그이고, 가장 먼저 들어가야 합니다. width=device-width 는 휴대폰에게 실제 폭을 쓰라고 말합니다. initial-scale 1 은 처음에 확대도 축소도 하지 말라는 뜻입니다. 이 태그가 없으면 휴대폰이 980픽셀 폭인 척합니다. 그리고 페이지 전체를 그린 다음 축소해서 맞춥니다. 그 결과가 이런 모습입니다. 전부 있지만 전부 읽을 수 없을 만큼 작습니다. 휴대폰이 이 페이지를 데스크톱용이라고 가정한 것입니다. 첫 아이폰 때부터 있던 가정이고, 아직도 기본값입니다. 바꾸면 옛 페이지가 깨지기 때문에, 태그를 넣는 것은 우리 몫입니다.

태그는 charset 줄 바로 아래에 들어갑니다. meta 태그라서 닫는 태그가 없습니다. name 과 content, 속성 두 개이고 다른 meta 태그와 같습니다. 앞으로 만드실 모든 페이지에 이 줄이 들어가야 합니다. 저장하면 이제 규칙이 제 일을 할 수 있게 됩니다.

index.html

  <meta name="viewport" content="width=device-width, initial-scale=1">

그리고 이것이 미디어 쿼리입니다. 골뱅이와 media 라는 낱말이 조건 묶음을 엽니다. max-width 520 은 그보다 좁을 때만 적용하라는 뜻입니다. 중괄호가 두 겹이 되었다는 점을 보셔야 합니다. 쿼리가 하나를 열고, 안의 규칙이 각각 하나를 더 엽니다. 좁은 화면을 위한 작은 변화 세 가지입니다. 위아래 여백을 줄입니다. 공간이 넉넉하지 않기 때문입니다. 제목을 줄입니다. 휴대폰에서 40픽셀은 너무 큽니다. 그리고 flex-wrap 으로 알약이 두 번째 줄로 내려갈 수 있게 합니다. 없으면 서로 눌리면서 글자가 이상하게 접힙니다.

묶음은 맨 아래 screen 주석 밑에 들어갑니다. 안쪽은 전부 한 단계 들여씁니다. 쿼리 안에 있기 때문입니다. 선택자는 이미 썼던 것들과 같습니다. 새 규칙을 쓰는 것이 아니라 선언 세 개를 덮어쓰는 것입니다. 마지막에 닫는 중괄호를 세어보시고 저장하시면 됩니다.

style.css

@media (max-width: 520px) {
  body {
    margin: 24px auto;
  }

  h1 {
    font-size: 30px;
  }

  .top {
    flex-wrap: wrap;
  }
}

/* buttons */

서버는 같은 방법으로 띄웁니다. 이게 되는지 보려고 휴대폰이 필요하지는 않습니다. 미디어 쿼리는 기기가 아니라 창을 봅니다.

터미널

python -m http.server 5500

전체 폭에서는 아무것도 바뀌지 않았습니다. 창이 520픽셀보다 넓기 때문입니다. 창 가장자리를 안쪽으로 끌어보시면 제목이 작아집니다. 같은 순간에 알약이 두 줄로 내려갑니다. 창 하나에서 전체가 작동하는 것을 보실 수 있습니다. 어떤 폭을 쓰면 되는지 물어보시는데, 흔히 쓰는 값들입니다. 폭 520 은 휴대폰 정도이고, 768 은 태블릿입니다. 그리고 폭 1024 는 노트북 정도입니다. 공식 목록은 없고, 그냥 관습입니다. 본인 페이지가 이상해지기 시작하는 폭을 고르시면 됩니다. 좁은 화면에서의 페이지입니다. 전부 읽을 수 있고, 가장자리에서 잘린 것도 없습니다. 알약은 두 줄로 놓이고 제목은 작아졌습니다. 같은 파일 두 개입니다. 별도 페이지도 프레임워크도 없습니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 쿼리는 썼는데 meta 태그를 빠뜨리는 경우입니다. 휴대폰이 넓다고 주장하기 때문에 쿼리가 한 번도 작동하지 않습니다. 둘째, max-width 를 쓰려다 min-width 를 쓰는 경우입니다. 그러면 그 폭보다 넓을 때 적용되어 반대가 됩니다. 셋째, 중괄호 하나가 빠져서 파일 전체가 안 먹는 경우입니다. 적용이 안 되기 시작하면 아래에서 위로 세어보시면 됩니다. 마치기 전에 서버를 멈춰두겠습니다. 페이지는 53줄, 스타일시트는 84줄입니다. 9강까지 왔고, 어떤 화면에서도 페이지가 제대로 보입니다. 폴더는 그대로 두세요. 다음 시간부터 페이지가 반응하기 시작합니다. 오늘 기억하실 것 세 가지입니다. meta 태그가 먼저입니다. 그게 없으면 나머지가 작동하지 않습니다. max-width 가 5강부터 이미 대부분의 일을 하고 있었습니다. 창을 좁혀보면서 본인의 기준 폭을 고르시면 됩니다. 다음 시간에는 자바스크립트로 페이지가 대답하기 시작합니다.

---

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.