본문으로 바로가기

Responsive Web Design

category StyleSheet/CSS 2016. 9. 6. 15:55

반응형 웹과 미디어 쿼리

반응형 웹 디자인은 모바일 혹은 데스트탑의 모든 기기와 크고 작은 모든 스크린 사이즈에서 적절하게 작동하는 웹사이트를 만드는 것입니다.

반응형 웹 디자인은 모든 사람에게 직관적이고 만족스런 경험을 제공하는 것에 초점을 두며, 데스크탑 유저와 폰 유저 모두에게 같은 이익,사용성을 제공하게 하는 것입니다.

반응형 웹 디자인 responsive web design 용어는 Ethan Marcotte가 만들어냈습니다.


이던 마코트(Ethan Marcotte)라는 웹 디자인 선구자가 이름 지은 '반응형 웹 디자인(Responsive Web Design)'이라는 기법은 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술입니다.

반응적 웹 디자인은 약자로 RWD 라고도 하며, 디스플레이 크기에 맞는 가장 읽기 쉬운 레이아웃의 페이지를, 여러 버전의 사이트를 만들지 않고도 사용자에게 제공할 수 있도록 합니다.

RWD는 하나의 기술로 이루어진 디자인 기법이 아니며, 몇 가지 CSS와 HTML 기술을 결합하여 화면 크기에 맞는 레이아웃의 페이지를 생성할 수 있도록 합니다.







RWD에는 세 가지 개념이 결합되어 있습니다.

  • 레이아웃에는 유연한 격자(flexible grid)를 사용한다.
  • 이미지와 비디오에는 유연한 미디어(flexible media)를 사용한다.
  • 화면 너비에 맞는 스타일을 만드는 부분은 CSS 미디어 질의(media query)를 통해 해결한다.


유연한 격자를 사용하게 되면 고정폭 레이아웃은 만들지 않습니다. 스마트폰 화면은 크기가 다양하므로, 고정폭 레이아웃웃 전혀 어울리지 않기 때문입니다. 대신, 디스플레이 크기에 맞게 페이지를 키우거나 줄일 수 있어야 합니다.

이는 유동적 레이아웃 개념과 관련있습니다.

그리고 유연한 미디어는 이미지나 비디오가 주어진 영역에 맞게 표시될 수 있도록 해야합니다.

즉, 큰 모니터에는 사진을 크게 출력하고, 작은 화면에는 작게 출력하는 것입니다.

마지막으로, 미디어 질의(Media Query)는 브라우저에 보내는 스타일을 현재 상태에 따라 달라 할 수 있는 CSS 테크닉입니다.

예를 들어, 창의 너비가 480픽셀 이하일 때는 특정한 스타일이 렌더링되도록 하고 760픽셀 이상일 때에는 그와는 다른 스타일이 적용되도록 할 수 있습니다. 게다가, 폭만을 기준으로 삼을 수 있는 것은 아닙니다. 태블릿이 가로보기 모드일 때 적용되는 스타일과, 아이폰이나 아이패드에 사용된 레티나 디스플레이처럼 픽셀 집적도가 높은 디스플레이에 적용될 스타일도 구별할 수 있습니다.



Media Query(미디어 질의)

CSS3에는 미디어 질의(media query)라는 개념이 도입되었습니다.

페이지가 전송될 브라우저의 너비와 높이에 맞는 스타일을 선택할 수 있도록 하는 기술로 이를 사용하면 스마트폰에 맞는 스타일과 태블릿에 맞는 스타일, 데스크톱 브라우저에 적합한 스타일을 별도로 만들어서 디스플레이에 최적인 형태로 웹 페이지를 표시할 수 있습니다.

반응적 디자인의 목표는 사이트 방문자가 가장 읽기 편한 페이지를 보여주는 것입니다. 보통은 브라우저 너비에 따라 최적의 디자인을 결정하는 것을 의미합니다.

