13. 미디어 쿼리 써먹기

 

화면의 크기가 줄어들면 선도 없어지고 본문이 아래쪽에 배치되며 'web' 이란 타이틀도 작아지게 하는 것입니다.

먼저 화면 크기를 지정해보자. 화면 크기가 800px보다 클 때 , 800px 보다 작을때의 디자인을 미디어 쿼리를 통해 다르게 만들어보겠습니다. 그런다음'grid'부분을 'grid'가 아니게끔 만들면 된다. #grid 코드를 복사해서 미디어 쿼리 코드 안에 넣어 봅니다. 그리고 display:grid를 display: block으로 바꿉니다.

 

 

선을 없애보겠습니다.

 

<h1> 태그의 테두리도 지워보겠습니다.

결과적으로 작은 화면에서는 페이지가 더 잘 보이게 됐고 , 큰화면 , 즉 800px보다 화면이 커지면 넓은 화면의 특성을 십분 발휘 하는 레이아웃으로 바뀌는 모습을 볼 수있습니다.