목차
- @media 예제 - 해상도 600px 이하 시, 배경색 별도 지정
- @media 정의
- @media 구문
- 미디어별 다른 외부스타일시트 적용
- 미디어 유형 (media type)
- 미디어 특징 (media feature)
- IE9 미만 적용 반응형 스크립트
- IE/Edge 반응형 스타일
- @media 예제 - 테블릿 사이즈 경우, 스타일 별도 지정
- @mddia 예제 - CSS 적용 우선순위
- @media 예제 - (터치 스크린 장치, 태블릿, 휴대폰)용 스타일 지정
@media 예제 - 해상도 600px 이하 시, 배경색 별도 지정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
※ 화면너비 600px 까지는 옅은 하늘색 배경, 그 이상은 노란색 배경.
※ 전체너비에 적용되는 CSS를 먼저 정의 후, 특정 화면 적용 CSS를 아래에 배치.
※ ... (max-width: 600px;) { 처럼 뒤에 세미콜론 들어가면 작동 안 함.
@media 정의
미디어 유형/장치 및 화면너비에 따라 다른 스타일 적용하는 데 사용
1.
미디어쿼리 사용하면 아래 사항 체크해 기기별 다양한 스타일 제공 가능.
- 뷰포트 (viewport) : 뷰포트 너비와 높이
- 기기 (device) : 기기 너비와 높이 (예) 데스크탑, 랩톱, 태블릿, 휴대폰 등
- 방향 (orientation) : 태블릿/폰이 가로모드(landscape mode)인지 세로모드(portrait mode)인지
- 해상도 (resolution) (예) 320px, 400px , 480px, 600px, 768px, 992px, 1024px, 1200px
2.
- 데스크탑, 랩톱, 태블릿, 휴대폰 등 각각 미디어기기별로 반응형 스타일 제공하는 데 널리 사용.
- (mediatype: print, screen, speech) 이용해 인쇄문서, 화면판독기에만 특정 스타일 지정 가능.
3.
IE9 이상 주요 최신브라우저 지원.
4.
MDN @media 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/@media
@media 구문
@media not|only media_type and (media_feature and|or|not media_feature) {
CSS-Code;
}
[코드 의미]
media_type (미디어형식)
(예) print, screen, speech, all
media_feature (미디어특징)
(예) resolution (20px, 400px , 480px, 600px, 768px, 992px, 1024px, 1200px)
not
전체 미디어쿼리 의미를 되돌림.
only
media feature 포함 미디어쿼리를 지원않는 예전 브라우저가 지정스타일을 적용 못하게 함.
최신 브라우저에는 영향 안 미침.
and
media feature를 media type이나 다른 media feature와 결합시킴.
PS. 두 선택사항이나, not 또는 only 사용 시 media type도 지정해야함.
미디어별 다른 외부스타일시트 적용
<link rel="stylesheet" media="screen and (min-width:750px )" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
미디어 유형 (media type)
all
모든 미디어 기기 (기본값)
print
프린터
screen
컴퓨터화면, 태블릿, 스마트폰
speech
페이지를 크게 읽는 스크린리더기
미디어 특징 (media feature)
any-over
사용 가능한 입력 메커니즘 통해 사용자가 요소를 가리킬 수 있는지 여부 (미디어쿼리 Level 4에 추가)
any-pointer
사용 가능한 입력 메커니즘이 포인팅 장치인지와 얼마나 정확한지 여부 (미디어쿼리 Level 4에 추가)
aspect-ratio
종횡비 (뷰포트의 너비와 높이 사이의 비율)
color
색상 (출력 장치의 색상 구성 요소 당 비트 수)
color-gamut
색상 전반 (에이전트 및 출력 장치에서 지원하는 대략적인 색상 범위) (미디어쿼리 Level 4에 추가)
color-index
색인 장치가 표시 할 수있는 색상 수
grid
장치가 그리드인지 비트 맵인지
height
뷰포트 높이
hover
기본 입력 메커니즘을 통해 사용자가 요소를 마우스로 가리킬 수 있습니까? (미디어쿼리 Level 4에 추가)
inverted-colors
브라우저 또는 기본 OS가 반전 색상입니까? (미디어쿼리 Level 4에 추가)
light-level
현재 주변 라이트 레벨 (미디어쿼리 Level 4에 추가)
max-aspect-ratio
최대 종횡비 (영역의 너비와 높이 사이의 최대 비율)
max-color
출력 장치의 색상 구성 요소 당 최대 비트 수
max-color-index
장치가 표시 할 수있는 최대 색상 수
max-height
최대 높이 (브라우저 창과 같은 표시 영역의 최대 높이)
max-monochrome
단색 (회색조) 장치에서 "컬러"당 최대 비트 수
max-resolution
최대 해상도 (dpi 또는 dpcm을 사용하는 장치의 최대 해상도)
max-width
최대 너비 (브라우저 창과 같은 표시 영역의 최대 너비)
min-aspect-ratio
최소 종횡비 (디스플레이 영역의 너비와 높이 사이의 최소 비율)
min-color
최소 색상 (출력 장치의 색상 구성 요소 당 최소 비트 수)
min-color-index
최소 색상 색인 (장치가 표시 할 수있는 최소 색상 수)
min-height
최소 높이 (브라우저 창과 같은 표시 영역의 최소 높이)
min-monochrome
흑백 (회색조) 장치에서 "컬러"당 최소 비트 수
min-resolution
최소 해상도 (dpi 또는 dpcm을 사용하는 장치의 최소 해상도)
min-width
최소 너비 (브라우저 영역과 같은 표시 영역의 최소 너비)
monochrome
흑백 단색 (회색조) 장치에서 "컬러"당 비트 수
orientation
뷰포트의 방향 : 가로 모드 (landscape mode) / 세로 모드 (portrait mode)
overflow-block
출력장치가 블록 축을 따라 뷰포트를 오버플로하는 컨텐츠를 어떻게 처리하는지 (미디어쿼리 Level 4에 추가)
overflow-inline
인라인 축을 따라 뷰포트를 오버플로하는 컨텐츠를 스크롤 가능한지 (미디어쿼리 Level 4에 추가)
pointer
포인터 (기본 입력 메커니즘이 포인팅 장치입니까? 그렇다면 정확합니까?) (미디어쿼리 Level 4에 추가)
resolution
해상도 (dpi 또는 dpcm을 사용하는 출력 장치의 해상도)
scan
스캔 (출력 장치의 스캔 프로세스)
scripting
스크립팅 (예 : JS)을 사용할 수 있는지 여부 (미디어쿼리 Level 4에 추가)
update
출력 장치가 컨텐츠 모양을 얼마나 빨리 수정가능한지 여부 (미디어쿼리 Level 4에 추가)
width
뷰포트 너비
※ 뷰포트 (viewport) : 웹페이지가 사용자에게 보여지는 영역
IE9 미만 적용 반응형 스크립트
<link rel=“stylesheet” href=“../css/style.css” />
<!–[if lt IE 9]>
<script src="../js/css3-mediaqueries.min.js"></script>
<![endif]–>
※ 다운: https://github.com/heathcliff/css3-mediaqueries-js
※ 참고: https://code.google.com/archive/p/css3-mediaqueries-js/
※ 파란색 스크립트를 media 쿼리 있는 스타일링크 아래쪽에 추가
IE/Edge 반응형 스타일
[IE9 이하]
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
[IE10 이상]
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
}
[Edge12-15]
@supports (-ms-accelerator:true) {
/* Edge 12+ CSS */
}
[Edge16 이상]
@supports (-ms-ime-align:auto) {
/* Edge 16+ CSS */
}
(예제)
@media (max-width:750px ) {
@supports (-ms-ime-align: auto) {
.selector {
max-width: 25rem;
}
}
}
https://stackoverflow.com/questions/43528940
https://stackoverflow.com/questions/51741141
@media 예제 - 테블릿 사이즈 경우, 스타일 별도 지정
<style>
div {border:1px solid red; width:20%; text-align:center;}
.a {float:left;}
.c{float:right;}
.b {width:50%; margin:0 auto;}
@media all and (max-width:750px ) {
div {width:100% !important; margin-bottom:20px; overflow:hidden;}
}
</style>
<div class=a>홈짱닷컴</div>
<div class=c>Since 2012</div>
<div class=b>Homzzang.com</div>
결과보기
@mddia 예제 - CSS 적용 우선순위
[예제1] - 명시도 높은 선택자가 뒤에 온 경우
- 글자색깔: 해상도 따라 변동
- 글자굵기: 무조건 굵게 표시
<style>
p {color:red; font-weight:bold;}
@media all and (max-width:500px) {
div>p {color:blue;}
}
</style>
<div>
<p>홈짱닷컴 Homzzang.com</p>
</div>
결과보기
[예제2] - 명시도 높은 선택자가 앞에 온 경우
- 글자색깔: 무조건 빨간색
- 글자굵기: 무조건 굵게
<style>
div>p {color:red; font-weight:bold;}
@media all and (max-width:500px) {
p {color:blue;}
}
</style>
<div>
<p>홈짱닷컴 Homzzang.com</p>
</div>
결과보기
[예제3] - 명시도 동일한 선택자가 순서만 다를 때
- 글자색깔: 해상도 따라 변동
- 글자굵기: 무조건 굵게 표시
<style>
p {color:red; font-weight:bold;}
@media all and (max-width:500px) {
p {color:blue;}
}
</style>
<div>
<p>홈짱닷컴 Homzzang.com</p>
</div>
결과보기
PS. 예제1과 예제3은 결과적으로 동일 효과.
@media 예제 - (터치 스크린 장치, 태블릿, 휴대폰)용 스타일 지정
@media screen and (hover:none) and (pointer:coarse) {
...
}
관련예제: 비타주리 님 (230704) https://sir.kr/g5_tip/20804
PS.
- 화면에서 마우스를 가져다 놓았을 때 커서가 나타나지 않고 두꺼운 커서가 나타나는 장치에 대해 스타일을 적용 시 사용.
- hover:none 의미 - 마우스 허버 시 커서가 나타나지 않음.
- pointer:coarse 의미 - 두꺼운 커서가 나타남 의미.
