디지털 마케터를 위한 CSS 미디어 쿼리
게시 됨: 2016-11-12디지털 마케터를 위한 CSS 미디어 쿼리에 대한 Target Internet 가이드에 오신 것을 환영합니다! 불가피하게, 이 기사는 약간의 기술적인 언어를 다룰 것이지만, 웹 개발에 대해 아주 조금이라도 알고 있더라도 상관없이 계속 읽으실 것을 촉구합니다. 미디어 쿼리와 그 역학에 대해 배우는 것은 디지털 마케팅의 작동 방식, 특히 웹 및 이메일에 대한 반응형 디자인에 대한 이해를 높이고자 하는 모든 사람에게 유용합니다.
젊은 코더가 웹 개발을 공부하기 시작할 때 가장 먼저 배우는 것 중 하나는 HTML(하이퍼텍스트 마크업 언어)이 웹 페이지의 내용을 정의하는 언어이고 CSS(캐스케이딩 스타일 시트)가 해당 내용의 모양을 정의한다는 것입니다. 약간 이상한 비유를 하자면, CSS는 옷이 신체에 대한 것처럼 HTML에 대한 것입니다. 이는 대중에게 공개되기 전에 필수적인 고려 사항입니다.
미디어 쿼리는 CSS 언어의 최신 버전인 CSS3의 모듈입니다. 콘텐츠를 렌더링하는 데 사용되는 장치 또는 브라우저의 매개변수에 따라 콘텐츠의 스타일이 지정되는 방식에 영향을 줍니다. 여기에는 다음이 포함됩니다.
- 뷰포트 너비 및 높이
- 화면 방향(가로 또는 세로)
- 해결
- 기기 종횡비
이러한 요소 및 기타 요소에 따라 웹 콘텐츠가 표시되는 방식을 변경할 수 있는 가능성은 개발자에게 스마트폰의 출현이 시작된 2000년대 중반 이후로 가능했던 것보다 더 많은 청중을 위해 콘텐츠를 최적화할 수 있는 기회를 제공했습니다. 웹 지원 장치의 다양화에서 벗어납니다.
미디어 쿼리는 어떻게 작동합니까?
@미디어 화면 및 (최소 너비:700픽셀) { … }
미디어 쿼리에는 미디어 유형 및 미디어 기능 표현식이라는 두 가지 주요 구성요소가 있습니다.
미디어 유형은 콘텐츠가 표시될 미디어 유형인 정확히 예상할 수 있는 것을 나타냅니다. 수많은 미디어 유형이 CSS3에서 지원되지만 우리가 정말로 관심을 가져야 할 것은 '스크린'뿐입니다.
한편 미디어 기능은 화면 크기, 방향 등 이전 섹션에 나열된 것과 같은 장치 기능입니다. 미디어 기능 표현식은 미디어 기능에 대한 정보를 제공합니다(예: max-width: 900px).
이 섹션의 상단에 있는 여러 색상의 코드 줄은 미디어 쿼리의 구성 요소를 보여줍니다. 파란색 섹션 - @media screen -은 미디어 유형 "screen"을 지정합니다. 녹색에는 최소 브라우저 너비를 700px로 지정하는 미디어 기능 표현식이 있습니다. 미디어 유형 'screen'과 미디어 기능 min-width:700px가 모두 true인 경우(즉, 사용된 장치가 화면이고 브라우저 너비가 700px 이상인 경우) 미디어 쿼리는 CSS 스타일 지정 지침을 전달합니다. 노란색 중괄호 안에 배치됩니다(명확성을 위해 여기에서 비워 두었습니다).
단순히 'and' 연산자를 사용하여 추가 미디어 기능을 포함하도록 미디어 쿼리를 확장할 수 있으므로 이 예는 다음과 같습니다.
@미디어 화면 및 (최소 너비:700픽셀) 및 (방향: 가로) { … }
이 새 예제는 콘텐츠가 가로 방향으로 700px 이상의 화면 디스플레이에서 렌더링된다는 조건으로 서식을 적용합니다.
디지털 마케터가 미디어 쿼리를 사용하는 방법
디지털 마케터는 CSS 미디어 쿼리를 사용하여 모든 가능한 관점(모든 화면 크기, 방향 및 해상도)에 맞는 맞춤형 웹 콘텐츠 보기 경험을 만듭니다. 목표는 스마트폰, 데스크톱 및 태블릿을 위한 최적의 경험을 만드는 것입니다. 그러나 장치가 사용되는 것과 상관없이 모두 동일한 콘텐츠 버전 내에서(즉, 데스크톱 및 모바일용으로 별도의 웹페이지가 없음).
우리의 목적을 위해 가장 중요한 미디어 기능은 뷰포트 너비입니다. 이 기능을 사용하여 마케팅 이메일을 최적화하는 방법을 살펴보겠습니다.
Uber에서 보낸 이 놀라운 이메일에 눈을 떼지 마십시오. 간단하고 효과적인 반응형 이메일 디자인을 실행하는 방법에 대한 진정한 마스터 클래스.
CSS 미디어 쿼리는 화면 너비 미디어 기능을 사용하여 각 화면 크기에 최적화된 이메일 콘텐츠를 전달하는 데 중요한 역할을 합니다.
다음은 이메일의 헤더 부분이 표시되는 방식을 결정하는 데 사용되는 미디어 쿼리입니다.
@미디어 화면 및 (최대 너비:699픽셀) {
.t1of12, .t2of12, .t3of12, .t4of12, .t5of12, .t6of12, .t7of12, .t8of12, .t9of12, .t10of12, .t11of12, .t12ful1 {
너비: 100% !중요;
최대 너비: 없음 !중요
}
이 코드 중 일부는 친숙해 보일 것입니다. 일부는 아마도 그렇지 않을 것입니다. 분해해 보겠습니다.
- @media screen – 쿼리에 대한 미디어 유형 설정
- (max-width:699px) – 최대 너비 미디어 기능을 설정합니다. 699px 이하의 모든 보기는 쿼리의 영향을 받습니다.
- { 및 } – 중괄호 안에 포함된 코드는 미디어 쿼리에 지정된 미디어 유형과 미디어 기능이 모두 콘텐츠를 보는 데 사용되는 장치/브라우저에 대해 true인 경우 적용되는 CSS 스타일 지정 명령입니다. 최대 699px 보기 너비까지 표시하는 화면
- .t1of12 등 – 대부분의 반응형 웹 디자인은 반응형 콘텐츠 그리드를 사용하여 작동합니다. 여기에서 요소(Uber 이메일의 헤더 섹션 등)에는 1~12개의 열이 포함될 수 있습니다. 아이디어는 화면 너비가 커질수록 각 행의 일부 격자 사각형이 결합되어 더 짧고 더 넓은 격자 버전 내에서 더 긴 행을 형성한다는 것입니다. 대상 인터넷 홈페이지로 이동하여 브라우저 상단의 아래로 복원 버튼을 클릭하고 오른쪽 하단 모서리에서 창을 드래그하여 이 효과를 확인하십시오. '.t1of12', '.t2of12' 등은 열 너비 지정자입니다. , 다양한 표시 영역 크기에서 콘텐츠 너비를 조정하는 데 사용됩니다.
- width: 100% !important – 이 명령은 콘텐츠가 부모 요소의 전체 너비를 채우도록 확장되도록 합니다.
미디어 쿼리의 필수 구성 요소는 미디어 유형, 미디어 기능의 표현, 반응형 CSS 명령입니다. 이러한 방식으로 미디어 쿼리를 생성하려면 숙련된 CSS 코더가 필요하지만 미디어 쿼리의 구성 요소와 이러한 구성 요소가 함께 작동하는 방식을 이해하는 것은 귀중한 기초입니다.
더 깊이: 다른 미디어 기능 사용하기
지금까지 우리는 주로 화면 너비에 중점을 두었지만 미디어 쿼리에서 큰 이점을 얻을 수도 있는 몇 가지 다른 미디어 기능이 있습니다. 다음은 사용 방법에 대한 몇 가지 빠른 팁입니다.
- 해상도 – 미디어 쿼리를 사용하여 화면 해상도가 낮은 장치에 더 간단하고 대담한 시각적 콘텐츠를 표시합니다.
- 방향 – 앞서 논의한 Uber 이메일 예시에 적용된 동일한 반응형 그리드 원칙을 사용하여 최적화합니다.
- 색상(CSS 컨텍스트에서 철자가 '색상' ) - 색상 구성요소당 장치의 비트 수를 나타냅니다. 높은 색 농도가 콘텐츠 경험에 중요한 경우 장치 비트 수가 너무 낮으면 CSS 미디어 쿼리를 설정하여 대체 버전을 제공하는 것을 고려하십시오.
미디어 쿼리를 구현하는 방법 - 개발자 및 콘텐츠 임원용
이미 알고 계시겠지만 미디어 쿼리를 구현하려면 코딩 지식이 필요합니다. 그럼에도 불구하고 미디어 쿼리가 작동하는 방식을 이해하는 것은 모든 디지털 마케터에게 바람직합니다. 이렇게 하면 디자인 아이디어를 웹 개발자 동료에게 보다 유창하게 전달할 수 있고 이러한 아이디어를 사용 가능한 코딩 기술로 구체화할 수 있기 때문입니다.
다른 CSS 기능과 마찬가지로 미디어 쿼리는 콘텐츠의 CSS 스타일시트에 속합니다. 스타일시트 하단에 콘텐츠에 대한 모든 CSS 쿼리를 나열하거나 스타일시트가 스타일을 지정하는 콘텐츠 항목 바로 아래에 각 쿼리를 삽입하는 것이 좋습니다. 확실하지 않은 경우 웹 개발자에게 문의하십시오.
코딩을 담당하지 않지만 장치 유형 전반에 걸친 콘텐츠의 사용자 경험 계획을 담당하는 경우 콘텐츠가 그에 따라 표시되는 방법에 대한 명확하고 정확한 사양을 제공하여 개발자가 원하는 효과를 얻을 수 있도록 도울 수 있습니다. 다른 미디어 기능 조건에. 예를 들어:
이미지 A: 화면 너비가 600px 이상인 경우 표시
이미지 B: 화면 너비가 400px 이상인 경우 표시
그리고 걱정하지 마십시오. 지침에 문제가 있는 경우 곧 알게 될 것입니다.
미디어 쿼리가 이미 몇 년 동안 존재하지 않았습니까?
미디어 쿼리는 인쇄용 웹 콘텐츠 형식 지정(예: 웹 페이지를 인쇄용으로 보낼 때 웹 복사본을 검정색으로, 배경을 흰색으로 변경)을 비롯한 다양한 기능을 수행하는 초기 시대에 등장했습니다. 그러나 미디어 쿼리의 진정한 돌파구는 2012년이었습니다. 브라우저와 W3C를 지원하는 반응형 디자인을 위한 새로운 웹 표준이 되었을 때.
2016년 현재, 웹 쿼리는 양질의 웹 디자인의 기본 구성 요소입니다. 9월에 Google이 Gmail이 마침내 지원을 시작할 것이라고 발표했을 때 유비쿼터스 웹 디자인 메커니즘으로 부상하는 미디어 쿼리에 대한 오랜 장애물을 제거한다고 발표했을 때 또 다른 힘을 얻었습니다.
반응형 템플릿의 미디어 쿼리
세계 최고의 이메일 마케팅 도구 중 다수는 반응형 이메일 템플릿에서 미디어 쿼리를 사용합니다. Gmail이 이제 미디어 쿼리를 지원한다는 소식이 전해지자 MailChimp는 업데이트의 중요성을 설명하는 블로그 게시물을 작성했습니다. 장치. 이제 다양한 기기와 화면 크기에 맞게 이메일 레이아웃을 더 쉽게 최적화할 수 있습니다.
“우리 템플릿은 Gmail의 과거 제한 사항을 해결하도록 제작되었지만 Google에서 현재 지원을 시작하는 코드가 항상 포함되어 있습니다. 즉, 캠페인은 모든 클라이언트에서 보다 일관되게 렌더링됩니다."
반응형 디자인을 사용하는 것이 중요한 이유
우리의 일반 독자들은 우리가 이 말을 여러 번 들었을 것입니다. 그러나 다시 말하는 것을 두려워하지 않습니다. 모바일 및 태블릿 사용자를 위한 훌륭한 경험을 만드는 것은 절대적으로 중요합니다. 왜요? 수많은 웹 사용자가 모바일과 태블릿을 사용하기 때문입니다.
comScore의 조사에 따르면 2015년 12월 기준으로 온라인 사용자의 76%가 데스크톱, 모바일 및 태블릿을 포함한 다양한 장치를 통해 인터넷에 액세스합니다. 11%만이 데스크톱만 사용하고 있습니다. 잠재 고객의 최대 89%에게 차선의 콘텐츠를 제공할 여유가 있습니까? 물론 다수의 기기를 사용하는 다수의 사용자 중에는 데스크톱을 사용하여 콘텐츠에 액세스하는 사람이 많이 있을 것입니다. 하지만 다른 것을 사용하는 사람도 많을 것입니다.
콘텐츠가 여러 장치 유형과 호환되기를 원하는 것은 웹 사용자만이 아닙니다. 역시 구글이다. 2015년 4월의 소위 'Mobilegeddon' 알고리즘 업데이트 이후 Google은 검색 결과 계산에서 모바일 친화적 사이트에 추가 점수를 할당했으며 회사는 반응형 디자인이 모바일 최적화의 선호 방법이라는 사실에 대해 개방적입니다. Google 웹마스터 허브에서 일반적인 모바일 웹 디자인 실수에 대한 이 가이드를 살펴보는 것이 유용할 수 있습니다.
미디어 쿼리는 다음을 포함하여 성공적인 반응형 디자인 전술을 촉진하는 데 사용할 수 있습니다.
- 더 큰 화면 크기로 콘텐츠 확장 – 예: 추가 사본 또는 이미지 추가
- 더 큰 화면 크기를 위한 콘텐츠 확대
- 특정 최소 화면 너비에 도달한 후 모바일 전용 콘텐츠 숨기기
웹사이트나 마케팅 이메일을 만들 때마다 반응형 디자인과 미디어 쿼리를 사용하는 것이 좋습니다. CSS를 직접 배우고 만드는 것이든 웹 개발자에게 정보에 입각한 지침을 제공하는 것이든 상관없습니다.
지금 무료 멤버십을 받으세요 - 신용 카드가 전혀 필요하지 않습니다
무료 회원 