스마트폰, 태블릿, 그리고 데스크톱 모니터가 웹 브라우징에 가장 보편적으로 사용되므로, 이 세 종류의 디스플레이를 가장 먼저 떠올릴 것입니다.

그러나 이들 장치에도 수많은 변종들이 있습니다.

작은 스마트폰도 있고, 큰 스마트폰도 있으며 7인치, 10인치 태블릿도 있습니다. 그리고 폭은 기기별로 다릅니다.

그러니 목표가 무엇인지 상기해야 합니다.

반응적 디지인의 목표는 창의 너비에 따라 읽기 좋도록 변화하는 페이지를 만드는 것입니다.

그러니 언제 1단이나 2단 레이아웃이 보고 좋으며 언제 4단 레이아웃이 보기 좋은지 알려면, 창의 너비와 레이아웃을 달리하면서 시험해 보아야 할 것입니다.



미디어 쿼리 생성

질의(query)는 웹 브라우저에게 묻는 것입니다.

"지금 브라우저 폭이 480입니까?" 만일 맞다면 브라우저는 바로 그 크기에 맞는 스타일시트를 불러옵니다.

일반 외부 스타일시트를 사용하는 방법과 크게 다르지 않습니다.


미디어쿼리의 기본문법

@media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문}

css
 @media only screen and (max-width:786px) {
    width:100%;
}


[only 또는 not]

only 키워드는 미디어쿼리를 지원 하는 브라우저에서만 해석하게 해주는 키워드입니다.

다시말해, only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능합니다.

생략했을 때 기본 값은 only 로 처리되며 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않습니다.

이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 하게 됩니다.

예를 들어 not tv일 경우 tv를 제외한 모든 미디어유형에만 적용됩니다.

※ ie 6, 7, 8은 미디어 쿼리를 지원하지 않기 때문에 only 키워드는 작성하지 않습니다.



@directive 라고 하는데 한국어로는 지시어 혹은 지시자라고 합니다.

CSS 에서는 주로 이 지시어를 다른 CSS 파일을 추가하는 @import 에서 가장 많이 사용합니다.

그리고 이 directive 용어는 CSS 에만 국한된 것이 아니라 다른 언어의 API, DOC 에서도 유사한 용어를 많이 사용됩니다.



[미디어유형]

기기명

설명

all

모든 장치

all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다.

all 이면 모든 미디어가 이 구문을 해석해야 한다.

all 키워드 대신 screen 또는 print 와 같은 특정 미디어를 구체적으로 언급할 수도 있다.

all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다.

all, screen, print 를 가장 널리 사용한다.

print

인쇄 장치, 즉 프린터에 적용

screen

컴퓨터 화면 장치 또는 스마트 기기의 화면, 즉 모니터에 적용

tv

영상과 음성이 동시에 출력되는 장치

projection

프로젝터 장치

handheld

손에 들고 다니는 소형장치(휴대용 기기나 PDA 적용)

speech

음성 출력 장치

aural

음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)

embossed

점자 인쇄 장치(화면을 읽어 종이에 점지를 찍어내는 장치)

tty

디스플레이 기능이 제한된 장치

braille

점자 표시 장치


매체(Media)의 경우 기본 설정은 all 입니다.

only 는 뒤에 붙는 조건들을 활용하고자 할 때 사용합니다.

  • only 의 경우는 구 버전의 브라우저의 오작동이나 스타일을 차단하는 용도로만 사용한다.
  • screen 이나 all 은 기본적으로 화면에 보일 때 사용하고, only 와 함께 사용할 수 있습니다.

css
@media only screen and (max-width: 480px) {
    // 코드 실행문 ...
}


[and 또는 ,콤마]

  • @media A and B { 실행문 } - A,B 의 조건이 모두 만족하면 실행합니다.
  • @media A , B{ 실행문 } - A, B중 조건이 하나만 만족하더라도 실행합니다.
and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미합니다.

조건이 유일하거나 또는 only, all 과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 합니다.

