[HTML/CSS] SCSS 로 row, col 만들기

💡 실습 포인트!

• Bootstrap 에는 row, col 이라는 굉장히 Grid 형태로 만들기 편한  class 가 있는데 오늘은 그것을 직접 만들어보았다.
• 그리고 투명하면 제대로 레이아웃이 만들어졌는지 확인이 어려워 border 과 text 를 넣어주었다.
• SCSS 의 @mixin 과 @include 를 활용하여 코드를 간결하게 바꿀 수 있었다.
• @mixin 과 @extend 는 상당히 유사한데 @mixin 의 장점이라면 내부에 묶어둔 속성들에 파라미터를 활용할 수 있다는 것이다.

---

💜 HTML

    <div class="row">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>
    <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
    </div>

💜 SCSS

• @mixin 문법을 사용하고 width 라는 이름으로 해당부분을 파라미터로 활용할 수 있게 하였다.
• 파라미터로 활용하기 위해서는 붙인 이름 앞에 $(달러표시)를 붙여주어야 한다.

.row {
  @mixin col($width) {
    border: 1px solid lightgrey;
    float: left;
    padding: 15px;
    margin: 10px 0;
    text-align: center;
    width: $width;
  }

  .col-6 {
    @include col(50%);
  }

  .col-4 {
    @include col(33.33%);
  }
}

💜 CSS

.row .col-6 {
  border: 1px solid lightgrey;
  float: left;
  padding: 15px;
  margin: 10px 0;
  text-align: center;
  width: 50%;
}
.row .col-4 {
  border: 1px solid lightgrey;
  float: left;
  padding: 15px;
  margin: 10px 0;
  text-align: center;
  width: 33.33%;
}/*# sourceMappingURL=row&col.css.map */