27. Media Query (1)

<media query>

css만을 이용해서 스크린의 사이즈를 알 수 있는 방법.

현재 화면이 핸드폰이라면 가로 상태인지 세로상태인지,

컴퓨터 화면이라면 창을 크게 하였는지 작게 하였는지 감지하는 것.

스크린의 사이즈에 따라 css를 변경하게 하는 것.

 

 

 

1) 특정 사이즈에 따른 박스의 변화

박스를 하나 만든 모습

브라우저의 가운데에 위치하도록

div 박스를 하나 만듬.

 

 

media query를 작성한 모습

@media screen and (max-width:600px)를 하여

창의 크기가 600px보다 작으면 변하도록 작성함.

 

 

창 크기에 따라 박스의 색이 변함

창의 크기가 600px보다 크면 박스의 색이 파란색이고,

창의 크기가 600px보다 작으면 박스의 색이 초록색이 됨.

 

특정 구간에서만 변화하게 할 수도 있음.

 

@media screen and (mix-width:600px) 를 하면

창 크기가 600px보다 크면 변하게 함.

 

 

 

2) 특정 사이즈 구간에 따른 박스의 변화

특정구간을 설정함

@media screen and (max-width:600px) and (min-width:300px) 을 하여

창 크기가 300px보다 크고 600px보다 작으면 변하도록 작성함.

 

 

특정 구간에서만 색이 변함

창의 크기가 600px보다 크면 박스의 색이 파란색이고,

창의 크기가 600px보다 작으며 300px보다 크면 박스의 색이 초록색이 되고,

창의 크기가 300px보다 작으면 박스의 색이 파란색이 됨.