and 대신 콤마 ‘,’ 기호를 사용하면 ‘OR’ 연산을 수행합니다.

‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석하게 됩니다.

and, 콤마는 생략이 가능합니다.



(조건문) - 괄호 안에 조건문을 작성합니다.

css
@media (min-width:320px) {
    // 실행문 ...
}
@media (min-width:320px) and (max-width:768px) {
    // 실행문 ...
}

  • 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시합니다.
  • 조건문은 두 가지 이상 작성할 수 있습니다.
  • 둘 이상의 조건문은 ‘and’ 키워드 또는 콤마 ‘,’ 기호로 연결해야 합니다
  • {실행문} 일반적인 CSS 코드를 이 괄호 안에 작성하고 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석합니다.

조건문

설명 

조건값 

min/max 사용 여부 

width

웹페이지의 가로 너비값

width속성에서 사용할 수 있는 모든 속성값

사용함

height

웹페이지의 세로 높이값 

device-width

기기의 가로 너비값 

device-height

기기의 세로 높이값 

orientation

기기의 화면 방향 

portrait(세로) , landscape(가로)

사용안함 

aspect-ratio

화면비율 

브라우저 화면비율(1)
브라우저 종횡비(16/9)
브라우저 해상도(1280/720)

사용안함 

device-aspect-ratio

단말기의 화면비율 

기기 화면비율(1)
기기 종횡비(16/9)
기기 해상도(640/320)

사용함 

resolution

기기의 해상도 

300dpi/dpcm 



width / height

뷰포트의 너비와 높이를 정의하고 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다릅니다.

반응형 웹 구현시 가장 일반적으로 사용하는 조건이 입니다.

css
 // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행
@media all and (min-width:768px) and (max-width:1024px) {
    /* Style 작성 */
}

// 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행
@media all and (width:768px), (width:1024px) {
    /* Style 작성 */
}

// 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행
@media not all and (min-width:768px) and (max-width:1024px) {
    /* Style 작성 */
} 


device-width / device-height

스크린의 너비와 높이를 정의하고 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역을 말합니다.

css
// 스크린 너비가 320px ‘그리고’ 높이가 480px 이면 실행
@media all and (device-width:320px) and (device-height:480px) {
    /* Style 작성 */
}

// 스크린 너비가 최소 320px 이상 ‘그리고’ 높이가 최소 480px 이상이면 실행
@media all and (min-device-width:320px) and (min-device-height:480px) {
    /* Style 작성 */
}


orientation

뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단합니다.

css
// 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:portrait) {
    /* Style 작성 */
}

// 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행
@media all and (orientation:landscape) {
    /* Style 작성 */
}


aspect-ratio

뷰포트의 너비와 높이에 대한 비율로 ‘너비/높이’ 순으로 조건을 작성할 수 있습니다.

min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있습니다.

css
// 뷰포트 너비가 16, 높이가 9 비율이면 실행
@media all and (aspect-ratio:16/9) {
    /* Style 작성 */
}

// 뷰포트 너비가 16/9 비율 이상이면 실행
@media all and (min-aspect-ratio:16/9) {
    /* Style 작성 */
}

// 뷰포트 너비가 16/9 비율 이하면 실행
@media all and (max-aspect-ratio:16/4) {

}


device-aspect-ratio

스크린의 너비와 높이에 대한 비율로 ‘너비/높이’ 순으로 조건을 작성할 수 있습니다.

min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있습니다.

css
// 스크린 너비가 16, 높이가 9 비율이면 실행
@media all and (device-aspect-ratio:16/9) {
    /* Style 작성 */
}

// 스크린 너비가 16/9 비율 이상이면 실행
@media all and (min-device-aspect-ratio:16/9) {

}

// 스크린 너비가 16/9 비율 이하면 실행
@media all and (max-device-aspect-ratio:16/9) {

} 


resolution

출력 장치의 해상력에 대응합니다.

