📚 Study/HTML&CSS

[CSS] @media 와 반응형

0_ch4n 2022. 6. 7. 19:55
반응형

✔️ 반응형 vs 적응형

📌 적응형

  • 화면에 크기에 따라 다른 페이지를 보여줍니다.
  • 대표적인 예시로 네이버가 있습니다.
  • 장점으론 각 화면 크기에 집중하여 작업이 가능합니다.
  • 단점으론 페이지를 두 개를 만들어야 합니다.

 

📌 반응형

  • 화면 크기에 따라 요소들을 변화시킵니다.
  • 대표적인 예시로 애플이 있습니다.
  • 장점으론 하나의 페이지로 여러 크기에 대응이 가능합니다.
  • 단점으론 컨텐츠가 복잡할 경우 작업하기가 어렵습니다.

 

✔️ @media (미디어 쿼리)

  • CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다.
  • 예를 들어, 뷰포트가 480픽셀보다 넓은 경우에만 스타일을 적용할 수 있는 방법을 제공합니다.
  • 또한 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용을 탐지하는데도 사용됩니다.

 

📌 문법

@media 미디어 타입 또는 (조건) {
    css-style;
}

 

📌 미디어 타입

@media print { ... }

@media screen, print { ... }
  • 미디어 쿼리에 연산자와 함께 또는 단독으로 조건처럼 사용될 수 있으며 생략이 가능합니다.
    • all : 모든 미디어 유형을 말합니다. (기본값)
    • print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서를 말합니다.
    • screen : 컴퓨터, 태블릿PC, 스마트폰 등을 말합니다.
    • speech : 음성 합성 장치를 말합니다.

 

📌 연산자

@media (min-width: 30em) and (orientation: landscape) { ... }

@media screen and (min-width: 30em) and (orientation: landscape) { ... }

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

@media only screen and (color) { ... }
  • 여러 개의 조건을 추가할 때 사용되며 생략이 가능합니다.
    • and : 조건문을 and로 추가할 때 사용합니다.
    • , : 조건문을 or로 추가할 때 사용합니다.
    • not : 전체 조건을 부정할 때 사용하고 반드시 미디어 유형을 지정해야 합니다.
    • only : 전체 조건이 일치할 때만 스타일을 적용하려 할 때 사용합니다.

 

📌 조건문

@media (hover: hover) { ... }

@media speech and (aspect-ratio: 11/5) { ... }
  • width, height : 뷰포트(= 기기의 해상도)의 너비와 높이를 판단할 때 사용합니다.
    • 둘 다 max- 와 min- 접두사를 붙여 최대와 최소 너비, 높이를 판단할 수 있습니다.
  • orientation : 장치가 가로 모드인지 세로 모드인지 판단할 때 사용합니다.
    • landscape : 가로 방향입니다.
    • portrait : 세로 방향입니다.
  • pointer : 사용자가 어떤 포인팅 장치를 사용하는지 판단할 때 사용합니다.
    • fine : 마우스나 트랙패드와 같이 사용자가 작은 영역을 포인팅 할 수 있음을 의미합니다.
    • coarse : 터치스크린 상에 손가락을 의미합니다.
    • none : 포인팅 장치가 없다는 뜻으로 키보드 단독 또는 음성 명령으로 탐색하고 있다는 것을 의미합니다.
    • 이 외 미디어 쿼리 4, 5에서 추가된 조건문 보러가기

 

📌 미디어 쿼리 Level 4 에서 향상된 사항

@media (width <= 30em) { ... }

@media (30em <= width <= 50em ) { ... }
  • 크기 비교 연산을 통해 범위 유형을 가진 기능을 사용할 수 있습니다.

 

✔️ 미디어 쿼리를 적용시키는 여러가지 방법

 

📌 내부 CSS 파일에서 분기점 나누기

/* 스마트폰 */
@media (max-width: 480px) {

/* 저해상도 태블릿 */
@media (min-width: 481px) and (max-width: 767px) {

/* 태블릿 세로 화면 */
@media (min-width: 768px) and (max-width: 1024px) {

/* 태블릿 가로 및 저해상도 노트북, PC 화면 */
@media (min-width: 1025px) and (max-width: 1280px) {

/* 일반 노트북, PC 화면 */
@media (min-width: 1281px) {
  • 분기점은 어떤 기준으로 미디어 쿼리를 적용시킬지 정하는 지점입니다.

 

📌 <link>로 외부 CSS 파일 이용해 분기점 나누기

<link href = "style_pc.css" media = "screen and (min-width:1024px)" rel = "stylesheet" />
<link href = "style_tablet.css" media = "screen and (min-width:768px) and (max-width:1023px)" rel = "stylesheet" />
<link href = "style_mobile.css" media = "screen and (min-width:320px) and (max-width:767px)"" rel = "stylesheet" />

 

📌 <import>로 외부 CSS 파일 이용해 분기점 나누기

@import url("style_pc.css") screen and (min-width:1024px)
@import url("style_tablet.css") screen and (min-width:768px) and (max-width:1023px)
@import url("style_mobile.css") screen and (min-width:320px) and (max-width:767px)

 

📄 참고

https://blog.10page.co.kr/4

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

https://www.yalco.kr/@html-css-scoop/4-11/

 

반응형
저작자표시 (새창열림)