프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

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

2012.10.26
북마크 [출처 이동]    작성자 정보
반응형 웹 레이아웃 구조  media query
미디어 쿼리는 브라우져 사이즈에 따라 레이아웃을 작성하거나, 다른 미디어 종류에 따라 따른 CSS 코드를 작성하는 등, 반응형 웹페이지를 작성할 때
유용한 구문입니다.

http://relation.co.kr/images_board/board_system_publishing/82/index.html




* 미디어 쿼리 사용법
미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다.

css 내부에 삽입하기 
<style>
@media (max-width: 700px) {
  .container{
    margin:0px; padding: 0px;
  }
}
</style>

링크로 연결할 때
<link href="test.css" rel="stylesheet" media="(max-width: 700px)" />



연산자
and | not | only | ,
 - and 연산자 : 여러 미디어 특징들을 하나로 결합함 .
- , (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.
- not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.
- only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지

- not이나 only를 사용하려면 미디어 타입을 규정해야 함.
- 미디어 쿼리는 대소문자 구별하지 않는다

 
사용 예.
가장 단순한 형태의 미디어 쿼리
모든 유형의 장치이며 최소너비 700px 일 때 스타일을 적용하겠다는 의미
@media (min-width: 700px) {background-color: yellow;}
@media all and (min-width: 700px) {...}



* media type(미디어 종류)
all | print | speech| screen 
- all 기본값. 모든 미디어 장치에 사용 됨
- print 프린터에 사용
- screen 컴퓨터 스크린, 테블릿, 스마트폰 등
- speech 페이지를 읽어주는 화면 낭독기

 

* 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  화면 영역 높이
- 예 : <link rel="stylesheet" media="screen and (max-device-width: 450px)" />
- 장치 너비가 450px보다 작을 때 적용


 

이 포스트 공유하기

전체목록