[CSS] mediaquery 반응형 레이아웃

웹사이트를 pc에서만 만드는 것은 아니다

요즘은 대부분 스마트폰, 태블릿pc와 같은 기기를 많이 사용하기에 

html/css를 작성할때 호환성을 염두에 두고 만들어야 한다

 

그럴 때 사용하는것이 css mediaquery(미디어 쿼리) 반응형 레이아웃이다

 

일반적으로 만든 웹사이트 css

 

예를 들어 여기서 페이지 비율을 줄였다, 늘렸다 하게 되면 

 

폰트 사이즈라던지

 

아이콘의 가로정렬 등

 

화면의 비율은 모바일인데 pc 비율을 계속 유지하다 보니 모양? 이 상당히 예쁘지 않다

 

그럴 때 미디어쿼리를 사용해 보자

 

코드

@media screen and (max-width: 1200px) {
  .main-title {
    font-size: 40px;
   }
  }

보통 css 제일 하단에 사용한다 그래야 말끔하게 작동할 수 있다

 

여기서 max-width 1200px은 

1200px 가진 비율의 이하는 모두라는 뜻

즉 1200px이하는 내가 지정한 font-size가 보이게 된다

 

이제 비율을 줄여 보게 되면

폰트사이즈가 줄어든 것을 볼 수 있다

이런 걸 통해 

1200px

768px 등

단계적으로 미디어 쿼리를 주어 내가 원하는 css를 넣을 수 있는데

 

이를 "브레이크 포인트"라고 한다

 

다양하게 바꿀 수 있다 

 

끝!

 

출처 - 코딩애플