반응형 웹을 위한 조건무 선언, 미디어쿼리, 조건문

devforest443·2022년 7월 27일
0

log 2015. 4. 29. 13:07

조건부 선언

<head>  
  <!--[if lte IE 8] 스크립트는 css보다 더 아래에 적용한다.--> 
  <link rel="stylesheet" href="" type="text/css"/> 
  <script src="respond.min.js"></script> 
  <!--[endif]-->  
  
  <!--[if lte IE8] CSS3를 위한 미디어쿼리--> 
  <link rel="stylesheet" type="text/css" href=""/> 
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
  </script> 
  <!--[endif]-->  
  
  <!--조건문에 따른 외부 CSS파일 연결 : 이방식은 성능 최적화 측면에서 권장하지 않는다. 권장 : 하나의 CSS안에서 조건을 준다.--> 
  <link rel="stylesheet" type="text/css" href="A.css" media="all and (조건A)"/> 
  <link rel="stylesheet" type="text/css" href="B.css" media="all and (조건B)"/> 
</head>

미디어 타임

@media only all and (조건문) {
: 조건문 사이에 포암되어 있는 공백은 필수 적이다. 
@media : 미디어 쿼리 시작문 선언
only {
: 미디어 쿼리를 지원하는 사용자 에이전트만 쿼리구문을 해석하라는 명령어 이다.
: 생략가능, 생략시 기본값은 only로 처리 된다.
: 생략해도 무방하므로 일반적으로 작성하지 않는다. 이자리에는 not 키워드를 사용할 수 있다.
not 키워드는 뒤에 오는 모든 조건을 부정하는 연산.
}
all { 
: 미디어 쿼리를 해석해야 할 대상 미디어를 선언.
: 모든 미디어가 이 구문을 해석해야 함
: 생략가능, 생략시 기본값은 all로 처리 된다.
: 그밖의 타임 (all, aural,braille, embossed, handheld, print, projection, screen, speech, tty, tv) 이 있다.
: all, screen, print를 가장 널리 쓰인다.

and {
: 논리적으로 'AND' 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다.         
: 조건이 유일 하거나 또는 only,all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 않는다.         
: and 대신 콤마 ',' 기호를 사용하면 'OR' 연산을 수행한다. 
}
조건문 {
: 브라우저는 조건문이 참일 때 실행문을 처리하고 거짓일 때 무시한다.
: 조건문은 두가지 이상 등장할 수 있다. 
: 둘이상의 조건문은 and or 콤마 기호로 연결한다.ex. @media all and (min-width:768px) and (max-width:959px) }
실행문 {
: 일반적인 CSS 코드를 {}이 괄호 안에 작성한다. 조건문이 참일 때 실행문 안쪽에 있는 CSS코드를 해석한다.
}
}

조건문

width/height {
뷰포트의 너비와 높이, 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.
Value : (length)
Applies to : visual and tactile media types
Accept min/max prefixes: yes
@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 : (langth)
Applies to : visual and tactile media types
Accepts min/max prefixes : yes

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

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

orientation {
뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지 판단.
Value : portrait | landscape
Applies to : bitmap media types
Accepts min/max prefixes: no

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

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

aspect-ratio {
뷰포트의 너비와 높이에 대한 비율. '너비/높이' 순으로 조건을 작성. 'min/max' 접두사 사용시 너비값의 최소/최대 비율을 정할 수 있다.

Value : (ratio)
Applies to : bitmap media types
Accepts min/max prefixes : yes

@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

@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

@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

@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

@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

@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 tractile media types
Accepts min/max prefixes : no

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

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

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

profile
devforest443

0개의 댓글