EverGiver

미디어 쿼리 알아보기 본문

Front-End (웹)/반응형 웹과 미디어 쿼리

미디어 쿼리 알아보기

친절한개발초보자 2022. 1. 11. 22:11
728x90
미디어 쿼리 알아보기

 

  • 미디어 쿼리(media queries)
    - CSS 모듈
    - 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법
    - 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.

 

미디어 쿼리 구문

 

  • 미디어 쿼리 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 준다.
    @media [only ¦ not] 미디어 유형 [and 조건] * [and 조건]​
    - only
      : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다.
    - not
      : not 다음에 지정하는 미디어 유형을 제외한다.
       (not tv라고 지정하면 TV를 제외한 미디어 유형에만 적용한다.)
    - and
      : 조건을 여러 개 연결해서 추가할 수 있다.
  • <style>과 <style> 사이에 사용하며 대소 문자를 구별하지 않는다.
    @charset "utf-8";

/*  phone (width767px 이하) */
@media all and (max-width:767px) {  }

/*  tablet ( width 768px 이상 width1024px 이하) */
@media all and (min-width:768px) and (max-width:1024px) {  }

/*  PC (width 1025px 이상) */
@media all and (min-width:1025px) {  }​
     - @charset"UTF-8";
      : 스타일 시트의 인코딩을 Unicode UTF-8로 설정
    - @media all and (max-width:767px) {  }
      : 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. (Mobile Device)
    - @media all and (min-width:768px) and (max-width:1024px) {  }
      : 사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행된다. (Tablet Device)
    - @media all and (min-width:1025px) {  }​
      : 사용자 해상도가 1025px 이상일 때 이 코드가 실행된다. (Desktop Device)
  • 미디어 유형의 종류
    - @media 속성 다음에 미디어 유형을 알려줘야 한다.
    종류 설명
    all 모든 미디어 유형에서 사용할 CSS를 정의한다.
    print 인쇄 장치에서 사용할 CSS를 정의한다.
    screen 컴퓨터 스크린에서 사용할 CSS를 정의한다.
    스마트폰의 스크린도 포함된다.
    tv 음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의한다.
    aural 음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)에서 사용할 CSS를 정의한다.
    braille 점자 표시 장치에서 사용할 CSS를 정의한다.
    handheld 패드(pad)처럼 손에 들고 다니는 장치를 위한 CSS를 정의한다.
    projection 프로젝터를 위한 CSS를 정의한다.
    tty 디스플레이 기능이 제한된 장치에 맞는 CSS를 정의한다. 이런 장치에서는 px 단위를 사용할 수 없다.
    embossed 점자 프린터에서 사용할 CSS를 정의한다. 
    @media screen{ /* 화면용 스타일 작성 */
	....
}
  • 웹 문서의 가로 너비와 세로 높이 속성
    - 실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 하는데 뷰포트의 너비와 높이를 미디어의 쿼리의 조건으로 사용할 수 있다.
    종류 설명
    width, height 웹 페이지의 가로 너비, 세로 높이를 지정한다.
    min-width, min-height 웹 페이지의 최소 너비, 최소 높이를 지정한다.
    max-width, max-height 웹 페이지의 최대 너비, 최대 높이를 지정한다.
  • 단말기의 가로 너비와 세로 높이 속성
    - 단말기에서 기본으로 제공하는 물리적인 가로 너비와 세로 높이의 크기
    종류 설명
    device-width, device-height 단말기의 가로 너비, 세로 높이를 지정한다.
    min-device-width, min-device-height 단말기의 최소 너비, 최소 높이를 지정한다.
    max-device-width, max-device-height 단말기의 최대 너비, 최대 높이를 지정한다.
  • 화면 회전 속성
    종류 설명
    orientation: portrait 단말기의 세로 모드를 지정한다.
    orientation: landscape 단말기의 가로 모드를 지정한다. (기본값)
  • 미디어 쿼리의 중단점
    - 중단점 (break point)
      : 미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점
    - 모바일과 태블릿, 데스크톱 정도로만 구분하는 것이 좋다.
    - 모바일 퍼스트 (mobile first)
      : 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것

 

미디어 쿼리 적용하기

 

  • 외부 CSS 파일 연결하기
    - 각 조건별로 CSS 파일로 따로 저장한 뒤 <link> 태그나 @import 문을 사용해서 연결한다.
    1. <link> 태그는 <head>와 </head> 태그 사이에 넣는다.
    <link href="css 파일 경로" rel="stylesheet" media="미디어 쿼리 조건">​
    2. @import 문을 사용할 수 있다.
    (CSS를 정의하는 <style>과 </style> 태그 사이에 사용한다.)​
     
  • 웹 문서에서 직접 정의하기
    1. <style> 태그 안에서 media 속성을 사용하여 조건을 지정
    <style media="<조건>" {
	<스타일 규칙>
}
</style>​
     2. 스타일을 선언할 때 @media 문을 사용해서 각 조건별로 스타일을 지정해 놓고 스타일을 선택해서 적용하는 것
    <style>
	@media <조건> {
		<스타일 규칙>
	}
</style>
728x90
저작자표시

'Front-End (웹) > 반응형 웹과 미디어 쿼리' 카테고리의 다른 글

CSS 그리드 레이아웃  (0) 2022.01.12
플렉스 박스 레이아웃  (0) 2022.01.12
그리드 레이아웃  (0) 2022.01.11
반응형 웹  (0) 2022.01.11
'Front-End (웹)/반응형 웹과 미디어 쿼리' Related Articles more
Comments