nomadcoders-css-layout-master-class

노마드코더 CSS 마스터클래스

SCSS Masterclass

(S)CSS Layout Masterclass: Flexbox & Grid

Flexbox:

Grid:

grid-template-columns - 열(column)의 개수와 크기를 지정

.grid {
  display: grid;
  gap: 10px;

  grid-template-columns: 100px 100px 100px 100px; /* px로 크기 지정 */
  grid-template-rows: 100px 100px 100px 100px;

  grid-template-columns: [col_start] 100px [col_2] 100px [col_3] 100px [col_4] 100px [col_end]; /* 이름을 지정 */
  grid-template-rows: 100px 100px 100px 100px;

  grid-template-columns: repeat(4, 100px); /* repeat(반복회수, 크기) */
  grid-template-rows: repeat(4, 100px);

  grid-template-columns: 1fr 1fr 1fr 1fr; /* fr단위 : 비율로 지정*/
  grid-template-rows: 1fr 3fr 3fr 1fr;
}

grid-template-rows - 행(row)의 개수와 크기를 지정
- grid-template-rows: 50px 50px 100px;
column-gap : 열(column)간의 여백을 지정
- column-gap: 10px;
row-gap - 행(row)간의 여백을 지정
- row-gap: 10px;
gap - 열(column)과 행(row)간의 여백을 지정

grid-template-areas - 그리드의 형태를 문자열로 지정할수 있음

 .grid {
      height: 95vh;
      display: grid;
      grid-template-columns: auto 300px;
      grid-template-rows: 100px auto 100px;
      grid-template-areas:
          "header header header header"
          "content content content nav"
          "content content content nav"
          "footer footer footer footer";
  }
  .header {
      background-color: #2ecc71;
      grid-area: header;  /* grid-template-areas에서 사용할 문자열을 지정 */
  }
  .content {
      background-color: #3498db;
      grid-area: content; /* grid-template-areas에서 사용할 문자열을 지정 */
  }
  .nav {
      background-color: #8e44ad;
      grid-area: nav; /* grid-template-areas에서 사용할 문자열을 지정 */
  }
  .footer {
      background-color: #f39c12;
      grid-area: footer; /* grid-template-areas에서 사용할 문자열을 지정 */
  }

grid-column-start - (자식요소) 열(column)이 시작 라인 번호

.content {
  background-color: #3498db;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

grid-column-end - (자식요소) 열(column)이 끝나는 라인 번호
grid-row-start - (자식요소) 행(row)이 시작 라인 번호
grid-row-end - (자식요소) 행(row)이 끝나는 라인 번호

grid-column - (자식요소) 열의 라인번호 (시작 / 끝)

.header {
  background-color: #2ecc71;
  grid-column: 1 / 5;  /* 1번줄 ~ 5번줄 */
  grid-column: 1 / -1;  /* 1번줄 ~ 마지막줄 */
  grid-column: 1 / -2;  /* 1번줄 ~ 마지막 -1줄 */
  grid-column: span 4;  /* span : 현재위치에서 상대적으로 몇칸을 더 채울건지 결정 */
}

grid-row - (자식요소) 행의 라인번호 (시작 / 끝)

grid-template - 행열의 이름과 크기를 한번에 지정할 수 있음 😍

  .grid {
      height: 50vh;
      display: grid;
      gap: 10px;
      grid-template:
          "header header header header" 1fr /* 열의이름을 지정하며, 해당행의 높이를 1fr로 설정 */
          "content content content nav" 2fr /* 행높이 2fr */
          "footer footer footer footer" 1fr /* 행높이 1fr */
          / 1fr 1fr 1fr 1fr; /* 각 열의 넓이 1fr */
  }
  .header {
      background-color: #2ecc71;
      grid-area: header;
  }

justify-items - 셀내부 요소의 수평정렬 stretch, start, center, end
align-items - 셀내부 요소의 수직정렬 stretch, start, center, end

place-items - 셀내부 요소의 수직 / 수평 단축키 😍

  .grid {
      display: grid;
      place-items : center center;  /* 가운데정렬 */
      place-items: start end; /* 상단 우측정렬 */
      place-items: end center; /* 하단 중앙정렬 */
  }

justify-content - 그리드자체 수평 정렬

  .grid {
      height: 50vh;
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(4, 100px);
      grid-template-rows: repeat(4, 100px);

      justify-content: start;
      justify-content: center;
      justify-content: end;
      justify-content: space-between;
      justify-content: space-around;
  }

align-content - 그리드자체 수직 정렬

place-content - 그리드자체 수직 / 수평 단축키 😍

  .grid{
      display : grid;
      place-content: end center;
  }

justify-self - ✅자식요소에사용 수평 정렬
align-self - ✅자식요소에사용 수직 정렬

place-self - ✅자식요소에사용 수직 정렬 단축키 😍

  .grid {
      background-color: #0005;
      height: 100vh;
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(4, 100px);
      grid-template-rows: repeat(4, 100px);
  }
  .header {
      background-color: #2ecc71;
      /* justify-self: center; */
      /* align-self: center; */
      place-self: start end;
      place-self: end start;
  }

grid-auto-rows - row 개수 자동 지정

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px); /* row 개수 4개(수동)*/
  grid-auto-rows: 100px; /* row 개수 자동*/
}

