CSS에서 다양한 화면을 위한 레이아웃 소개

현대 세계에서는 웹사이트가 다양한 화면 크기의 기기에서 잘 표시되어야 합니다.

일반적으로 기기는 네 가지 클래스로 구분합니다: 컴퓨터(desktop), 노트북, 태블릿(tablet) 및 휴대폰(mobile).

옛날 옛적에는 인기 있는 기기의 화면 크기가 모두 알려져 있었습니다. 다행히 그렇게 많지 않았죠. 그리고 사이트는 알려진 해상도 목록에서 올바르게 표시되도록 만들어졌습니다.

현재는 기기가 너무 많아져서 사이트를 제작해야 하는 해상도 목록을 만드는 것이 불가능합니다. 현재는 레이아웃이 어떤 크기의 화면에서도 올바르게 표시되어야 한다고 여겨집니다.

이는 레이아웃의 주요 지점에서 블록을 재구성함으로써 달성됩니다. 이때 이러한 주요 지점은 특정 기기가 아닌 사이트 콘텐츠에 맞게 선택되어 콘텐츠가 잘 보이도록 합니다.

주요 지점 사이에서는 사이트 요소의 너비가 화면 너비에 맞춰 조정되도록 유동적이어야 합니다. 그리고 주요 지점에서 블록이 다른 위치로 재배치됩니다.

설명된 레이아웃을 적응형 또는 반응형(responsive) 레이아웃이라고 합니다. 다음 강의에서 이를 공부해 보겠습니다.