반응형 디자인
노트북에서 페이지를 만들었는데 잘 보이다가, 누군가 휴대폰에서 열면 어떻게 될까요? 신중하게 정렬한 칼럼들이 이제는 좁은 띠로 짜부라지고, 텍스트가 가장자리를 넘어가고, 있어야 할 곳에 가로 스크롤바가 나타납니다. 아무도 사이트의 별도 휴대폰 버전을 만들지 않았습니다. 단 하나의 페이지가 있으며, 380픽셀 휴대폰과 1400픽셀 모니터 모두에서 올바르게 보여야 하는데 두 배의 내용을 제공할 수 없습니다. 이러한 적응성을 반응형 디자인이라고 하며, 대부분은 이미 보유하고 있는 도구로 구축됩니다.
반응형의 의미와 뷰포트
반응형 페이지는 자신이 놓인 모든 화면에 맞춰 다시 형태를 바꾸는 하나의 페이지입니다. 동일한 HTML과 동일한 CSS가 휴대폰, 태블릿, 데스크톱을 제공하며, 레이아웃은 조정되어 아무것도 오버플로우되지 않고 아무것도 답답하지 않습니다. 당신은 세 개의 사이트를 만드는 것이 아니라 구부러지는 하나를 만드는 것입니다.
이 모든 것이 작동하기 전에 브라우저는 HTML에서 하나의 지시사항이 필요합니다. 휴대폰은 예전에 데스크톱 너비인 척했고 전체 페이지를 축소해서 맞췄으므로, 오래된 사이트들은 작고 축소된 혼란스러운 모습으로 표시되었습니다. HTML의 <head>에 있는 이 한 줄은 휴대폰에게 대신 실제 너비를 사용하라고 말합니다:
<meta name="viewport" content="width=device-width, initial-scale=1" />이것 없이는 CSS가 가상의 넓은 화면에 스타일을 지정하고 있으며 신중하게 만든 레이아웃은 기회를 얻지 못합니다.
먼저 유동적 레이아웃
반사적으로 바로 특수 휴대폰 규칙을 찾으려는 충동이 있지만, 많은 반응성은 하나도 작성하기 전에 자유롭게 옵니다. 유동적 값으로 구축하면, 공간으로 늘어나고 축소되는 값을 사용하면, 레이아웃이 이미 적응합니다.
두 가지 습관이 대부분을 수행합니다. 너비를 백분율로 설정하여 상자가 고정된 픽셀 수가 아닌 컨테이너의 일부를 차지하도록 하고, max-width를 사용하여 작은 화면에서는 축소할 수 있지만 큰 화면에서 편안한 읽기 크기를 초과하지 않도록 합니다:
.container {
width: 90%; /* 가진 공간의 90%를 차지 */
max-width: 60rem; /* 하지만 큰 화면에서 60rem보다 넓지 않음 */
margin: 0 auto; /* 중앙 정렬 */
}휴대폰에서 이 컨테이너는 좁은 화면의 90%입니다. 모니터에서는 60rem에서 증가를 멈추고 중앙에 앉습니다. 휴대폰 규칙을 작성하지 않았습니다. 값이 적응했습니다.
max-width를 사용하여 휴대폰에서는 축소하지만 모니터에서는 너무 넓게 늘어나지 않도록 합니다. 이 두 값은 레이아웃을 자체 적응하게 합니다. 먼저 유동적으로 구축하면, 다음에 오는 휴대폰별 규칙이 훨씬 더 필요합니다. 미디어 쿼리
때때로 유동적 값으로는 충분하지 않으며 특정 크기에서 레이아웃이 실제로 변경되어야 합니다. 예를 들어 휴대폰에서는 세로로 쌓이지만 데스크톱에서는 행으로 나타나는 메뉴가 있습니다. 이것이 **미디어 쿼리**가 하는 것입니다: 당신이 설정한 조건을 화면이 충족할 때만 적용되는 CSS 블록입니다.
작은 화면의 스타일로 시작하여 일반 CSS로 사용한 다음, 더 넓은 화면 변경사항을 레이어하는 쿼리를 추가합니다:
.nav {
display: flex;
flex-direction: column; /* 작은 화면에서 쌓임 */
}
@media (min-width: 40rem) {
.nav {
flex-direction: row; /* 공간이 생기면 나란히 배치 */
}
}@media (min-width: 40rem) 내의 규칙은 화면이 최소 40rem 이상 넓어진 후에만 작동합니다. 그 아래에서는 일반 .nav 규칙이 적용되고 메뉴는 쌓입니다.
@media (min-width: ...)를 사용하여 더 큰 화면의 변경사항을 추가합니다. 이렇게 하면 휴대폰 보기가 나중에 붙인 패치가 아닌 시작점이 됩니다. 중단점 선택
**중단점**은 미디어 쿼리가 작동되고 레이아웃이 변경되는 너비입니다. 유혹하는 방법은 인기 있는 휴대폰이나 태블릿의 너비를 찾고 맞추는 것입니다. 이것이 함정입니다. 수백 개의 기기 크기가 있으며, 해마다 변경되고, 이를 쫓는 것은 이길 수 없는 게임입니다.
더 나은 질문은: 이 레이아웃이 어느 너비에서 나빠 보이기 시작합니까? 브라우저를 천천히 넓혀서 보세요. 텍스트 줄이 너무 길어져서 편하게 읽을 수 없거나, 두 열이 너무 좁아지면 그 중단점이 있어야 할 곳이며, 그 숫자가 무엇이든 상관없습니다.
/* 중단점이 선택된 이유는 텍스트가 여기서 너무 넓어졌기 때문이지, */
/* 휴대폰이 우연히 이 크기이기 때문이 아님 */
@media (min-width: 45rem) {
.article { max-width: 38rem; }
}