반응형 웹이란?
디바이스 종류에 따라 웹페이지의 크기가 자동으로 조정 되는 것.
사용하는 디바이스에 맞게 최적화된 화면을 만들어내는 것이다.
반응형은 미디어쿼리 (Media Query) 를 이용하여 만들 수 있다.
아래에서 알아보자!!
미디어쿼리(Media Query)란?
단말기 종류에 따라 각기 다른 style을 적용시켜 주는 것.
미디어쿼리 적용법
<link>
<head>tag 속<link>tag는 media 속성에서 조건에 만족 시 해당 css를 불러온다.<style>
<head>tag 속<style>tag는 media 속성에서 조건에 만족 시 해당 css를 불러온다.<style>-@import
<style>tag 속 @import는 조건에 만족 시 해당 css를 불러온다.
미디어쿼리 문법
@media only screen and (min-width: ~~px) {...}
- only : only는 뒤의 조건만, not은 뒤의 조건을 제외한 조건임 (큰 의미는 없는 키워드지만 미디어쿼리를 지원하는 브라우저를 대상으로 할 경우에는 적어주면 좋음)
- screen : 미디어 타입
- min-width => 속성: 속성값;
미디어타입의 종류
미디어 타입 중 가장 많이 쓰이는 타입은 all, screen, print다.
screen은 대부분의 컴퓨터와 모바일 기기이다. (handheld는 모바일 기기가 아니다.)
미디어 타입은 동시에 여러가지를 나열해서 사용 가능하다.
- all : 모든 미디어 타입
- aural : 음성 합성장치
- braille : 점자 표시장치
- handheld : 손으로 들고 다니며 볼 수 있는 작은 스크린에 대응하는 용도
- print : 인쇄 용도
- projection : 프로젝터
- screen : 컴퓨터 스크린
- tty : 디스플레이 능력이 한저오딘 텔렉스, 터미널, 또는 수동 이동 장치 등 고정된 글자를 사용하는 미디어
- tv : 음성과 영상이 동시 출력되는 장치
- embrossed : 페이지에 인쇄된 점자 표지 장치
미디어쿼리 속성
- width : 웹페이지의 가로 길이
- height : 웹페이지의 세로 길이
- device-width : 기기의 실제 가로 길이
- device-height : 기기의 실제 세로 길이
- orientation : width와 height를 구해 width 값이 길면 landscape로, height 값이 길면 portrait로 판단
- aspect-ratio : width와 height 비율을 판단
- device-aspect-ratio : 단말기의 물리적인 화면 비율을 판단
- color-index : 단말기에서 사용하는 최대 색상수를 판단
- monochrom : 흑백 컬러만을 사용하는 단말기에서 흰색과 검은색 사이의 단계를 판단
- resolution : 지원하는 해상도 판단 값으로 dip(인치당 도트 수)나 dpcm(cm당 도트 수)를 사용
- color : 단말기에서 사용하는 최대 색상 수의 비트 수를 판단. 자연수를 쓰지만 2의 지수를 뜻한다 (ex. 1은 2, 2는 4, 3은 8)
HR velog