11/11 41-4 [CSS] ResponseWeb

출력하는 화면에 따라서

즉,  해상도에 따라서 출력되는 방식을 다르게 한다!! 

이것이 바로 반응형 !! 이거로 CSS도 끝!!!

 

우선 받은 HTML

 <div id="allWrap">
        <div id="partWrap">
            <div id="header">
                <h1>HEADER</h1>
            </div> ​     
            <div id="contentWrap">
                <div id="content">
                    <h2>Roboto, 12 Styles by Christian Robertson</h2>   
                    <p>  
                        Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke
                        from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on
                        his armour-like back, and if he lifted his head a little he could see his brown belly, slightly
                        domed and divided by arches into stiff sections. The bedding was hardly able to cover it and
                        seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of
                        the rest of him, waved about helplessly as he looked. One morning, when Gregor Samsa woke from
                        troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his
                        armour-like back, and if he lifted his head a little he could see his brown belly, slightly
                        domed and divided by arches into stiff sections. The bedding was hardly able to cover it and
                        seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of
                        the rest of him, waved about helplessly as he looked.    
                    </p>  
                </div> 
            </div> ​   
            <div id="footer">
                FOOTER
            </div>
        </div>
      </div>

 

공통적용

  * {
      margin: 0;
      padding: 0;
      font-family: Verdana;
    }
    #allWrap {
      margin: 0 auto;
      text-align: center;
    }
    #partWrap {
      margin: 0 auto;
      width: 100%;
      text-align: left;
      
    }

    #header {
      
      height: 100px;
      text-align: center;
      line-height: 100px;
    }

    #contentWrap #content > h2 {
      
      font-size: 2em;
    }

    #content {
      padding: 30px;
    }

    #footer {
      font-size: 2em;
      font-weight: bold;
      height: 100px;
      text-align: center;
      line-height: 100px;
    
    }

 

1. 해상도 640px이하일 때 적용되는 css 

@media screen and (max-width:640px) {

        #allWrap {
        width: 100%;
        }

        #content p {
        font-size: 2em;
        }
}

 

 

2.해상도가 1000px이상일 때 

 @media screen and (min-width:1000px) {
        #allWrap {
          width: 80%;
         }

        #content p {
          font-size: 1em;
        }
}

 

 

3.해상도가 641px~999px사이 일 때

@media screen and (min-width:641px) and (max-width:999px) {
         #allWrap {
          width: 100%;
          }

        #content p {
          font-size: 1.5em;
         }
}

 

 

이제 이런 반응형을  좀 더 깊게 배우기 위해

부트스트랩을 배울거래!!

css 안녕 ~