<CSS>생활코딩_미디어쿼리 써먹기

https://www.youtube.com/watch?v=qe3nSIg2k3Y&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=13 

* CC BY 생활코딩

 

 

화면의 크기가 800px 보다 작을때 id값이 grid인 태그가 블럭으로 바뀌게 됨.

기존에 있던 곳에 위치 할수 없기 때문에 밑으로 내려온다.

선이 안사라지는 이유는 기존 <ol> 태그의 border 속성 때문.

 

 

 

미디어 쿼리 크기를 지정해주고 기존 #grid 에서 설정한 코드를 복붙 한 뒤

디스플레이 블럭, h1 아래 테두리 none, 목차 오른쪽 선 none 으로 설정해 주면 된다.

 

 

 

 

결과적으로 800px 크기 이상이면 기존 화면 그대로 노출.

800px 이하 이면 미디어 쿼리가 적용 됨 (작은화면에도 가독성이 좋게 된다.)

미디어 쿼리를 살짝 배웠지만 정식적으로 공부하게 되면 웹페이지가 돋보일듯.