• Q&A
  • 회원가입
  • 로그인

[responsive] CSS - @media 구문 - 미디어쿼리 이용한 반응형 스타일 구현 (= media쿼리) ※ IE/Edge 반응형 (= 익스플로러/엣지 브라우저 크로스브라우징) ※ 반응형 필수

목차
  1. @media 예제 - 해상도 600px 이하 시, 배경색 별도 지정
  2. @media 정의
  3. @media 구문
  4. 미디어별 다른 외부스타일시트 적용
  5. 미디어 유형 (media type)
  6. 미디어 특징 (media feature)
  7. IE9 미만 적용 반응형 스크립트
  8. IE/Edge 반응형 스타일
  9. @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, 1024px1200px

 

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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012