min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응합니다.

조건의 값으로 dpidpcm 단위를 사용할 수 있습니다.

css
// 1인치당 96개의 사각형 화소를 제공하면 실행
@media all and (resolution:96dpi) {
    /* Style 작성 */
}

// 1인치당 96개 이상의 화소를 제공하면 실행
@media all and (min-resolution:96dpi) {
    /* Style 작성 */
}

// 1인치당 96개 이하의 화소를 제공하면 실행
@media all and (max-resolution:96dpi) {
    /* Style 작성 */
}


미디어 쿼리를 적용하는 3가지 방식

미디어 쿼리를 HTML 에 적용하는 방식은 다음과 같이 구분해 볼 수 있습니다.

  • <link> 태그를 이용해서 HTML 에서 직접 지정하는 방식
  • @media 지시어를 이용하고 HTML 안에서 내부 스타일로 지정하는 방식
  • @media 지시어를 이용하고 외부 스타일로 지정하는 방식

<link> 태그를 이용해서 HTML 에서 직접 지정하는 방식

html 의 head 안에 지정하는 방식
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Response Web Design</title>
    <link rel="stylesheet" media="all and (max-width:480px) and (orientation:portrait)" href="style/mobile.css" />
    <script src="js/script.js"></script>
</head>

위 코드를 해석하면 화면의 크기가 480px 이고 화면 방향이 세로일 경우에 mobile.css 적용하라는 의미가 됩니다.


@media 지시어를 이용하고 HTML 안에서 내부 스타일로 지정하는 방식

html 안에 CSS를 지정하는 방식
<style media="screen">
    @media only screen and (max-width: 480px) {
        body {
            background-color: #a9a9a9;
        }
    }
</style>

이 방식은 HTML 안에 @media 를 이용하였는데, 이는 구조,표현,제어의 분리 측면에서 좋지 않기 때문에 좋은 방식이라고 할 수 없습니다.

가장 권장할 만한 방식은 마지막 방식입니다.


@media 지시어를 이용하고 외부 스타일로 지정하는 방식

css 파일 안에 @media 를 지정하는 방식
/* 일반 브라우저인 경우 */
body {
    background-color: red;
}

/* 모비알 브라우저인 경우 */
@media screen and (max-width: 480px) { /* iPhone, Android */
    body {
        background-color: blue;
    }
}

이 방식이 구조, 표현, 제어 분리 측면에서 가장 권장되는 방식입니다.


바로 위 코드는 모바일 분기점을 사용했습니다.

사실 Mobile First 관점에서 CSS 미디어쿼리는 모바일용 분기점을 사용하는 것보다 태블릿, PC용 분기점(break-point)를 지정하여 사용하는 것이 좋습니다.


css
@import url(mobile.css) all and (max-width:480px);

미디어 쿼리 작성시 주의사항

min- 키워드는 최소 또는 그 이상이라 는 의미로, 점차 커지는 것을 의미하기 때문에 min- 을 사용할때는 반드시 작은 순서대로 작성해야만 합니다.

css
@media (min-width:320px) {
    /* 코드 블록 ... */
}

@media (min-width:768px) {
    /* 코드 블록 ... */
}

@media (min-width:1024px) {
    /* 코드 블록 ... */
}


max- 키워드는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에 max- 사용시 큰 순서대로 작성해야 합니다.

css
@media (max-width: 1024px) {
    /* 코드 블록 ... */
}

@media (max-width: 768px) {
    /* 코드 블록 ... */
}

@media (max-width: 480px) {
    /* 코드 블록 ... */
}


css
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}


Internet Exploer 6~8 버전 브라우저 문제 해결

IE9+ 를 비롯한 최신 브라우저들이 이미 상당한 수준으로 CSS3 명세를 브라우저에 적용해 두었기 때문에 사실상 표준안이라고 할 수 있습니다.

