프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[JQUERY] 반응형 웹 레이아웃 구조 media query

2012.10.26
데모보기
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 [적게 작성하고, 보다 많이 한다.]




이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3513
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3516
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2170
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20765
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 57
225 [소스] Window.scroll() 꿘쓰 2020.06.22 61
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 171
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 324
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 614
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 580
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 685
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 876
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 624
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 667