WEB2 - CSS 13

CSS(Cascading Style Sheets)

미디어 쿼리 써먹기

다시 2.html로 돌아와 미디어 쿼리를 예제에 적용해보자.

 

코딩을 시작해보자. 

화면의 크기가 작아지면 너무 낭비적인 요소가 있고 이상해진다. 

특히 아래와 같이 본문이 좁아져 내용을 읽기 불편해진다.

• 본문을 아래에 배치시키고 제목을 좀 작게 개편해보자. 
  800픽셀보다 작아질 때 화면이 좀 이상해지는 듯하다.
  • screen width < 800px
    즉
    

    	@media(max-width:800px){
          
        	}

     
  • 화면의 크기가 800픽셀보다 작을때 본문을 아래로 내리려고 한다. 그렇다면 id값이 grid인 부분을 grid가 아니게 하면 된다. 즉 id값이 grid인 태그의 display가 grid에서 block으로 바꿔준다.
    

    	@media(max-width:800px){
          	 #grid{
          	  display:block;
             }
       	}

    이렇게 되면 800픽셀보다 작은 크기일 때 본문이 아래로 내려오게 됐다. 그러나 테두리는 그대로 존재한다. 테두리를 없애주자.
  • 세로줄과 가로줄을 없애자
    • 세로줄은 ol 태그의 border-right부분 때문이다. 여기서 값을 none;으로 바꿔주자.
      

      	@media(max-width:800px){
            	 #grid{
            	  display:block;
               }
               #grid ol{
                border-right:none;
               }
         	}

    • 가로줄은 h1태그의 border-bottom부분 때문이다. 여기도 미디어쿼리 태그안에서 값을 none;으로 바꿔주자.
      

      	@media(max-width:800px){
            	 #grid{
            	  display:block;
               }
               #grid ol{
                border-right:none;
               }
               h1{
                border-bottom:none;
               }
         	}​

    • 추가적으로 수업을 들으며 내 마음대로 padding값을 조정하여 디자인한 부분을 미디어쿼리 안에 넣어 800픽셀보다 작을 때 목차와 본문이 비교적 가지런히 보이게 조정하자. 
      
      • #grid ol 태그에서 padding-bottom과 #grid #文章에서 padding-left값의 조정이 필요하다.
        

        	@media(max-width:800px){
              	 #grid{
              	  display:block;
                 }
                 #grid ol{
                  border-right:none;
                  padding-bottom:50px;
                 }
                 h1{
                  border-bottom:none;
                 }
                 #grid #文章{
                  padding-left:40px;
                 }
           	}​​

---

이렇게 화면의 크기가 800픽셀보다 작을때 구역을 나누는 세로줄과 가로줄을 없애고 본문이 아래로 내려가도록 미디어 쿼리를 사용해봤다. 

미디어 쿼리를 이용해서 일정 화면의 크기 변화가 있을 때(여기선 800픽셀) 개발자도구, 검사를 통해서 확인한 뒤 없애거나 수정해야 할 부분을 그대로 미디어 쿼리 부분으로 가지고와 수정해야 되는 작업이다. 

screen width > 800px

screen width < 800px