미디어쿼리는 IE9+ 을 지원하지만 하위호환성을 위해 Internet Exploer 6~8 버전 브라우저에서도 미디어쿼리를 해석할 수 있도록 만들어 주는 JavaScript 라이브러리가 있습니다.

respond.min.js 라고 부르는 이 파일은 약 4KB 정도의 용량으로 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github 에서 언제든 내려받아 사용할 수 있다.

respond.min.js 다운로드


respond.min.js 파일을 HTML 문서의 태그 부분에 다음과 같은 방식으로 삽입하면 IE 6~8 버전 브라우저가 미디어쿼리 규칙을 해석할 수 있게 됩니다.

html
<head>
    <!--[if lt IE 9]>
        <script type="text/javascript" src="http://domain.com/libs/respond.min.js"></script>
    <![endif]-->
</head>

IE 브라우저만 해석할 수 있는 조건부 주석을 사용했기 때문에 다른 표준 브라우저들은 이 코드를 무시하고 JS 파일을 요청하지 않습니다.

조건부 주석에서 [if lt IE 9]의 의미는 '[if less than IE 9]' 입니다.

즉, Internet Exploer 9 미만의 브라우저에서만 해석하라는 의미입니다.


respond.min.js 파일은 로컬에서는 실행이 되지 않습니다.

웹 서버에 HTML, JS 파일을 모두 올려놓고 웹 서버에 있는 파일을 실행해야만 동작합니다.



오래된 모바일 브라우저 문제 해결

respond.min.js 파일이 미디어쿼리를 지원하지 않는 낡은 모바일 브라우저의 문제까지 해결해 주지는 못합니다.

그러나 모바일 퍼스트 CSS 전략으로 이 문제를 해결할 수 있습니다.

모바일 퍼스트의 핵심은 낡은 모바일 브라우저가 미디어쿼리 구문을 해석하지 못하기 때문에 모바일을 위한 CSS 코드를 미디어쿼리 구문 밖에 작성하는 방식입니다.

모바일 퍼스트 코드 예제는 다음과 같이 작성할 수 있습니다

css
/* 모바일용 CSS 코드를 여기에 작성 */

@media all and (min-width:768px) {
    /* 모바일용이 아닌 CSS 코드를 여기에 작성 */
}

모바일용 CSS 코드가 미디어쿼리 밖에 작성됐기 때문에 모든 장치가 모바일용 CSS 코드를 해석합니다.

모바일이 아닌 장치도 모바일용 코드를 해석하는 것은 문제가 되나 미디어쿼리 안쪽에 모바일이 아닌 장치를 위한 CSS가 거듭 선언되어 있기 때문에 모바일용 코드를 덮어쓰게 됩니다.

결국 모든 모바일 장치는 미디어쿼리 지원 여부에 관계 없이 모바일용 CSS 코드를 해석할 수 있게 되고 미디어쿼리 구문 안쪽의 코드는 조건에 맞지 않거나 또는 미디어쿼리 규칙을 지원하지 않기 때문에 아예 해석하지 않습니다.

모바일이 아닌 장치는 미디어쿼리 구문 안쪽을 해석함으로써 모바일과 모바일이 아닌 장치의 뷰를 분기할 수 있게 됩니다.

이렇게 모든 장치의 하위 호환성을 우선 고려하여 개발하는 방식을 점진적(단계적) 기능 향상 개발이라고 합니다.

모바일 퍼스트는 반응형 웹의 점진적 향상 개발 기법으로 반응형 웹의 필수적인 고려 사항이라고 할 수 있습니다.



모바일 퍼스트 전략을 위한 미디어쿼리 작성 방법

종합적인 상황에 따라 미디어쿼리를 다양하게 작성할 수는 있지만 코드의 가독성 및 최적화, 그리고 유지보수를 위해서는 다음과 같은 미디어쿼리를 작성하는 것을 권장합니다.

css
@charset "utf-8";

/* All - 모든 해상도 공용 스타일 */
/* Style 작성 */


