문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_templates
wiki:css:css_note:css_templates

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:css_templates [2021/07/12 10:52]
emblim98 만듦 		wiki:css:css_note:css_templates [2023/01/13 18:44] (현재)
줄 61: 줄 61:
     }     }
  
-    /* Responsive layout - makes the three columns stack on top ofeach other instead of next to each other. */+    /* Responsive layout - makes the three columns stack on top of  
 +    each other instead of next to each other. */
     @media (max-width: 600px) {     @media (max-width: 600px) {
       .column{       .column{
줄 72: 줄 73:
   <h2>CSS Template using Float</h2>   <h2>CSS Template using Float</h2>
   <p>   <p>
-    In this example, we have created a header, three qeual columns and a footer. On smaller screens, the columns will stack on top of each other.+    In this example, we have created a header, three qeual columns and a footer.  
 +    On smaller screens, the columns will stack on top of each other.
   </p>   </p>
   <p>Resize the browser window to see the responsive effect.</p>   <p>Resize the browser window to see the responsive effect.</p>
줄 134: 줄 136:
     }     }
  
-    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */+    /* Responsive layout - makes the three columns stack  
 +    on top of each other instead of next to each other */
     @media (max-width: 600px) {     @media (max-width: 600px) {
       .row {       .row {
줄 147: 줄 150:
   <h2>CSS Template using Flexbox</h2>   <h2>CSS Template using Flexbox</h2>
   <p>   <p>
-    In this example, we have created a header, three equal columns and a footer. On smaller screens, the columns will stack on top of each other.+    In this example, we have created a header, three equal columns and a footer.  
 +    On smaller screens, the columns will stack on top of each other.
   </p>   </p>
   <p>Resize the browser window to see the responsive effect.</p>   <p>Resize the browser window to see the responsive effect.</p>
-  <p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>+  <p> 
 +    <strong>Note:</strong>  
 +    Flexbox is not supported in Internet Explorer 10 and earlier versions. 
 +  </p>
  
   <div class="header">   <div class="header">
줄 228: 줄 235:
     }     }
  
-    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other. */+    /* Responsive layout - makes the three columns stack  
 +    on top of each other instead of next to each other. */
     @media (max-width: 600px) {     @media (max-width: 600px) {
       .grid-container {       .grid-container {
줄 247: 줄 255:
   <h2>CSS Template using Grid</h2>   <h2>CSS Template using Grid</h2>
   <p>   <p>
-    In this example, we have created a header, three equal columns and a footer. On Smaller screens, the columns will stack on top of each other.+    In this example, we have created a header, three equal columns and a footer.  
 +    On Smaller screens, the columns will stack on top of each other.
   </p>   </p>
   <p>Resize the browser window to see the responsive effect.</p>   <p>Resize the browser window to see the responsive effect.</p>
   <p>   <p>
-    <strong>Note:</strong> The Grid layout Module is not supported in Internet Explorer or Edge 15 and earlier versions.+    <strong>Note:</strong>  
 +    The Grid layout Module is not supported in Internet Explorer or Edge 15 and earlier versions.
   </p>   </p>
  
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_templates.1626054774.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki