Day64 - [css] 미디어쿼리

이번에는 미디어 쿼리에 대해서 간단하게 알아 봅시다.

 

미디어 쿼리

css 를 사용해서 프론트엔드( 화면에 보여지는 부분. UI ) 를 만들면서, 인터넷 브라우저 창의 크기를 늘리기도 하고, 줄이기도 해 보셨을 겁니다. 그리고 인터넷 창을 pc 뿐 아니라 핸드폰 , 태블릿pc 를 이용해서 켜보신 적이 있을 겁니다.

 

각각의 기기에서 인터넷 창이 화면에 맞게 적용되게 하기 위해서 미디어 쿼리를 사용합니다.

 

미디어 쿼리는 <style> 안에 @media ( 화면크기 ) { 실행내용 } 을 사용 합니다.

기기가 바뀌면 화면크기 도 변하는 거겠죠? 그렇기 때문에 화면크기를 가지고 디자인을 해주면 됩니다.

 

pc에서 간단하게 화면크기를 변화시키는 방법으로는 , F12 를 누르고 아래의 버튼을 클릭 합니다.

이렇게 하면, 휴대폰 , 태블릿pc 의 크기로 간편하게 변화시킬 수 있습니다.

 

각각의 기기 에서 작동하게 하기 위해서, box(컨텐츠) 의 크기는 px 이 아닌 % 를 이용해 주어야 합니다.

공통되는 부분은 밖으로 빼고, 기기마다 달라질 부분만 @media 안에 작성 합니다.

- pc 크기

- 태블릿 크기

- 휴대폰 크기