grid

박영환과장님을 위한 css강의

by uiwwnw

HTML

<h1>테이블형식 그리드</h1>
<p>특징이라면 굳이 영역의 크기를 지정하지 않아도 자동적으로 전체영역을 나누어 그리드를 생성합니다.</p>

<h1>항상 동일하게 영역을 나눠 갖는 경우</h1>
<div class="gridRow style">
  <div class="grid">ddd</div>
  <div class="grid">dd</div>
  <div class="grid">dd</div>
  <div class="grid">a</div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
</div>
<div class="gridRow style">
  <div class="grid"></div>
  <div class="grid">dd</div>
  <div class="grid">dd</div>
  <div class="grid">a</div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
</div>

<h1>한 영역을 넓힐 경우</h1>
<div class="gridRow style">
  <div class="grid grid5"></div>
  <div class="grid"></div>
  <div class="grid"></div>
</div>

SCSS

.gridRow {
  display: table;
  table-layout: auto;
  width: 100%;
  
  .grid {
    // css로 작성할 시 .gridRow .grid 
    display: table-cell;
    
    //scss에서 지원하는 포문
    @for $i from 1 through 10 {
      &.grid#{$i} {
        width: $i * 10%;
      }
    }
    /* 
    //포문없이 만들 경우
    &.grid1 {
      // css로 작성할 시 .gridRow .grid.grid1 
      width: 10%;
    }
      
    &.grid2 {
      width: 20%;
    }
      
    &.grid3 {
      width: 30%;
    }
      
    &.grid4 {
      width: 40%;
    }
      
    &.grid5 {
      width: 50%;
    }
      
    &.grid6 {
      width: 60%;
    }
      
    &.grid7 {
      width: 70%;
    }
      
    &.grid8 {
      width: 80%;
    }
      
    &.grid9 {
      width: 90%;
    } */
  }
}


.style {
  height: 30px;
  border: 1px solid #000;
  
  > div {
    border: 1px solid red;
  }
}