css15

미디어 쿼리

미디어 쿼리

  • 1접속하는 장치(미디어)에 따라 특정한 css스타일을 사용하도록 하
  • 2미디어 쿼리 구문
    @media [only(생략가능)|not] 미디어 유형 [and 조건] * [and 조건]
    예) 미디어 유형이 'screen'이면서 최소 너비가 '200px'이고 최대 너비가 '160px'일 경우에 적용할 css를 정의하는 구문
    @media screen(미디어 유형) and (min-width:200px) and (mac-width:360px) {
    ...}
  • 3미디어 쿼리 조건
    -가로 세로 값 설정
    웹 페이지의 가로 너비, 세로 높이: width, height
    최소 너비, 최소 높이: min-width, min-height
    최대 너비, 최대 높이: max-width, max-height
    -단말기의 가로 너비와 세로 높이
  • 4화면 회전
    orientation 속성을 사용해 화면 방향 체크
    orientation-portrait: 단말기 세로 방향
    orientation-landscape: 단말기 가로 방향
  • 5미디어 쿼리 중단점
    서로 다른 css를 적용할 화면 크기
    대부분 기기의 화면 크기 기준
    스마트폰/태블릿.데스크톱
    모바일 퍼스트: 모바일 기기 레이아웃을 기본으로 작성-태블릿&pc레이아웃 작성
    상황에 따라 지정

미디어 쿼리 사용한 사이트 구성

  • 1외부 css파일 연결
    <link>태그 사용하기
    <head></head> 사이에 삽입
    <link rel="stylesheet" media="미디어 쿼리 조건" href="css파일 경로">
    예)화면 너비가 768px 이하일 때 미리 만들어 놓은 태블릿용 스타일 시트 파일을 적용하려면,
    <link rel="stylesheet" media="screen and (max-width:768px)" href="css/tablet.css">
    @import 구문 사용하기
    <style>와 </style> 사이에 삽입
    @import url(css 파일 경로) 미디어 쿼리 조건
    예)화면 너비가 321px이상 768px 이하일 때 미리 만드렁 놓은 태블릿ㅇㅇ 스타일 시트 파일을 적용하려면,
    @import url("css/tablet.css") only screen and (min-width:321px) and (max-width: 768px);
  • 2웹 문서에서 직접 정의하기
    <style>태그 안에 media 속성 사용
    <style> 태그 안에 @media 구문 사용하기
    <style>
    @media 미디어 쿼리 조건{
    스타일 규칙들}
    </style>