CSS - Media Queries (미디어 쿼리)

Media Query

 

Media query는 CSS3에서 소개된 기술로 @media 규칙을 적용해 특정 조건을 만족할 경우에만 CSS 속성이 적용되도록 할 수 있습니다.

 

<예시>

 

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

 

위 코드가 CSS에 포함되면 문서의 가로 길이가 600pixel 이하로 떨어질 경우 바탕색이 "lightblue"로 변경됩니다.

 

 

Breakpoint 설정하기

 

Media query를 통해 breakpoint를 설정하여 화면 크기가 일정 기준 이상 또는 이하로 변경되었을 경우 디자인의 일부 혹은 전체가 다르게 배치되도록 할 수 있습니다.

 

 

항상 모바일 기준으로 먼저 디자인

데스크탑이나 다른 기기를 기준으로 디자인을 만들기 전에 모바일 기기를 기준으로 먼저 디자인해야합니다. 

반대로 할 경우, 모바일 기기에 맞춘 디자인을 만들기가 어려워집니다.

 

 

https://www.w3schools.com/css/css_rwd_mediaqueries.asp