작성일/수정일
2022-12-16 15:49:26 / 2012-10-26 18:08:22
반응형 웹 레이아웃 구조 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보다 작을 때 적용