NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS3 미디어쿼리 이해

본문 건너 뛰기

출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다.

CSS 코드 내부에서 분기하는 방법

CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다.

@media only all and (조건문) {실행문}

  • @media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
  • only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
  • all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
  • and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 ‘,’ 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다. OR 조건을 위한 콤마 ‘,’ 기호 사용시 유의점.
  • (조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 ‘and’ 키워드 또는 콤마 ‘,’ 기호로 연결해야 한다.
  • {실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.

CSS 코드 외부에서 분기하는 방법

조건문에 따라 별도의 외부 CSS 파일을 참조하여 분기하는 방법은 다음과 같다. 이 방식은 성능 최적화 측면에서 권장하지 않는다.

<link rel=”stylesheet” type=”text/css” media=”all and (조건A)” href=”A.css”>
<link rel=”stylesheet” type=”text/css” media=”all and (조건B)” href=”B.css”>

데스크탑 브라우저 사용자가 언제든 조건을 변경(예를 들면 창 크기를 조절해서 해상도를 바꿈)할 수 있기 때문에 웹 브라우저는 조건에 관계 없이 A.css 파일과 B.css 파일을 항상 요청한다. HTTP 요청을 불필요하게 두 번 발생시켜 이 페이지를 처음 로딩하는 사용자에게는 성능 저하의 원인이 된다. CSS 파일은 하나로 병합하고 CSS 코드 내부에서 조건 분기하는 방식을 권장한다.

미디어 쿼리 코드 템플릿

아래 코드는 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿이다. All, Mobile, Tablet, Desktop 으로 기기별 대응 코드를 분류 했지만 Liquid 레이아웃 기법을 사용하면 사실상 모든 해상도를 커버할 수 있다.

@charset “utf-8”;

/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

조건문이 될 수 있는 특징들

width / height

뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.

  • Value: <length>
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: yes

Example:

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

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

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

device-width / device-height

스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.

  • Value: <length>
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: yes

Example:

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

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

orientation

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

  • Value: portrait | landscape
  • Applies to: bitmap media types
  • Accepts min/max prefixes: no

Example:

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

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

aspect-ratio

뷰포트의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.

  • Value: <ratio>
  • Applies to: bitmat media types
  • Accepts min/max prefixes: yes

Example:

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행

@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행

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

device-aspect-ratio

스크린의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있다.

  • Value: <ratio>
  • Applies to: bitmap media types
  • Accepts min/max prefixes: yes

Example:

@media all and (device-aspect-ratio:5/4) { … } // 스크린 너비가 5, 높이가 4 비율이면 실행

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

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

color

출력 장치의 색상에 대한 비트 수. 출력 장치가 컬러가 아닌 경우 ‘0’의 값에 대응한다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (color) { … } // 출력 장치가 컬러를 지원하면 실행

@media all and (color:0) { … } // 출력 장치가 컬러가 아니면 실행

@media all and (color:8) { … } // 출력 장치가 8비트 색상이면 실행

@media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면 실행

@media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

color-index

출력 장치가 색상 색인 테이블을 사용하는 경우 표현할 수 있는 색의 수. 출력 장치가 색상 색인 테이블을 사용하지 않으면 ‘0’의 값에 대응한다. 현재 제대로 지원하는 브라우저가 없다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용하면 실행

@media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용하지 않으면 실행

@media all and (color-index:256) { … } // 출력 장치가 256 색을 지원하면 실행

@media all and (min-color-index:256) { … } // 출력 장치가 256 이상 색을 지원하면 실행

@media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원하면 실행

monochrome

출력 장치가 흑백인 경우 픽셀당 비트 수. 출력 장치가 흑백이 아니라면 ‘0’의 값에 대응한다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (monochrome) { … } // 출력 장치가 흑백이면 실행

@media all and (monochrome:0) { … } // 출력 장치가 흑백이 아니면 실행

@media all and (min-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이상이면 실행

@media all and (max-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이하이면 실행

resolution

출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpi와 dpcm 단위를 사용할 수 있다.

  • Value: <resolution>
  • Applies to: bitmap media types
  • Accepts min/max prefixes: yes

Example:

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

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

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

scan

TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.

  • Value: progressive | interlace
  • Applies to: “tv” media types
  • Accepts min/max prefixes: no

Example:

@media tv and (scan:progressive) { … } // 초당 60회 수준의 고화질 스캔 방식 TV에 대응한다

@media tv and (scan:interlace) { … } // 초당 30회 수준의 일반 스캔 방식 TV에 대응한다

grid

출력 장치가 그리드 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 ‘0’과 ‘1’ 뿐이고 ‘0’의 값은 비트맵 방식에 대응한다.

  • Value: <integer> 0 | 1
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: no

Example:

@media all and (grid) { … } // 출력 장치가 그리드 방식이면 실행

@media all and (grid:0) { … } // 출력 장치가 그리드 방식이 아니면 실행

@media all and (grid:1) { … } // 출력 장치가 그리드 방식이면 실행

분류: CSS,웹 기획,웹 디자인,웹 표준 | 2012년 5월 30일, 11:15 | 정찬명 | 댓글: 36개 |
트랙백URI - http://naradesign.net/wp/2012/05/30/1823/trackback/

36개의 댓글이 있습니다.

  1. 황규연 댓글:

    정리에 신!! 다우시네요~^^;
    꾸준한 블로그 글에 감탄을 안 할 수가 없습니다.

  2. 정찬명 댓글:

    @황규연
    에구 고맙습니다. 저 가운데 실제로 사용할 일이 있어보이는 것들은 정말 몇 개 안되는데 궁금하더라구요. ㅎㅎ

  3. 알고싶어요 댓글:

    미디어쿼리로 반응형웹을 만들고 있는대요..
    파폭에서는 잘되는데
    IE8에서는 모바일형태로만 나오더라고요..
    respond.min.js 을 넣으면 해결되는 걸로 알고 있었는데..
    잘못 알고 있는 건가요~~
    넣었는데도 안되더라고요.. ㅠㅠ
    혹시 자바스크립트가 적용이 안되나 싶어서
    얼럿창까지 띄워서 확인해봤는데 얼럿창이 띄는 걸 보니
    respond.min.js이 적용은 되는 거 같은데…
    왜 안될까요? ㅠㅠ
    이 말만 봐서는 선생님도 원인을 모르시겠지요…?

  4. 정찬명 댓글:

    @알고싶어요
    혹시 IE 9 브라우저에서 개발자도구(F12)를 이용하여 IE 8 모드로 렌더링 하는 것이라면 제대로 표시가 되지 않습니다. 브라우저 모드와 문서 모드를 동시에 모두 IE 8로 설정해야만 제대로 표시 됩니다. 그리고 로컬에서는 실행이 되지 않습니다. 웹 서버에 HTML, JS 파일을 모두 올려놓고 웹 서버에 있는 파일을 실행해야 합니다.

  5. 알고싶어요 댓글:

    선생님 그걸…. 수업시간에 들은 거 같아요…
    들은 걸 까먹은 저를 용서하세요… ^^;

  6. 알고싶어요 댓글:

    선생님 방금 서버에 올려서 테스트해봤는데
    아주 잘되요~ 랄랄 하하

  7. 러브박스 댓글:

    css파일 안에 위의 내용을 삽입후 저장하고 link로 불러와야 하나요?

    아니면 html파일 안에 [style type=~~~~~] [/style]

    이 사이에서 만들어야하나요?

  8. 참새 댓글:

    안녕하세요. CSS공부하고 있는 학생입니다. 검색하다 보면 이쪽으로 간간이 들어오게 되던데 오늘은 질문하나 드리고 싶어서 글 남깁니다.ㅎ
    moblie device에서는 “미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.”고 하셨는데.
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {

    처럼 직접 디바이스나 브라우저 해상도 사이즈를 지정해서 스타일을 작성하는 방법과는 좀 다른것 같습니다.

    나라님 말씀대로 공통속성과 같은 스코프에 모바일용 스타일을 작성하게 되었을때.
    모바일에만 보여지고 싶은 스타일 몇개를 작성했다면.
    데스크탑같은 그 상위 해상도의 미디어쿼리 스타일을 작성할때 모바일용에서 먼저 적용된 스타일을 해제시켜야 하는 코드가 들어가게 될 것 같은데요.

    이것은 오히려 모바일용 미디어쿼리를 작성했을때보다 불필요한 코드가 해당 갯수만큼 늘어나는 결과를 가져와서 오히려 좋은방법이 아닌것 같은 생각이 듭니다.

    하지만 모바일기기에서 미디어쿼리를 지원하지 않을 수 있다는 부분에 대해서는 잘 몰랐던 부분이라 얼마나 많은 장치들이 미디어쿼리를 지원하지 않는지도 궁금합니다.ㅠ

  9. 정찬명 댓글:

    @러브박스
    두 가지 방법 모두 가능하고 유효한 방법입니다. ^^

  10. 정찬명 댓글:

    @참새
    네, 맞습니다. 모바일에서 작성한 코드는 미디어쿼리 안쪽의 코드에도 영향을 미치기 때문에 데블릿이나 데스크톱 CSS가 작성되어 있는 미디어쿼리 구문 안쪽에서 모바일용 코드를 오버라이드 해야 합니다. 그러나 생각보다 오버라이드 해야 하는 양이 그리 많지는 않습니다. 만약 데스크톱 CSS를 모바일에서 오버라이드 해야 한다면 많은 코드를 덮어쓰기 해야 하겠지만 디자인 요소가 적은 모바일 코드를 덮어쓰기 하는 것은 그리 어려운 일은 아닐껍니다. 물론 이 부분은 웹 브라우저의 개발자 도구를 얼마나 잘 활용할 줄 아는지에 따라 효율이 달라질 수는 있습니다.

    현재 스마트폰 가운데 웹킷 계열 브라우저를 사용하는 아이폰이나 안드로이드 폰에서 미디어쿼리를 잘 지원하고 있습니다. 2012년 현재 약 50% 정도인 것으로 알고 있구요. http://goo.gl/vbDfl 나머지 50% 정도는 제대로 지원하지 않거나 또는 지원 여부를 저도 알 수가 없습니다.

  11. 알고싶어요 댓글:

    예전에는 디자인이 복잡하지 않아서
    하나의 css에 미디어쿼리를 전부 나열했었는데요..

    페이지의 디자인이 복잡해지고 해당 html과 css가 복잡해져서
    거의 쿼리마다 각각의 css를 넣어줘야 하는 상황이 되었습니다.
    (물론 아직 제가 실력이 부족한 이유도 있겠지만요^^;)

    하나의 css파일에 넣는 것보다 쿼리마다 각각 css파일을 나눠서
    만들어서 하나의 파일에 다른 파일을 임포트 시켜서 사용했습니다.
    main.css에 맨 위에서 파일들을 임포트하고
    밑에는 모바일용 미디어쿼리가 들어있습니다.

    @import url(tablet.css);
    @import url(deskTop.css);
    -모바일용css나열-

    그런데 익스플로러에서는 모바일용으로만 나오고 다른 쿼리가 적용되지 않아요..
    서버에 올려서 확인했고 다른 브라우져에서는 다 잘나온답니다.
    왜 그럴까요…

  12. 정찬명 댓글:

    @알고싶어요
    @import 규칙은 나쁜 성능 때문에 사용하지 않는것이 좋습니다. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

    미디어쿼리 규칙이 IE에서 작동하지 않는것은 respond.min.js 파일이 해석되지 않았다는 의미인데요. 왜 작동하지 않았는지는 이 문제가 재현되는 페이지를 보지 않고는 알 수가 없습니다.

  13. […] http://naradesign.net/wp/2012/05/30/1823/ N 스크린 – 파일의 이동 없이 어디서든 볼 수 있는 것 예를들어 PC에서 보던 영상을 스마트폰이나 태블릿에서 볼 수 있도록 하는거 광고에서 스마트폰에서 보던걸 PC 모니터에서 보도록 하는…그거 한국 서비스 : 티빙, 에브리온TV, 호핀, 올레TVnow, pooq 등 21. 모바일 UI 프레임워크 종류, 특징, UX […]

  14. 김지민 댓글:

    안녕하세요. 매번 좋은 포스팅 잘 보고 있습니다.

    한 가지 멀티 조건 주는 문제에서 조금 고민이 되는데요.

    @media only screen and (max-device-width:640px) and (device-aspect-ratio:9/16), (device-aspect-ratio:16/9) {
    }

    처럼 작성하면 디바이스 가로와 상관 없이 마지막 기술된 16/9 비율만 맞아도 true로 인식해서 작동하더라고요. 제가 원하는 조건은 최대 디바이스 가로가 640인 장비에 한해서 16/9 혹은 9/16 비율인 경우 적용하고 싶은 것이었는데요.

    이를 위한 css media query 기술 방법은 없는 것일까요?

  15. 정찬명 댓글:

    @김지민
    아래와 같이 작성해 보시겠어요? 콤마(,) 연산자는 OR 연산을 수행하지만 콤마 기준으로 분리된 조건들은 서로 공유하지 않기 때문에 아래와 같이 완전히 새로 값을 작성해 줘야 합니다.

    @media
    only screen and (max-device-width:640px) and (device-aspect-ratio:9/16),
    only screen and (max-device-width:640px) and (device-aspect-ratio:16/9) {
    }

    이 부분은 저도 작성할 때는 몰랐는데요. 질문 주신 덕분에 테스트 해보고 알게 됐네요. 좋은 질문 감사해요. ^^

  16. 장정식 댓글:

    음, 안그래도 다양한 안드로이드 OS 기반 디바이스들이 많아져서,
    어떻게 분기처리를 해야하나 고민했었는데.

    정말 정리 잘 해 주셔서 감사드립니다!!

  17. 김지민 댓글:

    아하! 정말 감사합니다. 훨씬 깔끔한 코드를 쓸 수 있겠네요. ^.^

  18. 나그네 댓글:

    질문 좀 할께요. ^^

    RWD 작업 중에 IE9 이하 미디어쿼리를 위해 respond.js 를 로컬 웹서버(XAMPP)에서 적용하니 제대로 동작하질 않는데 꼭 리모트 웹서버여야만 하는 것인지요?

  19. 댓글:

    질문이요..

    화면 너비가 1030px 이하일때
    @media all and (max-width: 1030px) { …..}

    화면 너비가 1010px 이하일때
    @media all and (max-width: 1010px) { …. }

    이렇게 작업 하면 모바일에선 1:1로 안보이는데 왜 그런걸까요?

  20. 정찬명 댓글:

    @나그네
    로컬 웹서버로 테스트해 본적이 없어서 저도 잘 모르겠습니다. ^^

  21. 정찬명 댓글:

    @맹
    질문을 정확하게 이해를 못했습니다. 모바일에서 1:1로 보인다는게 화면을 확대하거나 축소하는 문제라면 meta 태그를 이용하여 viewport를 설정해야 합니다.

  22. 안녕하세요 댓글:

    respond.js를 head안에 넣고, css는 따로 파일을 뺴서 이런식으로 하고 톰캣으로 서버실행시켜서 해봤는데…ie7,8, 에서 안됩니다…크롬 사파리 다 되는데 ie만 이러네요…하루종일 이것만 붙잡고있네요..구글코드를 써봐도 똑같네요..뭐가 문제인가요?

    include 순서를 바꿔봐도 똑같습니다

  23. 정찬명 댓글:

    @안녕하세요
    respond.min.js 파일은 로컬 파일에서 동작하지 않는데요. 아마도 로컬 서버에서도 비슷한 이유로 안 될 수 있습니다. 실 서버 환경에서 한번 테스트해 보시겠어요?

  24. 익명 댓글:

    미디어쿼리에 대해서 궁금했는데 궁금증이 확 풀렸습니다 감사합니다!

  25. […] …. 정찬명님의 css3 미디어쿼리에 관한 글입니다. […]

  26. 에어코니 댓글:

    IE 8 버전 이하에서 media쿼리가 적용되지않아 막 검색하다가 흘러왓네요.
    기본적인 것들이 정리가 잘되있어서 다시 한번 공부했습니다

    저도

    이런 js라던가

    이런 js도 경로에 맞게 써서 ftp서버로 올리고 실제 ie8버전인 인터넷으로 확인해봤는데 적용이 안되서 답답하네요.
    좀 더 알아보고 여차하면 그냥 ie8이하버전은 아예 css적용이 안되게 처리할까봐요

  27. 정찬명 댓글:

    @에어코니
    댓글에 태그를 사용해서 ‘이런’ 에 대한 맥락이 누락 된 것 같은데 잘 해결 되시길 바랍니다. ㅎㅎ

  28. 익명 댓글:

    미디어쿼리에 대해 찾고있었는데, 너무 좋은 정보라서 이렇게 댓글 남깁니다 :)
    감사합니다

  29. 익명 댓글:

    orientation: landscape 로만 썼을 경우에 모바일 키보드로 화면이 가려질때에도 landscape로 적용돼서 곤란했었는데 min-aspect-ratio로 바꾸니까 원하는대로 동작하네요 ㅎㅎ 덕분에 좋은것 알아갑니다

  30. 전승연 댓글:

    덕분에 개념정리 잘 하고 가요~고맙습니다.

  31. 이상현 댓글:

    따봉을 드리고 싶습니다~! 좋은 정리네요~!!

  32. 익명 댓글:

    잘 정리되어 감사하게 잘 보았습니다.

  33. […] and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 ‘,’ 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다. OR 조건을 위한 콤마 ‘,’ 기호 사용시 유의점. […]

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님