미디어 쿼리
========================
-
반응형 디자인을 만드는 기법중 미디어 쿼리라는 기법이 있다.(제일 많이 사용함)
-
접속하는 장치(미디어) 에 따라서 특정한 css 스타일을
사용하도록 할때 쓴다
예) colly.com
-브라우저 창의 너비를 조절할 때마다 화면에 표시되는 칼럼 개수가 달라진다
- pc나 태블릿 , 스마트폰의 웹 브라우져 화면 크기에 따라
사이트 레이아웃이 바뀐다.
- 브라우져 창의 너비값에 따라서
사이트의 레이아웃이 바뀌는 효과를
구현하는데는
미디어쿼리가 가장 편리하다.
미디어 쿼리 구문>>>>
and 조건을 계속 추가 할수 있음
쉼표 , 동일한 스타일 유형을 사용할 미디어의 유형과
조건이 있다면 쉼표를 이용해 추가합니다
only 미디어 쿼리를 지원하는 웹 브라우져에서만
조건을 인식하게 합니다.
이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우져에서는 미디어 뭐리를 무시하고 실행하지 않습니다.
IE에서는 미디어 쿼리를 제대로 인식하지 못하기 떄문에 only 키워드를 사용하더라도 큰 의미가 없습니다.
예)
@media screen and (min-width:200px) and (max-width:360px){
...
}
미디어 유형의 종류>>>>>>>>>
all
모든 미디어 유형
print
인쇄 장치
screen
컴퓨터 스크린
tv
음성과 영상이 동시 출력이 되는 tv
aural
음성합성장치 (주로 화면을 읽어 소리로 출력해주는 장치)
braille
점자 표시 장치
handheld
패드 (pad) 처럼 손에 들고다니는 장치
projection
디스플레이 기능이 제한된 장치
embossed
점자 프린터
미디이 쿼리 조건>>>>>>>>>>>>>>>>>
웹 문서의 가로 너비와 세로 높이 (뷰 포트)
width / height 웹 페이지의 가로 너비/ 세로 너비
min-width / min-height 최소너비, 최소 높이
max-width / max-height 최대너비 . 최대 높이
예)
body{
background: url(images/bg0.jpg) no-repeat fixed;
background-size: cover;
}
@media screen and (max-width:1024px){
body{
background: url(images/bg1.jpg) no-repeat fixed;
background-size : cover;
}
}
@media screen and (max-width:768px){
body{
background:url(images/bg2.jpg) no-repeat fixed;
background-size:cover;
}
}
@media screen and (max-width : 320px){
body{
background: url(images/bg3.jpg) no-repeat fixed;
background-size:cover;
}
}
미기어 쿼리 조건>
단말기의 가로 너비와 세로 높이>
단말기의 가로 / 세로 값을 설정하는 속성
device-width , device-height
단말기의 가로너비, 세로높이
min-device-width , min-device-height
단말기의 최소너비, 최소높이
max-device-width , max-divice-height
단말기의 최대 너비 , 최대높이
- 단말기 크기와 뷰포트 크기를 하나로 통일해
사용하기위해 뷰포트를 지정할때
width="deviec-width" 로 놓고 사용
화면 회전>
orientation 속성을 사용해서 화면 방향 체크
orientation : portrait 단말기 세로 방향
orientation : landscape 단말기 다로 방향
예)
@media screen and (orientation : landscape){
body{background-color: orange;}
}
@media screen and (orientation : portrait){
body{background-color: yellow;}
}
화면 비율
단말기 브라우져 화면의 너비 값을 높이값으로 나눈것
aspect-ratio 화면비율(width 값 / height 값)
min-aspect-ratio 최소 화면 비율
max-aspect-ratio 최대 화면 비율
단말기 화면 비율
단말기의 너비 값을 높이 값으로 나눈것
device-aspect-ratio 단말기 화면 비율(width 값 / height 값)
min-device-aspect-ratio 단말기 의 최소화면비율
max-device-aspect-ratio 단말기의 최대 화면 비율
색상당 비트수
단말기의 최대 색상 비트 수를 조건으로 사용
color 비트수
min-color 최소 비트수
max-color 최대 비트수
미디어 쿼리 중단점 만들기>>>
중단점(breakpoint): 서로 다른 css를 적용할 화면 크기
대부분 기기의 화면 크기 기준
모든 기기를 반영할 수 없기 때문에 스마트폰과 태블릿
, 데스크톱 정도로 구분
모바일 퍼스트 : 모바일 기기 레이아웃을 기본으로 작성 -> 태블릿 &pc 레이아웃 작성
미디어 쿼리 중단점은 개발자나 작업 조건에 따라 달라질수있다.
ex)
@media only screen and (min-width:320px){...}
스마트 폰 세로
@media only screen and (min-width:480px){...}
스마트폰 가로
@media only screen and (min-width:768px){...}
태블릿 세로
@media only screen and (min-width:1024px){...}
태블릿 가로 / 데스크 탑
외부 css 파일 연결>>>>>>
link 태그 연결하기
head 와 /head 사이에 삽입
예)
화면 너비가 768px 이하일 때 미리 만들어 놓은 태블릿용
스타일 시트 파일을 적용하려면
사이에 삽입@import 구문 사용하기
예)
화면 너비가 321ㅔㅌ 이상 768px 이하일 때 미리 만들어 놓은 태블릿용 스타일 시트 파일을 적용 하려면
@import url("css/tablet.css") only screen and (min-width:321px) and (max-width:768px);
참고)
연결할 css파일이 작을경우
링크나 임포트는 별 속도 차이는 없다
그러나
연결할 css 파일이 많을 경우엔
링크 태그를 사용하는 것이 안정적이다.
웹 문서에 직접 정의 하기 >>>>