/* Mobile - 모바일 해상도 전용 스타일 */
/* Style 작성 */


/* Tablet & Desktop #1 - 태블릿 PC와 데스크톱 공용 스타일 #1 */
@media all and (min-width:481px) {
    /* Style 작성 */
}

/* Tablet & Desktop #2 - 태블릿 PC와 데스크톱 공용 스타일 #2 */
@media all and (min-width:768px) {
    /* Style 작성 */
}

/* Desktop - 데스크톱 전용 스타일 */
@media all and (min-width:990px) {
    /* Style 작성 */
}


미디어 쿼리의 문제점

미디어 쿼리는 하나의 HTML 에 다양한 CSS 를 적용할 수 있기 때문에 반응형 웹을 만드는 경우에 기본적으로 사용됩니다.

하지만, 이 방식에도 다음과 같은 단점이 있기 때문에 프로젝트 구성에 따른 진행여부를 신중히 판단해야 합니다.


  • 모바일 환경에서는 가능하면 HTML 양을 줄이는 것이 좋지만 미디어쿼리를 이용하는 HTML은 기존 HTML은 그대로 사용하고 화면을 제어하는데 사용하기 때문에 실제로 모바일 브라우저가 받아야하는 데이터의 양은 테스크톱의 경우와 비슷한 경우가 많습니다.
  • 실제 데이터를 담당하는 HTML 은 하나로 구성되기 때문에 데스크톱과 모바일 환경의 유지 보수에 혼란스러운 상황이 발생할 수 있습니다.(HTML 구성이 변경되는 경우에 모바일 환경에서 화면까지 변경될 수 있습니다.)
  • 뷰포트 설정과는 달리 미디어 쿼리는 일반 브라우저에서도 적용되기 때문에 데스크톱에서 브라우저의 화면 크기 조정(리사이징)만으로도 원하지 않는 화면 구성을 보게 될 수 있습니다.
  • 자원(리소스)의 제약도 커다란 문제가 될 수 있습니다. 모바일 환경에서는 데스크톱보다 적은 이미지나 자바스크립트를 사용해야만 합니다. 특히 이미지는 문제가 좀 더 예민한 부분인데 iOS 의 경우는 하나의 페이지에서 사용할 수 있는 리소스의 양을 제한하기 대문에 실행이 강제로 종료되는 경우가 발생하기도 합니다.
  • 태블릿 환경에서는 화면의 해상도가 높으므로 일반 데스크톱용 CSS 가 적용될 수는 있지만, 사용자가 볼 때 태블릿은 스마트 기기이므로 모바일 화면처럼 보고 싶어하는 상황에는 적절히 대처할 수 없습니다.

미디어 쿼리는 사용자의 환경에 따라 반응하는 웹 페이지를 제작할 수 있다는 점에서 상당한 장점을 가지고 있지만 위와 같은 문제점도 있습니다.

따라서 기업 규모의 웹 페이지라면 억지로 하나의 HTML 로 데스크톱과 모바일 환경을 맞추기보다는 데스크톱용 웹 페이지와 모바일용 윂 페이지의 도메인을 구분하는 것이 훨씬 나을 수도 있습니다.

물론 유지보수 측면에서도 용이합니다.

특히, 대규모의 웹 페이지를 신규 구축하거나 리뉴얼을 하는 경우에는 기획자의 콘텐츠 성격에 대한 분석과 반응형 웹에 대한 이해가 선행되어야만 안정적인 프로젝트를 진행할 수 있을 것입니다.







Jaehee's WebClub


'StyleSheet > CSS' 카테고리의 다른 글

Cascading Style Sheet  (0) 2016.09.16
CSS Selector  (0) 2016.09.06
Mobile Web(모바일 웹) #2 - CSS, tech for Mobile Web  (2) 2016.09.06
Mobile Web(모바일 웹) #1  (0) 2016.09.06
CSS3 3D effect(perspective) #1  (0) 2016.08.26