CSS 중단점을 사용하여 반응형 디자인을 만드는 방법

웹사이트의 성공은 사용자 경험에 크게 좌우됩니다. 오늘날 사용자는 다양한 장치에서 웹 사이트에 액세스하고 각 장치에서 동일한 사용자 경험을 제공하는 것이 어려울 수 있습니다. 바로 여기에서 CSS 중단점이 유용할 수 있습니다.

CSS 중단점은 모든 장치에서 뛰어난 사용자 경험을 제공하는 반응형 사이트를 만드는 데 매우 유용할 수 있지만, 특히 새 개발자에게 웹 디자인의 가장 혼란스러운 측면 중 하나이기도 합니다.

시작하자!

CSS 중단점이란 무엇입니까?

CSS 중단점은 웹 사이트 콘텐츠가 장치 너비에 따라 응답하는 지점으로, 사용자에게 가능한 최상의 레이아웃을 표시할 수 있습니다.

CSS 중단점은 미디어 쿼리와 함께 사용되므로 미디어 쿼리 중단점이라고도 합니다.

이 예에서 레이아웃이 화면 크기에 어떻게 적응하는지 확인할 수 있습니다. 큰 해상도의 레이아웃은 헤더와 두 개의 열 본문 레이아웃을 가지고 있지만 작은 장치에서는 하나의 열 레이아웃으로 바뀝니다.

CSS 중단점을 설정하는 방법

까다로운 부분은 중단점을 스스로 결정하는 것입니다. 표준 템플릿은 없으며 프레임워크마다 다른 중단점을 사용합니다.

그렇다면 중단점에 대해 어떤 접근 방식을 채택해야 할까요?

따라야 할 두 가지 가능한 접근 방식이 있습니다.

• 장치에 따른 중단점
• 콘텐츠 기반 중단점

장치 기반 CSS 중단점

다양한 장치를 기반으로 중단점을 결정하는 것은 좋은 생각처럼 들리지만 실제로는 항상 최선의 접근 방식은 아닙니다. 우리는 이미 걱정할 만큼 충분한 장치를 가지고 있으며, 너비가 다른 새 장치가 나오면 CSS로 돌아가서 새 중단점을 다시 추가하는 것은 시간이 많이 걸립니다.

그럼에도 불구하고 여전히 실행 가능한 옵션입니다. 다음은 기기별 중단점의 예입니다.

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

이 접근 방식을 사용하면 엄청난 미디어 쿼리 목록을 갖게 됩니다.

콘텐츠 기반 CSS 중단점

중단점을 결정하기 위한 이상적인 옵션은 사이트 콘텐츠를 기반으로 합니다. 이 방법을 사용하면 콘텐츠에 레이아웃 조정이 필요한 중단점을 간단히 추가할 수 있습니다. 이렇게 하면 미디어 쿼리가 훨씬 간단하고 관리하기 쉬워집니다.

이 중단점은 장치 너비가 768px 이상일 때 CSS가 적용됨을 의미합니다.

 [css]@media only screen (min-width: 768px){ ... }[/css]

중단점으로 범위를 설정할 수도 있으므로 CSS는 해당 제한 내에서만 적용됩니다.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

최소 또는 최대 너비 CSS 중단점을 사용하는 경우

min-width , max-width 를 사용하거나 둘을 결합하여 다양한 방식으로 중단점을 설정할 수 있습니다. 그러나 문제는 언제 각각을 사용해야 합니까?

간단한 방법으로 대답하려면 모바일 우선 접근 방식으로 레이아웃을 디자인하는 경우 최소 너비 중단점을 사용하고 작업을 진행하세요.

작은 장치에 대한 기본 스타일을 설정하고 그에 따라 큰 장치에 맞게 조정하십시오.

마찬가지로, 더 큰 장치에 대해 먼저 디자인하는 경우 평소와 같이 기본 CSS를 설정하고 최대 너비 접근 방식을 사용하여 더 작은 장치에 맞게 조정합니다.

SASS와 함께 CSS 중단점 사용

SASS 또는 SCSS와 같은 전처리기를 사용하는 경우 훨씬 더 똑똑한 중단점을 작성할 수 있습니다. Mixin을 사용하면 다음과 같이 기억할 선언적 중단점을 더 많이 만들 수 있습니다.

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

그룹으로 작업하는 동안 768px 또는 48em보다 "태블릿"을 기억하는 것이 훨씬 쉽습니다. 누구나 이 중단점을 이해할 수 있습니다. 그것은 태블릿 및 화면 크기 이상입니다.

사용할 CSS 중단점

중단점을 사용하는 방법과 사용 시기를 살펴보았지만 여전히 문제가 남아 있습니다. 어떤 특정 중단점을 사용해야 합니까?

내용을 조금 분해해 보겠습니다. 데스크톱, 태블릿 및 모바일 전용 크기를 타겟팅해야 합니다. 몇 가지 인기 있는 프레임워크를 확인하여 따라야 할 접근 방식에 대한 아이디어를 얻을 수 있습니다.

부트스트랩은 576px, 768px, 992px 및 1200px에 중단점이 있습니다. Foundation은 주로 40em과 64em에 중단점이 있습니다. Bulma에서 중단점은 768px, 769px, 1024px, 1216px 및 1408px로 설정됩니다.

각각의 중단점은 다르지만 공통점은 모바일 우선 접근 방식입니다. 이러한 중단점 중 하나를 시작점으로 사용하거나 다음과 같이 고유한 중단점을 만들 수 있습니다.

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

당신은 아이디어를 얻을!

마무리

요약하면 CSS 중단점은 레이아웃을 재구성하여 다양한 장치에서 최상의 사용자 경험을 제공하는 좋은 방법입니다.

항상 장치가 아닌 자신의 콘텐츠를 기반으로 중단점을 만들려고 합니다. 임의의 너비가 아닌 논리적 너비로 나누고 관리 가능한 숫자로 유지하면 수정이 간단하고 명확하게 유지됩니다.

레이아웃에 어떤 CSS 중단점을 사용합니까? 아래 의견 섹션에 알려주십시오.

무엇 향후 계획?

무료로 Local로 맞춤형 구텐베르크 블록을 만들고 테스트하세요!

여기에서 로컬에 대해 자세히 알아보세요!

반응형 사이트 구축에 대한 자세한 내용은 이 기사를 확인하세요!

• WordPress 사이트를 모바일 친화적으로 만드는 방법
• WordPress에서 반응형 탐색 메뉴를 만드는 방법
• 반응형 웹 디자인을 위한 7가지 모범 사례 팁