치춘짱베리굿나이스

미디어 쿼리 본문

ClientSide/html css

미디어 쿼리

치춘 2022. 4. 6. 09:29

미디어 쿼리

미디어 쿼리란?

현재 브라우저 또는 장치 환경이 프로그래머가 정의한 규칙에 부합할 때 특정 css를 적용하도록 해주는 구문

특히 반응형 웹을 만들고자 할 때 화면 크기에 따라 서로 다른 css 스타일을 적용하기 위해 많이 사용한다

미디어 쿼리 기본

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

구성 요소

@media

  • 미디어 쿼리의 시작 부분

media-type

  • 미디어 유형
  • all, print, screen, speech 네 가지 중 하나를 지정할 수 있다
    • all: 모든 장치에 적용 (기본값)
    • print: 인쇄 결과물 및 출력 미리보기 화면에 적용
    • screen: 화면에 적용
    • speech: 음성합성장치에 적용
  • 논리합 및 논리곱 연산자를 이용하여 연결하여 사용할 수 있다

and / , / not

  • 논리합 (or) 또는 논리곱 (and) 또는 부정 (not)
  • 앞뒤 조건을 && 또는 || 으로 묶어주는 역할을 하거나, 조건을 뒤집는다
    • and: 논리곱 (앞뒤로 연결된 조건문이 모두 참이어야 스타일 적용)
    • , : 논리합 (앞뒤로 연결된 조건문이 하나라도 참이면 스타일 적용)
    • not : 부정 (모든 미디어 쿼리 부정 = 뒤따라오는 조건 중 하나라도 참이면 스타일 적용하지 않음)
    • not 사용 시에는 미디어 유형을 반드시 지정해주어야 하며, 한 개의 조건만 부정할 수 없다 (무조건 모든 미디어 쿼리를 부정하므로, 맨 마지막에 적용된다)

media-feature-rule

  • 미디어 특성 표현식
  • 일종의 조건문이라고 보면 된다
  • 각각의 조건문은 괄호로 묶어주고, 논리 연산자를 통해 여러 조건을 함께 적용할 수 있다
  • 올 수 있는 특성의 일부는 다음과 같다
    • device-height: 출력 장치 화면의 높이
    • devide-width: 출력 장치 화면의 너비
    • width: 뷰포트의 너비
    • height: 뷰포트의 높이
    • orientation: 뷰포트의 방향 (landscape / portrait)
    • 더 많은 특성은 여기서 확인
  • 미디어쿼리 level 4 사양에선 특성 표현식 괄호 안에서 비교연산자 (<, >, , ) 와 and, or, not 연산자를 사용할 수 있다
@media (30 <= width <= 80) {
      어쩌구
}
@media (not(hover)) {
      어쩌구
}

미디어 쿼리 구성 팁

반응형 웹을 구성할 땐 데스크탑 기준으로 작업 후 미디어 쿼리를 이용하여 모바일 화면을 줄이거나, 모바일 기준으로 작업 후 미디어 쿼리를 이용하여 데스크탑 화면으로 늘리는 두 가지 방법 중 하나가 이용된다

후자의 작업법은 모바일 우선 반응형 디자인으로 불리는데, 모바일은 화면이 데스크탑에 비해 훨씬 작기 때문에 더 작은 컴포넌트들로 화면을 구성해야 하며 따라서 요소들을 더 잘게 잘라 작업하게 된다

데스크탑을 기준으로 작업할 경우 모바일 화면을 구성할 때 이미 만들어진 컴포넌트들을 더 쪼개주는 추가적인 작업이 필요한데, 모바일 기준으로 작업할 경우 데스크탑 화면을 구성할 땐 추가적인 분할 없이 작은 원소들을 갖다 붙이기만 하면 되므로 작업량이 현저히 줄어든다

참고자료

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

developer.mozilla.org

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

 

미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리

developer.mozilla.org

 

'ClientSide > html css' 카테고리의 다른 글

가상선택자 ::before, ::after  (0) 2022.05.09
CSS 선택자  (0) 2022.05.09
html DOM  (0) 2022.03.25
Attribute vs Property  (0) 2022.03.25
[CSS] 길이 단위  (0) 2022.03.25
Comments