[HTML/CSS] CSS의 @media query 미디어 쿼리!!
[HTML/CSS] CSS의 @media query 미디어 쿼리!!
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
반응형 웹에 대해 아시나요? 스마트폰의 보급에의해 기존의 웹사이트를 모바일로 보기에는 무리가 있어 대형 포털사이트에서는 모바일에서 보기 편하도록 모바일 페이지를 별도로 만들었습니다. 예를 들어 http://m.naver.com 혹은 http://m.facebook.com 같은 모바일 페이지들이 있지만 태블릿까지 나오다보니 각 디스플레이 사이즈에 맞게 웹페이지를 새로 제작하기엔 무리가 있으며 각자 별도의 페이지로 일관성이 떨어졌어요. 반응형 웹은 HTML5 시대가 열리면서 디스플레이 종류에 따라 크기가 자동으로 최적화 되도록 조절되는 형태의 웹페이지를 의미합니다. 네이버 블로그와 티스토리 블로그의 가장 큰 차이점 이라고도 할 수 있죠. |
|
|
|
|
미디어 쿼리 문법
|
@media 연산자 Media Type and (Media Feature) {CSS-Code;} |
|
예) @media (max-width: 800px) {font-size: 15pt} * 연산자와 미디어 종류가 생략된 기본적인 형태로 사용합니다. |
연산자
|
and / not / only / , ▶and : 여러 미디어의 특징을 하나로 결합 ▶not : 전체 미디어 쿼리를 부정함 ▶only : 특정 미디어만 사용하도록 함 ▶, (or) : 각각 개별 미디어를 나타냄 * not이나 only를 사용하려면 반드시 Media Type을 지정해야함 |
Media Type (미디어 종류)
|
all / screen / print / speech ▶all : 모든 미디어 장치, 기본값 ▶screen : 모니터, 스마트폰, 태블릿 등 ▶speech : 페이지를 읽어주는 디바이스 |
Media Feature (미디어 특징)
|
width / height / device-width / device-height / aspect-ratio / device-aspect-ratio / color / color-index / monochrome / resolution / scan(접두어불가) / grid(접두어불가) * Media Feature는 (min- / max-)접두어 사용이 가능합니다. ▶width : 화면의 너비 예) @media (min-width: 300px) {.container {background-color: pink;}} ▶height : 화면의 높이 예) @media (min-width: 600px) {CSS-Code} ▶device-width : 출력 장치의 너비 ▶device-height : 출력 장치의 높이 ▶aspect-ratio : 화면 영역의 가로/세로 비 예) @media (min-aspect-ratio: 2/3) {CSS-Code} ▶device-aspect-ratio : 출력 장치의 가로/세로 비 ▶color : 출력 장치의 색상 구성요소 당 비트 수 예) @media (min-color: 8) {CSS-Code} ▶color-index : 표현할 수 있는 색상 수 ▶monochrome : 흑백 장치의 색상 당 비트 수 예) @media (monochrome) {CSS-Code} ▶orientation : 가로(landscape), 세로(portrait) 지정 예) @media (orientation: landscape) {CSS-Code} ▶resolution : 출력 장치의 해상도 예) @media (min-resolution: 300dpi) {CSS-Code} ▶scan : 텔레비전의 스캐닝 과정(progressive / interlace) ▶grid : 출력 장치가 그리드 장치면1 그렇지 않으면0 예) @media (grid: 0) {CSS-Code} |
적용방식
|
미디어 쿼리는 레이아웃을 변경하는 역할도
할 수 있습니다. 이렇게 본문 내에서도 단을
나뉘어 작성 할 수도 있습니다. |
|
현재 이 부분은 미디어 쿼리와 Float을 활용
하여 PC에서는 2단으로 보이며 모바일에선
일반 문서처럼 보여집니다. |
|
본문 HTML편집으로 <div id="left">좌측내용</div> <div id="right">우측내용<div> CSS에서 @media (min-width: 768px) {#left {float: left;}} @media (min-width: 768px) {#right {float: right;}} 이런식의 레이아웃 구성도 가능합니다. |
< 연습하기 >
