반응형 웹 (Resposible Web) 이란 ?
반응형 웹(Responsible Web)이란 디바이스(전자기기)별로 각각 레이아웃(grid)가 달라지는 웹이다.
쉽게 설명하자면 화면의 크기 마다 레이아웃이 달라진다.
미디어쿼리 (Media Query)
반응형 웹에서는 필수인 미디어쿼리는, 화면크기 마다 각각 다르게 CSS를 적용하는 것이다.
화면 사이즈를 인식해 서로 다른 CSS를 적용시켜준다. 보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해준다.
CSS파일이나 <style>에 기술한다.
해상도 320px 이상 또는 768px 미만 -> 스마트폰
해상도 768px 이상 또는 1024px 미만 -> 태블릿
해상도 1024px 초과 -> PC
- 미디어쿼리 작성법
- 미디어쿼리를 작성할때는 공통적으로 적용할 css를 작성한 다음 미디어쿼리 따로 작성.
- min방식 사용시 크기가 작은 순서대로, max 방식 사용시 크기가 큰 순서대로 작성한다.
- 링크방식으로도 사용 할 수 있다.(link 방식은 css 파일이 많으면 속도가 느려진다)
link 방식 ex ) <link rel="stylesheet" media="all and (min-width:320px)"
- 미디어쿼리 작성법
@media only | not 미디어유형 and | , (조건문) {적용할 css}
- only 키워드는 미디어쿼리를 지원하는 브라우저에서만 미디어쿼리를 해석하게한다.
- not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드 (ex: not tv 는 tv를 제외한 모든 미디어)
- and 키워드는 앞뒤 조건이 모두 사실일때, 콘마는 앞뒤 조건이 하나라도 사실인 경우를 의미.
- 조건문은 조건문이 사실일때를 의미, and나 콘마를 이용하여 두가지 이상 작성이 가능하다.
- 모든 조건문에는 min-, max- 옵션을 줄 수 있다. (ex : min-width , max-width)
다중 조건 ex ) @media (min-width:320px) and (max-width:768px) {적용할css}
- 미디어 유형 (생략시 default 값은 all)
all 모든장치
screen 컴퓨터 화면 또는 스마트 기기 화면
tv 영상과 음성이 함께 출력되는 장치
projection 프로젝터 장치
handler 손에 들고다니는 소형장치
speech 음성 출력 장치
aural 음성 합성 장치 (화면을 소리로 출력해주는 장치)
embossed 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치)
tty 디스플레이 기능이 제한된 장치
braille 점자 표시 장치
width 웹페이지 가로 너비
height 웹페이지 세로 높이
device-width 기기의 가로 너비
device-height 기기의 세로 높이
orientation 기기의 화면방향 (portrait:세로,landscape:가로)
aspect-ratio 화면 비율
device-aspect-ratio 단말기기의 화면 비율
color 기기의 비트 수
color-index 기기의 색상 수
monochrome 기기가 흑백일 때 픽셀당 비트 수
resoulution 기기의 해상력
scan TV의 스캔 방식
grid 기기의 그리드/비트맵
* 미디어쿼리 ex )
<style>
@media all and (min-width:320px) {
#wrap div{
width:100%;
}
}
@media all and (min-width:768px) {
#wrap div{
width:50%;
}
#wrap div:nth-child(5){width:100%;}
}
@media all and (min-width:1024px) {
#wrap div{
width:20%;
}
#wrap div:nth-child(5){width:20%;}
}
</style>뷰포트 (ViewPort)
Viewport란 모바일 브라우저에서 web conetent 를 출력하는 영역으로써, 일반 PC의 브라우저에서는 존재하지 않는 개념이다. Viewport는 웹페이지의 너비와 높이, 확대/축소 설정할 수 있게 해주며, 이를 통해 web content가 최적의 상태로 화면에 표시될 수 있게 도와준다. 쉽게말해 화면을 모바일에 맞게 표시해주는 설정이라고 보면 된다.
<head>태그 내부의 <meta>태그로 기술한다.
* 사용법
<meta name="viewport" conetent="width-device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">- width : 뷰포트의 너비 설정
- height : 뷰포트의 높이 설정
- initial-scale : 초기 배율 설정
>> 1이 기본값, 1보다 낮으면 축소 , 1보다 크면 확대된 값으로 설정됨 - minimum-scale : 최소 축소 비율 설정
>> 0.25 기본값 - maximum-scale : 최대 확대 비율 설정
>> 5.0 기본값 - user-scalable : 확대/축소 여부 설정
>> yes 기본값, yes | no
개발스터디