CSS : 반응형웹 미디어쿼리(media queries) 규칙과 사용법

CSS : 반응형웹 미디어쿼리(media queries) 규칙과 사용법

 

 

* CSS media queries 작성 전 html viewport 설정을 반드시 해주셔야 합니다.

https://webty.tistory.com/102

html : 반응형웹 준비 뷰포트(viewport)

 

 

미디어쿼리(media queries)란?

* 미디어쿼리는 단말기의 유형(출력물 or 화면),

어떤 특성이나 수치(해상도, 뷰포트 기준)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

 

 

미디어쿼리 활용 예시

• CSS @media @import 규칙을 사용해 특정 조건에 따라 스타일을 적용할 경우
• <style>, <link>, <source> 기타 다양한 HTML 요소에 media 특성을 이용하여 선택할 경우
• window.matchMedia(), MediaQueryList.addListener() JS 메서드를 사용해 미디어 상태를 확인할 경우

 

미디어쿼리 유형

• all 모든 장치 기준 유형
• print 인쇄 결과물 및 출력 미리보기 기준 유형
• screen 화면 대상 기준 유형
• speech 음성인식장치 기준 유형

 

@media 규칙 활용 예시 - print

 

* 기본 웹 문서의 배경색이 검정색일 경우

* @media 추가 조건 없음

 

 

* 기본 웹 문서의 배경색이 검정색일 경우

* @media 프린트 조건 발생 시 배경색 흰색으로 변경

See the Pen Responsive-basic-print-1 by yuna122212 (@yuna122212) on CodePen.

 

 

---

 

 

미디어쿼리 논리연산자

• and 다수의 미디어 특성을 조합할 경우
• not 미디어 쿼리 부정을 통해 특정 조건이 거짓일 때만 참을 반환하는 경우
• only 전체 조건이 일치할 경우
• , (쉼표) 다수의 미디어쿼리를 하나의 규칙으로 사용할 경우

@media screen and ( .. ) { ... }
@media print and ( .. ) { ... }
@media all and ( .. ) { ... }
@media speach and ( .. ) { ... }
@media ( ... ) and ( .. ) { ... }
@media screen and ( ... ) and ( .. ) { ... }

@media screen, print ( .. ) { ... }
@media speach, screen ( .. ) { ... }

@media not all and ( .. ) { ... }
@media not ( all and ( .. ) ) { ... }

 

 

---

 

 

Device BreakPoint px 설정하는 Media Queries(미디어쿼리)

미디어쿼리 장치 너비 참고

참조 URL developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

* 값은 디자인 및 개발 사항에 따라 달라질 수 있습니다. 일반적으로 사용되는 표준 값입니다.

• 320 ~ 480px 모바일
• 481 ~ 768px 태블릿
• 769 ~ 1024px 노트북
• 1025 ~ 1200px 데스크탑
• 1201px ~(이상) 데스크탑 및 TV 등

@media all and (min-width:600px) { ... } 
@media screen and (max-width:600px) { ... }
@media print { ... }

 

 

 

반응형웹 미디어쿼리 제작 준비.

* 최소 최대 제한 너비 설정

각 디바이스 해상도 및 특정 조건에 따라 앱의 스타일(CSS) 변경 시 사용

 

 

 

min-width 활용 예시 1)

See the Pen Responsive-basic-minWidth-2 by yuna122212 (@yuna122212) on CodePen.

 

max-width 활용 예시 2)

See the Pen Responsive-basic-1 by yuna122212 (@yuna122212) on CodePen.

 

---

 

모바일을 우선한 미디어쿼리 작성 순서

* @media 규칙 외부를 모바일 레이아웃 기준으로 디자인합니다. (모바일 Default CSS 주석 위치)

* @media 규칙 내부를 모바일 크기 이상 규칙으로 설계하여 디자인합니다. (데스크탑 CSS 주석 위치)

/* 모바일 Default CSS */

@media screen and (min-width:600px) {
	/* 데스크탑 CSS */
}

 

데스크탑을 우선한 미디어쿼리 작성 순서

* @media 규칙 외부를 데스크탑 레이아웃 기준으로 디자인합니다. (데스크탑 Default CSS 주석 위치)

* @media 규칙 내부를 데스크탑 이하의 작은크기 디바이스들 (태블릿PC, 모바일 등)

레이아웃 기준으로 설계하여 디자인합니다. (모바일 CSS 주석 위치)

/* 데스크탑 Default CSS */

@media screen and (max-width:600px) {
	/* 모바일  CSS */
}