[JQUERY] 반응형 웹 레이아웃 구조 media query
데모보기
http://relation.co.kr/images_board/board_system_publishing/82/test/test.html
미디어 쿼리는 브라우져 사이즈에 따라 레이아웃을 작성하거나, 다른 미디어 종류에 따라 따른 CSS 코드를 작성하는 등, 반응형 웹페이지를 작성할 때
유용한 구문입니다.
▶ @media 브라우저 지원
ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+
▶ 미디어 쿼리 사용법
미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다.
css 내부에 삽입하기
<style>
@media (max-width: 700px) {
.container{
margin:0px; padding: 0px;
}
}
</style>
링크로 연결할 때
<link red="stylesheet" media="(max-width: 700px)" href="test.css" />
*test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다.
CSS란? (HTML과 CSS의 차이, CSS 작성법)
▶ 미디어 쿼리 문법
css에서
@media not|only media type and (media feature) {CSS-Code;}
링크로 연결할 때
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="test.css">
위 문법을 하나씩 살펴 볼게요.
우선 and나, not, only 등을 연산자라고 부르는데요.
연산자는 and, 쉼표, not, only가 있습니다.
▷ 연산자
and | not | only | ,
● and 연산자 : 여러 미디어 특징들을 하나로 결합함 .
● , (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.
● not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.
● only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지
* not이나 only를 사용하려면 미디어 타입을 규정해야 함.
* 미디어 쿼리는 대소문자 구별하지 않는다
사용 예.
가장 단순한 형태의 미디어 쿼리
@media (min-width: 700px) {background-color: yellow;}
위 구문에서 미디어 타입이 생략되어 있지만, 미디어 타입의 기본값은 all입니다.
따라서 다음 구문과 같은 말임
@media all and (min-width: 700px) {...}
모든 유형의 장치이며 최소너비 700px 일 때 스타일을 적용하겠다는 의미
and 연산자의 사용
*새로운 미디어 특징들을 추가할 때마다 and 연산자를 사용합니다.
@media (min-width: 700px) and (orientation: portrait) { ... }
위 예는, 모든 유형의 장치이며 최소 너비 700px 이며, 방향이 세로 모드일 때만 적용한다는 뜻
@media print and (min-width: 700px) and (orientation: landscape) { ... }
프린트 장치이며, 최소 너비가 700px이며, 방향이 가로일 때 적용함.
쉼표 연산자의 사용
*쉼표는 각각 개별 미디어 쿼리로 인식합니다.
@media (min-width: 700px), print and (orientation: landscape) { ... }
모든 장치에서 최소너비 700px이상일 때 적용하거나, 프린트 장치에서는 가로 방향일 때만 적용하겠다는 뜻.
not 연산자의 사용
@media not all and (color) { ... }
not은 전체 미디어 쿼리를 수식합니다. 즉 not은 all and (color)를 포함하여 부정함.
@media not (all and (color)) { ... } 와 같은 말
모든 색상 장치에서 이 스타일을 적용하지 않겠다는 뜻.
쉼표로 분리하여 사용할 때, 미디어 구문은 개별 미디어 쿼리로 인식하므로
not은 쉼표 이후에 영향을 미치지 않습니다.
@media not screen and (color), print and (color)는
따라서 위 예는, 모든 스크린 색상 장치에서 적용하지 않거나, 프린트 색상 장치에서 적용하겠다는 뜻
only 연산자 사용
<link rel="stylesheet" media="only screen and (color)" href="test.css" />
오직 스크린에 색상 장치일 때만 이 스타일을 적용하겠다는 뜻.
▷ media type(미디어 종류)
all | print | speech| screen
● all 기본값. 모든 미디어 장치에 사용 됨
● print 프린터에 사용
● screen 컴퓨터 스크린, 테블릿, 스마트폰 등
● speech 페이지를 읽어주는 화면 낭독기
미디어 종류 중 퇴화된 것.
aural ,braille, embossed, handheld, projection , tty, tv
▷ media feature(미디어 특징)
width | height | min-width | min-height | max-width | max-height
device-width | device-height | min-device-width | min-device-height | max-device-width | max-device-height
aspect-ratio (min- / max- 접두어 사용가능)
device-aspect-ratio (min- / max- 접두어 사용가능)
color (min- / max- 접두어 사용가능)
color-index (min- / max- 접두어 사용가능)
monochrome (min- / max- 접두어 사용가능)
resolution (min- / max- 접두어 사용가능)
scan | grid
● width 화면 영역 너비(브라우저 창 같은)
예 1: @media (min-width: 20em) {...}
* 모든 장치에서 최소 너비 20em 이상이면 적용
예2 : <link rel="stylesheet" media="screen and (min-width: 500px) and (max-width: 800px)
href="test.css" />
* 스크린 장치 최소 화면이 500px보다 크고 800px보다 작을 때 스타일 적용
● height 화면 영역 높이
● device-width 출력 장치의 너비.(컴퓨터 스크린 같은)
예 : <link rel="stylesheet" media="screen and (max-device-width: 450px)" />
* 장치 너비가 450px보다 작을 때 적용
● device-height 출력 장치의 높이
● aspect-ratio 화면 영역의 가로 세로 비.
기호 '/'을 사용하여, 앞에는 수평 픽셀 비율. 뒤에는 수직 픽셀 비율 (양수이며 정수)
예 : @media screen and (min-aspect-ratio: 1/1) { ... }
*가로 화면 비가 1:1 이상일 때 적용. 즉, 화면이 직사각이거나 세로일 때만 적용
● device-aspect-ratio 출력 장치의 가로세로 비.(첫번째 값이 수평픽셀 비, 두번째 값이수직 픽셀 비)
예: @media screen and (device-aspect-ratio: 16/9) { ... }
* 장치 가로 세로 비가 16:9일 때 적용.
● color 출력 장치의 색상 구성요소 당 비트 수 (장치가 색깔 장치가 아니면 값은 0)
예1 : @media all and (color) { ... }
* 모든 색상 장치에 적용.
예 2: @media all and (min-color: 4) { ... }
* 색상 구성요소당 최소 4비트를 지닌 장치에 적용
● color-index 장치가 표시할 수 있는 색상 수
예: <link rel="stylesheet" media="all and (min-color-index: 256)" href="test.css" />
* 최소 256 색상을 지닌 모든 장치에 적용
● grid 출력 장치가 그리드 장치 또는 비트맵 장치냐에 따라 결정.
장치가 그리드 기반이면 값은 1. 그렇지 않으면 0
● monochrome 흑백(회색톤)장치에 색상 당 비트 수.
장치가 흑백이 아니면, 값은 0
예: @media all and (monochrome) { ... }
* 모든 흑백장치에 적용
● orientation 화면이 가로 모드인지, 세로 모드인지 지정
예 : @media all and (orientation: portrait) { ... }
*오직 세로 방향에서만 적용.
● resolution 출력 장치의 해상도
해상도는 dpi (dots per inch)나, dpcm(dots per cintimeter)로 지정
예: @media screen and (min-resolution: 300dpi) { ... }
* 최소 300dpi 이상 해상도를 지닌 장치에 적용
● scan 텔레비전 출력 장치의 스캐닝 과정
값은 progressive | interlace
*tv값이 퇴화되었으므로 이 값도 사용하지 않을 것 같네요
[참조 사이트]
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
출처: http://dol2156.tistory.com/146 [적게 작성하고, 보다 많이 한다.]
http://relation.co.kr/images_board/board_system_publishing/82/test/test.html
미디어 쿼리는 브라우져 사이즈에 따라 레이아웃을 작성하거나, 다른 미디어 종류에 따라 따른 CSS 코드를 작성하는 등, 반응형 웹페이지를 작성할 때
유용한 구문입니다.
▶ @media 브라우저 지원
ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+
▶ 미디어 쿼리 사용법
미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다.
css 내부에 삽입하기
<style>
@media (max-width: 700px) {
.container{
margin:0px; padding: 0px;
}
}
</style>
링크로 연결할 때
<link red="stylesheet" media="(max-width: 700px)" href="test.css" />
*test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다.
CSS란? (HTML과 CSS의 차이, CSS 작성법)
▶ 미디어 쿼리 문법
css에서
@media not|only media type and (media feature) {CSS-Code;}
링크로 연결할 때
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="test.css">
위 문법을 하나씩 살펴 볼게요.
우선 and나, not, only 등을 연산자라고 부르는데요.
연산자는 and, 쉼표, not, only가 있습니다.
▷ 연산자
and | not | only | ,
● and 연산자 : 여러 미디어 특징들을 하나로 결합함 .
● , (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.
● not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.
● only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지
* not이나 only를 사용하려면 미디어 타입을 규정해야 함.
* 미디어 쿼리는 대소문자 구별하지 않는다
사용 예.
가장 단순한 형태의 미디어 쿼리
@media (min-width: 700px) {background-color: yellow;}
위 구문에서 미디어 타입이 생략되어 있지만, 미디어 타입의 기본값은 all입니다.
따라서 다음 구문과 같은 말임
@media all and (min-width: 700px) {...}
모든 유형의 장치이며 최소너비 700px 일 때 스타일을 적용하겠다는 의미
and 연산자의 사용
*새로운 미디어 특징들을 추가할 때마다 and 연산자를 사용합니다.
@media (min-width: 700px) and (orientation: portrait) { ... }
위 예는, 모든 유형의 장치이며 최소 너비 700px 이며, 방향이 세로 모드일 때만 적용한다는 뜻
@media print and (min-width: 700px) and (orientation: landscape) { ... }
프린트 장치이며, 최소 너비가 700px이며, 방향이 가로일 때 적용함.
쉼표 연산자의 사용
*쉼표는 각각 개별 미디어 쿼리로 인식합니다.
@media (min-width: 700px), print and (orientation: landscape) { ... }
모든 장치에서 최소너비 700px이상일 때 적용하거나, 프린트 장치에서는 가로 방향일 때만 적용하겠다는 뜻.
not 연산자의 사용
@media not all and (color) { ... }
not은 전체 미디어 쿼리를 수식합니다. 즉 not은 all and (color)를 포함하여 부정함.
@media not (all and (color)) { ... } 와 같은 말
모든 색상 장치에서 이 스타일을 적용하지 않겠다는 뜻.
쉼표로 분리하여 사용할 때, 미디어 구문은 개별 미디어 쿼리로 인식하므로
not은 쉼표 이후에 영향을 미치지 않습니다.
@media not screen and (color), print and (color)는
따라서 위 예는, 모든 스크린 색상 장치에서 적용하지 않거나, 프린트 색상 장치에서 적용하겠다는 뜻
only 연산자 사용
<link rel="stylesheet" media="only screen and (color)" href="test.css" />
오직 스크린에 색상 장치일 때만 이 스타일을 적용하겠다는 뜻.
▷ media type(미디어 종류)
all | print | speech| screen
● all 기본값. 모든 미디어 장치에 사용 됨
● print 프린터에 사용
● screen 컴퓨터 스크린, 테블릿, 스마트폰 등
● speech 페이지를 읽어주는 화면 낭독기
미디어 종류 중 퇴화된 것.
aural ,braille, embossed, handheld, projection , tty, tv
▷ media feature(미디어 특징)
width | height | min-width | min-height | max-width | max-height
device-width | device-height | min-device-width | min-device-height | max-device-width | max-device-height
aspect-ratio (min- / max- 접두어 사용가능)
device-aspect-ratio (min- / max- 접두어 사용가능)
color (min- / max- 접두어 사용가능)
color-index (min- / max- 접두어 사용가능)
monochrome (min- / max- 접두어 사용가능)
resolution (min- / max- 접두어 사용가능)
scan | grid
● width 화면 영역 너비(브라우저 창 같은)
예 1: @media (min-width: 20em) {...}
* 모든 장치에서 최소 너비 20em 이상이면 적용
예2 : <link rel="stylesheet" media="screen and (min-width: 500px) and (max-width: 800px)
href="test.css" />
* 스크린 장치 최소 화면이 500px보다 크고 800px보다 작을 때 스타일 적용
● height 화면 영역 높이
● device-width 출력 장치의 너비.(컴퓨터 스크린 같은)
예 : <link rel="stylesheet" media="screen and (max-device-width: 450px)" />
* 장치 너비가 450px보다 작을 때 적용
● device-height 출력 장치의 높이
● aspect-ratio 화면 영역의 가로 세로 비.
기호 '/'을 사용하여, 앞에는 수평 픽셀 비율. 뒤에는 수직 픽셀 비율 (양수이며 정수)
예 : @media screen and (min-aspect-ratio: 1/1) { ... }
*가로 화면 비가 1:1 이상일 때 적용. 즉, 화면이 직사각이거나 세로일 때만 적용
● device-aspect-ratio 출력 장치의 가로세로 비.(첫번째 값이 수평픽셀 비, 두번째 값이수직 픽셀 비)
예: @media screen and (device-aspect-ratio: 16/9) { ... }
* 장치 가로 세로 비가 16:9일 때 적용.
● color 출력 장치의 색상 구성요소 당 비트 수 (장치가 색깔 장치가 아니면 값은 0)
예1 : @media all and (color) { ... }
* 모든 색상 장치에 적용.
예 2: @media all and (min-color: 4) { ... }
* 색상 구성요소당 최소 4비트를 지닌 장치에 적용
● color-index 장치가 표시할 수 있는 색상 수
예: <link rel="stylesheet" media="all and (min-color-index: 256)" href="test.css" />
* 최소 256 색상을 지닌 모든 장치에 적용
● grid 출력 장치가 그리드 장치 또는 비트맵 장치냐에 따라 결정.
장치가 그리드 기반이면 값은 1. 그렇지 않으면 0
● monochrome 흑백(회색톤)장치에 색상 당 비트 수.
장치가 흑백이 아니면, 값은 0
예: @media all and (monochrome) { ... }
* 모든 흑백장치에 적용
● orientation 화면이 가로 모드인지, 세로 모드인지 지정
예 : @media all and (orientation: portrait) { ... }
*오직 세로 방향에서만 적용.
● resolution 출력 장치의 해상도
해상도는 dpi (dots per inch)나, dpcm(dots per cintimeter)로 지정
예: @media screen and (min-resolution: 300dpi) { ... }
* 최소 300dpi 이상 해상도를 지닌 장치에 적용
● scan 텔레비전 출력 장치의 스캐닝 과정
값은 progressive | interlace
*tv값이 퇴화되었으므로 이 값도 사용하지 않을 것 같네요
[참조 사이트]
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
출처: http://dol2156.tistory.com/146 [적게 작성하고, 보다 많이 한다.]