미디어 쿼리 예제에 써먹기

화면의 크기가 작아지면 현재 웹페이지에 UI는 낭비가 생기고 이상해집니다.

이런 경우에는 만들어 놓은 선도 없애고 본문이 오른쪽에 있는 것보다

밑으로 내리는 것이 깔끔하고 뭐 기타 등등 개편을 할 것입니다.

 

우선적으로 화면 사이즈를 정해야 합니다.

검사를 열어서 화면사이즈를 체크를 해봅시다.

영상에서는 800px 을 기준으로 하기 때문에 저도 800px로 해보겠습니다.

800px보다 작을때를 다른말로 하면 최대가 800픽셀일 때 입니다.

이런 경우에 어떻게 할 것인지를 지정해 봅시다.

우선 id 값이 grid라고 되어있는 부분이 grid가 아니게 하면 됩니다.

위 사진과 같이 바꾸면 800픽셀보다 화면의 크기가 작을 때 id 값이 grid인 태그의 display가

grid였던 것이 block으로 바뀌게 되는 것입니다. block level element가 되면 화면 전체를 쓰니까

자연스럽게 밑으로 내려오게 됩니다.

선도 보기 싫고 조금 그렇지 않나요??

ol태그의 border-right라는 속성때문에 선이 존재하는 것입니다.

그럼 그 부분을 카피해서 가져온 다음에 내용을 none으로 바꿔줍니다. 그러면 테두리가 사라지는 것을 볼 수 있습니다.

그 다음에 위쪽에 있는 <h1> 태그의 테두리도 지워줍시다.

미디어 쿼리가 무엇인지와 이런 것이 필요할 때 미디어 쿼리를 공부하면 되는구나를 알고가는 수업이다.