[CSS] 미디어쿼리

미디어 쿼리는 CSS에서 스타일을 선택적(단말기의 유형, 화면 해상도, 뷰포트 너비 등)으로 적용하고 싶을 때 사용합니다.

 

미디어 쿼리 사용방법은 아래와 같이 사용할 수 있습니다.

 

- HTML link 태그 사용

<link rel="stylesheet" type="text/css" media="(조건)" href="style.css">

- CSS @media 키워드로 사용

@media all and (조건) and (조건) {}

 

일반적으로는 CSS @media 키워드를 사용해서 스타일을 적용합니다.

 

미디어 쿼리

@media only all and (조건) and (조건) {}

 

미디어 유형

미디어 유형은 장치의 일반적인 범주를 나타냅니다.

• all : 모든 장치에 적합합니다.(기본값)
• print : 인쇄 결과물 및 출력 미리보기 화면에 적용할 때사용합니다.
• screen : 화면에 표시되는 부분에 적용할 때 사용합니다.

 

논리 연산자

not, and, only 와 같은 논리 연산자를 사용하여 복잡한 쿼리를 조합할 수 있습니다.

 

and

• 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이기 위해서는 모든 구성 특성이 참을 반환해야합니다.
• 미디어 쿼리의 조건은 모두 and 키워드로 연결합니다.

not

• 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. not 연산자를 사용할 경우 반드시 미디어 유형도 지정해야 합니다.

only

• 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지합니다.
• 특정 미디어에만 적용하는 경우 사용됩니다.

 

조건

반드시 괄호() 안에 조건을 입력해야 합니다.

• min : 최소값이 일치할 때, 입력한 사이즈 이상부터 스타일이 적용됩니다.
• max : 최대값이 일치할 때, 입력한 사이즈 이하부터 스타일이 적용됩니다.

 

예시)

@media only screen and (min-width: 320px){}

• 스크린 형태에만 적용
• 0 ~ 319px에서는 적용되지 않음
• 320px 부터 적용(확장 개념)

@media only screen and (max-width: 320px){}

• 스크린 형태에만 적용
• 0 ~ 320px까지 적용됨(축소 개념)
• 321px 부터는 적용되지 않음

 

예시에서와 같이 미디어 쿼리를 적용하여 스타일을 적용하는 경우 아래와 같이 의문을 가질 수 있다.

 

320px에는 과연 어떤 스타일이 적용될까?

정답은 ‘가장 마지막에 작성한 스타일이 적용된다’ 입니다. 이러한 분기점을 브레이크포인트(breakpoint)라고 합니다. 미디어쿼리르 적용할 때 분기점이 생기는 경우 어떤 스타일이 적용되는지를 미리 확인하고 적용해야 합니다.

 

미디어 쿼리 분기

반응형으로 스타일을 적용할 때 일반적으로 아래와 같이 사이즈를 적용합니다.

/* 모바일 퍼스트*/

/* 모바일 */

@media (min-width: 768px){
    /* 태블릿 */
}

@media (min-width: 1024px){
    /* 랩탑, 데스크탑 */
}

/* 테스크탑 퍼스트 */

/* 랩탑, 데스크탑 */

@media (max-width: 1023px){
    /* 태블릿 */
}

@media (max-width: 639px){
    /* 모바일 */
}

하지만 사이즈의 경우 절대적이지 않기 때문에 디자인에 맞게 적용하면 됩니다. 여기서 생각해봐야 하는 것은 모바일이나 태블릿의 경우 화면에 가로일 때와 세로일 때의 사이즈가 다르다는 점입니다. 그렇기 때문에 반응형으로 스타일을 적용하는 경우 디자인아니 기획자와의 회의를 통해 정한 다음 적용해야 합니다.

 

미디어 쿼리 활용

• @media screen and (-webkit-max-device-pixel-ratio : 1){} : 고해상도 디스플레이가 아닌 경우
• @media screen and (orientation: portrait){} : 디바이스가 세로인 경우
• @media screen and (orientation: landscape){} : 디바이스가 가로인 경우
• @media (any-hover: none){} : 입력 방법이 hover를 지원하지 않는 경우(오직 터치스크린)