media query

✔️ 미디어 쿼리의 기본 구조

💡 미디어 쿼리의 기본 구조 ?
미디어 타입: 해당 코드가 어떤 미디어를 위한 것인지 브라우저에 알림
조건( 너비 및 높이 ): 지정한 창의 너비나 높이를 기준으로 기준 충족 시 스타일 적용
CSS: 조건을 통과하고 미디어 타입이 올바른 경우 적용될 스타일

❓media type

실무에서 자주 쓰이는 타입은 all, print, screen이고 생략이 가능한 데 생략 시 default 값은 all이다.

• all: 모든 미디어 타입
• print: 프린터
• screen: 디바이스 화면
• speech: 스크린 리더

❓condition( width / height, orientation, aspect-ratio)

viewport 기준를 기준으로 하고 크게 width/height, orientation, aspect-ratio로 나눌 수 있다.

• 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: 가로 / 세로 비율에 따라 가로 모드 / 세로 모드로 구분한다.

  • orientation: portrait: 단말기 세로 방향
  • orientation: landscape: 단말기 가로 방향
  • 모바일 우선 적용 시? min / 데스크탑 우선 적용 시 ? max
  • 방향성을 판별하기 위해서는 CSS와 JavaScript를 사용할 수 있다.

// 🌱 example: CSS 활용하기
@media (orientation: portrait) {
  /* Portrait 모드일 때 적용할 CSS */
}

@media (orientation: landscape) {
  /* Landscape 모드일 때 적용할 CSS */
}

// 🌱 example: JavaScript 활용하기
if (window.matchMedia('(orientation: portrait)').matches) {
  // Portrait 모드일 때 실행할 스크립트
  // 폭과 높이가 같으면 Portrait 모드로 인식돼요
} else {
  // Landscape 모드일 때 실행할 스크립트
}

// 🌱 example: JavaScript 활용하기
if (window.innerWidth <= window.innerHeight) {
  // Portrait 모드일 때 실행할 스크립트
} else {
  // Landscape 모드일 때 실행할 스크립트
}

// 창 사이즈가 바뀔 때 마다 체크하고 싶다면 ?
window.addEventListener('resize', function () {
  if (window.matchMedia('(orientation: portrait)').matches) {
    // Portrait 모드일 때 실행할 스크립트
    // 폭과 높이가 같으면 Portrait 모드로 인식돼요
  } else {
    // Landscape 모드일 때 실행할 스크립트
  }
});

• aspect-ratio
  • 화면 비율(width 값 / height 값)
  • min-aspect-ratio: 최소 화면 비율
  • max-aspect-ratio: 최대 화면 비율
  • device-aspect-ratio: 단말기 화면 비율(width 값 / height 값)
  • min-device-aspect-ratio: 단말기 최소 화면 비율
  • max-device-aspect-ratio: 단말기 최대 화면 비율

❓CSS

---

✔️ 복잡한 미디어 쿼리

❓and: 논리곱 미디어 쿼리

• 미디어 기능 합치기 ! 모든 조건을 만족시킬 때 CSS 적용

  // 🌱 example: 미디어타입 스크린 + 최소 너비 400px 이상 + 가로 모드 장치에 적용될 CSS
  @media screen and (min-width: 400px) and (orientation: landscape) {
  	body{
  		color: blue;
  	}
  }

❓or: 논리합 미디어 쿼리

• 콤마로 분리할 경우 조건 중 어느 하나를 만족시킬 때 CSS 스타일 적용

  // 🌱 example: 미디어타입 스크린이면서 최소 너비 600px 이거나 
  //         		 미디어타입 스크린이면서 가로모드인 경우에 적용될 CSS
  @media screen and (min-width: 600px), screen and (orientation: landscape) {
      body {
          color: blue;
      }
  }

❓not: 부정 미디어 쿼리

• 미디어 쿼리의 의미를 반대로 적용

  // 🌱 example: 방향이 세로인 경우에만 적용될 CSS
  @media not all and (orientation: landscape) {
      body {
          color: blue;
      }
  }

❓only: 특정 미디어 쿼리

• 해당 미디어 쿼리를 지원하는 브라우저만 적용

---

✨ mixin 활용하기

• 미디어 쿼리 관리하는 scss 파일
• 분기점: 변수 처리 / @content로 내용이 비워진 믹스인 작성

// 🍎 Break Point
$tablet: 768px;
$laptop: 1020px;
$desktop: 1400px;

// 🍏 Mixins
@mixin tablet {
  @media (min-width: #{$tablet}) {
    @content;
  }
}

@mixin laptop {
  @media (min-width: #{$laptop}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop}) {
    @content;
  }
}

// SCSS 에서 활용하기 !
// 요소 바로 밑에 작성함으로써 직관적, 분기점이 많아져도 보기 편해 유지보수에 유리
.logo {
  width: 20px;

  @include desktop {
    width: 44px;
  }
}