grid-auto-flow - grid 행열의 위치변경 (flexbox의 direction과 비슷한 기능) 😍

.grid{
    display:flex;
    grid-auto-flow: row; /* 기본값 */
    grid-auto-flow: column; /* 축이 변경됨 - 갤러리 구현시 유용 */
}

grid-auto-columns - column 개수 자동 지정

Keywords & Functions:

repeat - 반복 repeat(4 100px)
fr - 분수 단위 (1fr 2fr)

minmax - 최소/최대 크기를 지정

.grid{
    display : grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
}

auto-fit - 셀의 크기를 고정 행/열의 개수를 자동으로 채움 (repeat와 함께 사용)
```
.grid{
    display : grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
```
auto-fill - 셀의 크기를 늘리며 행/열의 개수를 자동으로 채움 (repeat와 함께 사용)
```
.grid{
    display : grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
```
min-content -
max-content -

SCSS:

Variables - 변수

  // 선언
  // _variables.scss
  // _FILENAME.scss - 언더바(_)로 시작하는 파일은 컴파일되지 않음!

  $bg: #E7473C;
  $title: 32px;

  // 사용
  // styles.scss

  @import "_variables";   /* include */

  body{
      background-color: $bg;
  }
  h1{
      color:$bg;
      font-size: $title;
  }

Nesting - 중첩문 사용가능

.box{
    margin:20px;
    h2{
        color:blue;
    }
    button{
        color: white;
        background-color: black;
        &:hover{
            color:red;
        }
    }
    &:hover{
        background-color: green;

    }
}

Mixins - 함수

@mixin link($color:red) {
    color:$color;
    text-decoration: none;
    display: block;
    font-size: 50px;
}
a{
    &:nth-child(odd){
        @include link(blue);
    }
    &:nth-child(even){
        @include link(green);
    }
}

/* 조건문도 가능 */
@mixin link($word) {
    text-decoration: none;
    display: block;
    font-size: 50px;

    @if $word == "odd"{
        color:blue;
    }
    @else{
        color:red;
    }
}

a{
    &:nth-child(odd){
        @include link("odd");
    }
    &:nth-child(even){
        @include link("even");
    }
}

Extend - 코드 재사용 가능 (함수의 축소판?)

/* %기호로 extend 정의*/
%button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border-radius: 7px;
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 10px;
    background-color: tomato;
    color:white;
    font-weight: 500;
}

a{
    @extend %button;  /* @extend %변수명 */
    text-decoration: none
}
button{
    @extend %button;
    border: none;
}

Responsive Mixins -

$min_iPhone:414px;
$max_iPhone:896px;

$min_Tablet:$min_iPhone+1;
$max_Tablet:1120px;

@mixin responsive($device) {
    @if $device == 'iphone'{
        @media screen and (min-width:$min_iPhone) and (max-width: $max_iPhone) {
            @content;   /* @mixin 안의 @content는 외부에서 주입 가능 */
        }
    }
    @else if $device == "tablet"{
        @media screen and (min-width:$min_Tablet) and (max-width: $max_iPhone) {
            @content;   /* @mixin 안의 @content는 외부에서 주입 가능 */
        }
    }
    @else if $device == "iphone-l"{
        @media screen and (min-width:$min_iPhone) and (max-width: $max_iPhone) and (orientation:landscape){
            @content;   /* @mixin 안의 @content는 외부에서 주입 가능 */
        }
    }
    @else if $device == "ipad-l"{
        @media screen and (min-width:$min_Tablet) and (max-width: $max_iPhone) and (orientation:landscape){
            @content;   /* @mixin 안의 @content는 외부에서 주입 가능 */
        }
    }
}

h1{
    color:red;
    @include responsive("iphone"){
        color:blue;       /* @mixin 내부의 @content 부분으로 CSS 주입 */
    }
    @include responsive("iphone-l"){
        font-size: 100px; /* @mixin 내부의 @content 부분으로 CSS 주입 */
    }
}