====== CSS Responsive Web Design - Grid-View ====== * description : CSS Responsive Web Design - Grid-View * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-06 Tue \\ =====The source of this article===== [[https://www.w3schools.com/css/css_rwd_grid.asp|CSS Responsive Web Design - Grid-View]]\\ ====== What is a Grid-View? ====== 많은 웹 페이지들은 그리드 뷰(grid-view)에 기반하고 있으며, 이는 페이지가 컬럼(세로 열)으로 구분되어 있다는 것을 의미합니다.\\ {{:wiki:css:css_note:grid.png?600|}}\\ \\ 웹 페이지를 디자인할 때 그리드 뷰를 사용하는 것은 매우 유용합니다. 웹 페이지에 요소를 더 쉽게 배치할 수 있습니다.\\ {{:wiki:css:css_note:grid-webpage.png?600|}}\\ \\ 반응형 그리드 뷰에는 12 개의 열이 있고, 총 너비는 100%이며 브라우저 창 크기를 조정하면 축소 및 확장됩니다.\\ ===== Building a Responsive Grid-View ===== 반응형 그리드 뷰 구축을 시작하겠습니다.\\ \\ 먼저 모든 %%HTML%% 요소에 ''%%border-box%%'' 로 설정된 ''%%box-sizing%%'' 속성이 있는지 확인합니다. 이렇게 하면 padding과 border가 요소의 전체 너비와 높이에 포함됩니다.\\ \\ %%CSS%%에 다음 코드를 추가합니다.\\


* {
 box-sizing: border-box;
}

\\ ''%%box-sizing%%'' 속성에 대해 [[https://www.w3schools.com/css/css3_box-sizing.asp|CSS Box Sizing]] 챕터를 읽어보세요\\ \\ 다음의 예제는 두 개의 컬럼이 있는 간단한 반응형 웹 페이지를 보여줍니다.\\ {{:wiki:css:css_note:two-columns.png?600|}}\\ ==== Example ====


 


    
    
        Chania
    

    
        
            The Flight
            The City
            The Island
            The Food
        
    

    
        The City
        
            Chania is the capital of the Chania region on the island of Crete. 
            The city can be divided in two parts, the old town and the modern city.
        
        
            Resize the browser window to see how the content respond to the resizing.

\\ 위의 예제는 웹 페이지에 두 개의 컬럼만 포함되어 있으면 괜찮습니다.\\ \\ 그러나 웹 페이지를 더 잘 제어하기 위해 12개의 컬럼이 있는 반응형 그리드 뷰를 사용하려고 합니다.\\ \\ 먼저 하나의 컬럼에 대한 백분율을 계산해야 합니다. 100% / 12 컬럼 = 8.33 %.\\ \\ 그런 다음 12개 컬럼 각각에 대한 하나의 클래스 ''%%class="col-"%%''과 섹션이 걸쳐야 하는 컬럼 수를 정의하는 숫자를 만듭니다.\\ \\ ====CSS:====


    .col-1 { width: 8.33%;}
    .col-2 { width: 12.66%;}
    .col-3 { width: 25%;}
    .col-4 { width: 33.33%;}
    .col-5 { width: 41.66%;}
    .col-6 { width: 50%;}
    .col-7 { width: 58.33%;}
    .col-8 { width: 66.66%;}
    .col-9 { width: 75%;}
    .col-10 { width: 83.33%;}
    .col-11 { width: 91.66%;}
    .col-12 { width: 100%;}

\\ 이 모든 컬럼은 왼쪽으로 float되어야 하며, padding은 15px입니다:\\ \\ ====CSS:====


[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

\\ 각 row(가로 행)은 %%

%%로 wrap되어야 합니다. row(가로 행) 내부의 컬럼 수는 항상 12개가 되어야 합니다.\\ \\ ====HTML:====


  ...
 
  ...

\\ row(가로 행) 내부의 컬럼은 모두 왼쪽으로 플로팅되어 페이지 흐름에서 제거되고, 다른 요소는 컬럼이 없는 것처럼 배치됩니다. 이를 방지하기 위해, 흐름을 정리하는 스타일을 추가합니다\\ \\ ====CSS:====


.row::after {
  content:"";
  clear: both;
  display: table;
}

\\ 또한 몇 가지 스타일과 컬러를 추가하여 더 보기 좋게 만듭니다.\\ ==== Example ====


    


    
    
        Chania
    

    
        
            
                The Flight
                The City
                The Island
                The Food
            
        

        
            The City
            
                Chania is the capital of the Chania region on the island of Crete. 
                The city can be divided in two parts, the old town and the modern city.
            
            
                Resize the browser window to see how the content respond to the resizing.

\\ 브라우저 창을 매우 작은 너비로 크기를 조정하면 예제의 웹 페이지가 보기 좋지 않습니다. 다음 챕터에서는 이를 수정하는 방법을 보겠습니다.\\ {{tag>오션, Responsive Web Design - Grid-View}}