@media, Responsive Design

uiop5487·2022년 5월 11일
0

Responsive Design

반응형 웹 디자인(Responsive Design)이란 웹 디자인 기법 중 하나로, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 의미한다.

이를 사용할때 미디어 쿼리를 이용해 사용할 수 있다.

@media

@media CSS 규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다.

미디어 쿼리란?

  • 미디어 쿼리는 단말기 유형과 어떤 특성이나 수치에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다.
  • 미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어진다.

@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있다.

@media @규칭은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있다.

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

조건부 @규칙이란?

  • 속성값과 마찬가지로, 각각의 @규칙은 다른 구문이 있다.
  • 그럼에도 그 중 몇몇은 그룹 규칙으로 불리는 특별한 범주로 분류될 수 있다.
  • 이들 문은 공통 구문을 공유하고 그 각각은 중첩 문 또는 중첩 @규칙을 포함할 수 있다.
  • 모두 어떤 유형의 조건을 링크한다, 언제라도 참 또는 거짓 중 하나로 평가하는 조건을 참으로 평가하면 그룹 내 모든 문이 적용된다.

사용예제

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

미디어 유형

  • all : 모든 장치에 적합
  • print : 인쇄 결과물 및 출력 미리보기 화면에 표시중인 문서
  • screen : 주로 화면이 대상
  • speech : 음성 합성장치 대상

Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있다.

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

출처: mdn, Everyday Life

profile
풀스택 진행중...

0개의 댓글