CSS - @media query 사용하기

안녕하세요.

오늘은 반응형 웹페이지 디자인의 핵심 기술인 media query에 대해서 알아보겠습니다.

media query란?

• 최근 트렌드인 반응형 웹앱을 만들기 위한 CSS 기능입니다.
• 화면의 종류와 크기에 따라서 디자인을 달리 보여줍니다.

예제소스

• 넓이가 500px 이하일 경우는 body 태그의 배경색을 green으로 설정하는 코드.
  @media(max-width:500px) {
          body {
              background-color: green;
          }
  }
  
  
• 넓이가 500px 이상일 경우 body 태그의 배경색을 green으로 설정하는 코드
  @media(min-width:500px) {
          body {
              background-color: green;
          }
  }

예제소스 2

결론

• 엘리먼트들의 크기나 위치를 쉽게 설정할 수 있어, 레이아웃을 효과적으로 표현 할 수 있는 flex와 함께 media query를 사용한다면 더 좋은 반응형 웹 CSS를 만들 수 있습니다.

참고

• 생활코딩, https://opentutorials.org/module/2367/13517