웹 개발 강의 9편 - 화면 크기에 맞추기

지금 페이지는 컴퓨터 화면에서 제대로 보입니다. 오늘은 휴대폰에서도 제대로 보이게
만듭니다.

좋은 소식을 먼저 말씀드리면, 대부분의 일은 이미 5강에서 끝났습니다.
max-width 는 정확히 그 폭이 아니라 최대 그 폭이라는 뜻이라, 좁은 화면에서는
기둥이 그냥 있는 만큼을 채웁니다. 반응형이라는 것은 대부분 그런 습관의 모음입니다.

viewport 태그가 먼저입니다

index.html 의 charset 줄 아래에 넣습니다.

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

width=device-width 는 휴대폰에게 실제 폭을 쓰라고 말합니다. initial-scale=1 은
처음에 확대도 축소도 하지 말라는 뜻입니다.

이 태그가 없으면 휴대폰이 980픽셀 폭인 척합니다. 페이지 전체를 그린 다음
축소해서 맞춥니다. 글자가 전부 있는데 전부 읽을 수 없을 만큼 작아집니다.

첫 아이폰 때부터 있던 가정이고, 아직도 기본값입니다. 바꾸면 옛 페이지가
깨지기 때문에, 태그를 넣는 것은 우리 몫입니다.

앞으로 만드실 모든 페이지에 이 줄이 들어가야 합니다.

미디어 쿼리

style.css 의 /* screen */ 주석 아래에 넣습니다.

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

  h1 {
    font-size: 30px;
  }

  .top {
    flex-wrap: wrap;
  }
}

골뱅이와 media 라는 낱말이 조건 묶음을 엽니다. max-width: 520px 은 그보다
좁을 때만 적용하라는 뜻입니다.

중괄호가 두 겹이 되었다는 점을 보셔야 합니다. 쿼리가 하나를 열고, 안의
규칙이 각각 하나를 더 엽니다. 마지막에 닫는 중괄호를 세어보시고 저장하시면
됩니다.

선택자는 이미 썼던 것들과 같습니다. 새 규칙을 쓰는 것이 아니라 선언 세 개를
덮어쓰는 것입니다.

위아래 여백을 줄이고, 제목을 줄이고, flex-wrap 으로 알약이 두 번째 줄로
내려갈 수 있게 합니다.

휴대폰 없이 시험하기

python -m http.server 5500

처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

브라우저에서 localhost:5500 으로 들어가시면 됩니다.

미디어 쿼리는 기기가 아니라 창을 봅니다. 휴대폰이 필요하지 않습니다.

창 가장자리를 안쪽으로 끌어보시면 제목이 작아지고, 같은 순간에 알약이 두 줄로
내려갑니다. 창 하나에서 전체가 작동하는 것을 보실 수 있습니다.

기준 폭을 고르는 법

공식 목록은 없고 그냥 관습입니다. 본인 페이지가 이상해지기 시작하는 폭을
고르시면 됩니다.

자주 발생하는 오류

첫째, 쿼리는 썼는데 meta 태그를 빠뜨리는 경우입니다. 휴대폰이 넓다고 주장하기
때문에 쿼리가 한 번도 작동하지 않습니다.

둘째, max-width 를 쓰려다 min-width 를 쓰는 경우입니다. 그러면 그 폭보다
넓을 때 적용되어 반대가 됩니다.

셋째, 중괄호 하나가 빠져서 파일 전체가 안 먹는 경우입니다. 적용이 안 되기
시작하면 아래에서 위로 세어보시면 됩니다.

연습 문제

1. 768px 기준을 하나 더 만들어 중간 크기 화면을 다뤄보세요.
2. 미디어 쿼리 안에서 .note 의 글자 크기를 바꿔보세요.
3. min-width 로 바꿔보고 반대로 동작하는 것을 확인해보세요.

다음 편

10강부터 자바스크립트입니다. 페이지가 반응하기 시작합니다.

영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.