[CSS] CSS로 반응형 웹 만드는 방법

오늘 소개할 CSS는 미디어 쿼리 (@media)이다.

미디어 쿼리란? (@media)

화면 출력 장치 중 일부를 참조하거나, 가로 사이즈를 기준으로 기존에 작성했던 HTML 코드로도 다른 화면을 구현할 수 있게 만들어줌.

 

CSS 작성하는 방법

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

1. @media - 미디어 쿼리가 시작됨을 알린다.
2. only - 미디어 쿼리를 지원하지 않는 브라우저에 대하여 특정 스타일을 적용할 수 있음. 생략하면 기본값으로 only가 들어가기 때문에 주로 생략한다. not으로 부정할수도 있다.
3. all - 미디어 쿼리를 실행시킬 미디어 타입을 정해준다. (screen, tv, print, speech, all) 생략하면 기본값으로 all이 들어간다. 주로 screen을 사용한다.
4. and - 논리적으로 AND 연산을 통해 앞뒤의 조건을 모두 만족해야 한다는 것을 의미한다. only, all 같은 선행 키워드를 생략했을때는 작성하지 않는게 좋다. or 또는 콤마 기호를 통해 OR 연산을 수행하게 할 수도 있다.
5. (조건) - 이 조건이 참일 때만 {실행}을 처리하게 된다. 두 가지 이상의 조건을 사용할때는 and 또는 콤마를 사용해야 한다.
6. {실행} - (조건)이 참일 때 실행시킬 일반적인 css 코드를 적는다.

 

조건에 들어가는 특징들

조건문에 들어가는 특징들은 상당히 많은데, 그 중 잘 쓰이는 width에 대해서만 서술하겠다.

 

특징들에 대해 자세히 알고싶으면 https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries#Syntax 미디어 특성에 서술되어 있으니 참고.

 

@media only screen and (min-width: 800px) and (max-width: 1200px) {...}
// 미디어 타입이 screen '그리고' 뷰포트의 가로가 최소 800px (800px 이상) '그리고' 최대 1200px (1200px 이하)일때 실행

@media all and (width: 1000px) or (width: 1500px) {...}
// 미디어 타입이 all (모든 미디어 타입을 포함) 이고 뷰포트의 가로가 1000px '또는' 1500px일때 실행

뷰포트란? 
웹 페이지가 사용자에게 보여지는 영역을 의미한다.