[CSS] 반응형 웹 디자인

▶︎ 반응형 웹 (Responsive Web)

웹 브라우저 화면의 크기변경에 따라 웹 페이지의 각 요소들이 반응해서 동작하게끔 구현한 것.

구현하기 위해서는 Media Query 라는 기능을 이용함.

 

▪︎ 간단한 예시

<style>
  @media(min-width:300px) {
    /*screen width >300*/
  }
  @media(max-width:300px) {
    /*screen width <300*/
  }
</style>

style 태그 안에 @media 를 입력한 뒤 괄호 안에 조건을 넣어준다.

 

@media(min-width:300px) 는

min-width, 최소 너비가 300px일때, 즉 화면 너비가 300px보다 클 때를 의미한다.

@media(max-width:300px) 는

max-width, 최대 너비가 300px일때, 즉 화면 너비가 300px보다 작을 때를 의미한다.