[CSS] 미디어 쿼리(Media Query)

1. 기본 문법

 - CSS에서 어떤 스타일을 선택적으로 적용할 때 사용.

@media (조건) { 스타일 }

 - 스타일 부분에는 일반적인 CSS 코드가 기재, 조건이 만족이 될 때는 스타일이 적용, 만족되지 않을 때는 스타일이 무시

 

 

2. 미디어 쿼리 예시

 - 핸드폰과 같이 비교적 좁은 화면에서 특정한 스타일을 적용할 때는 화면의 최대 너비 조건으로 사용

  *ex) 800px 이하의 좁은 화면는 박스를 없애고 싶다.

 

 

See the Pen CSS - media by hbkuk (@hbkuk) on CodePen.

 

 

  *ex) 800px 이상의 넓은 화면는 박스가 있어야 한다.

 

See the Pen CSS - media (2) by hbkuk (@hbkuk) on CodePen.

 

 

* 별첨. 알고가기

 - 코드의 재활용

  * style.css 파일을 만들어서 CSS 코드를 관리한다면 수정이 용이함.

  ** 단. html 문서에는 아래와 같은 내용이 기재되어 있어야함.

      <link rel="stylesheet" href="style.css">