11 ~ 12일차 CSS관련 추가 내용

변승훈·2022년 4월 13일
CSS
0

KDT 핀테크 프론트엔드 개발자 2기 배운 내용

목록 보기
12/37

※ 코로나 확진 관계로 몸 상태가 좋지 않아 업로드가 늦었습니다..

1. Animation

Animation: animation 속성들을 통해서 animation 동작을 제어하는 속성이다.(controller)
@keyframes규칙으로 만들어 놓은 animation 프레임을 animation속성으로 제어를 하여 트는 것(보여주는 것)이다.
CSS는 전체로 평가되기 때문에 animation frame을 밑에 작성을 한다.

<!--index.html-->
 <div class="container">
    <img src="http://www.gstatic.com/webp/gallery/4.jpg" alt="" height="300" />
    <div class="filter"></div>
 </div>
  img {
    display: block;
  }
  .container {
    width: min-content;
    background-color: royalblue;
    perspective: 600px;
  }
  .container img {
    transition-duration: 1s;
    /* Animation */
    /* animation-name: rolling;
    animation-duration: 2s;
    animation-timing-function: ㅣlinear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-fill-mode: none;
    animation-play-state: running; */
    animation: rolling 1s linear 2 alternate-reverse ;
  }
  .container:hover img {
    /* transform: rotateY(45deg); */
    animation-play-state: paused;
  }

  @keyframes rolling {
      0% {
          transform: translateX(0);
      }
      23% {
      }
      100% {
          transform: translateX(100px);
      }
  }

※그림 출처 : HEROPY

  1. animation-name: animation의 이름, 위의 예시를 보면 @keyframes의 이름을 rolling으로 부여했는데 이것이 이름이다.
    기본 값 : none / ex) rolling, hello...마음대로 작성

  2. animation-duration: animation의 지속 시간
    기본 값 : 0s / ex) 1s, 2s...

  3. animation-timing-function: animation의 타이밍(Easing) 함수를 지정
    기본 값 : ease / ex) linear ...

  4. animation-delay: animation의 지연 시간
    기본 값 : 0s / ex) 1s, 2s...

  5. animation-iteration-count: animation의 반복 횟수
    기본 값 : 1 / ex) 2, 4, infinite(무한 번 반복)

  6. animation-direction: animation 방향
    기본 값 : normal / ex) reverse(반대), alternate(왕복운동), alternate-reverse(반대로 왕복운동)

  7. animation-fill-mode: 원래 있었던 요소에서 animation 동작 이후 원래대로 돌아감
    기본 값 : none, 기존 위치에서 animation 처리 후 다시 기존 위치로 가서 마무리
    기존 위치: 1, 시작 위치: 2, 끝 위치: 3
    => 1 -> 2 -> 3 -> 1
    ex)
    forwards: 기존 위치에서 animation 처리 후 animation 끝 위치에서 마무리
    => 1 -> 2 -> 3
    backwards: 시작 위치에서 animation 처리 후 기존 위치로 돌아감
    => 2 -> 3 -> 1
    both : 시작위치에서 animation 처리 후 끝 위치에서 마물
    => 1 -> 2

  8. animation-play-state: animation이 동작하고 있는 상태
    기본 값 : running / ex) pasued(정지)

단축 속성으로 사용 => animation: rolling 1s linear 2 alternative-reverse running;

2. Multi Columns (다단)

<!--index.html-->

<div class="container">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ex, et nihil, quia quaerat beatae ipsa soluta nostrum similique, quae unde quasi magni laboriosam? Veritatis tempora error voluptatem eos fugit!
  </div>
  body {
    padding: 30px;
  }
  .container {
    padding: 20px;
    border: 4px solid;
    column-width: 100px;
    column-count: 2;
    /* 단의 간격, 기본값: normal(1em:자신의 폰트 크기)*/
    column-gap: 30px;
    /* border와 비슷한 개념, 선의두께, 종류, 색상 */
    column-rule: 4px solid;
    /* 구분 선까지 색이 바뀜 */
    color: blue;
    /* 단축속성이용 :
      columns: 100px 2;
    */
  }

위의 예시 코드와 함께 설명을 참고하자

  1. column-width : 단의 가로 너비

  2. column-count : 단의 개수

  3. column-gap : 단의 간격, 기본 값 : normal(1em, 자신의 폰트 크기)

  4. column-rule : border와 비슷하게 사용하면 된다. 선의 두께, 종류, 색상

3. Filter

<!-- index.html -->
<div class="container">
    <img src="http://www.gstatic.com/webp/gallery/4.jpg" alt="" height="300" />
    <div class="filter"></div>
</div>
  
 img {
  /* img가 inline 요소 이기때문에 border를 사용할 경우 빈 여백이 나온다
  이를 해결하기 위해 block을 선언해준다. */
  display: block;
}
.container {
  border: 4px solid;
  /* 밑의 세 속성을 사용하게 되면 가로가 최대한 작아지려 한다. */
  /* position: fixed; */
  /* position: absolute; */
  width: min-content;
/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(120%);
filter: drop-shadow(10px 20px 0 rgb(0, 0, 0));
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(100%);

/* 다중 값 */
filter: contrast(175%) brightness(3%); 

/* 필터 없음 */
filter: none;

/* 전역 값 */
 filter: inherit;
filter: initial;
filter: unset; 
}

/* backdrop-filter : 요소의 뒷 배경을 filter처리 하는 방법 */
.container .filter {
  width: 200px;
  height: 100px;
  border: 4px solid;
  position: absolute;
  top: 50px;
  left: 100px;
  backdrop-filter: blur(3px);
}

위의 코드를 예시로 참고하여 하나 씩 주석 처리를 하여 상태를 확인해보자!

  1. filter: blur();
    ( )안에 px단위를 넣어 사용한다. 흐림의 정도

  2. filter: grayscale();
    ( )안에 %단위를 넣어 사용한다. 회색으로 바뀌게 하는 용도

  3. filter: brightness(1);
    ( )안에 숫자를 넣어 사용한다. 밝기의 정도를 조절하는데에 사용하며 기본 값은 1이다.

  4. filter: contrast(100%);
    ( )안에 %단위를 넣어 사용한다. 대비를 조절하는데에 사용하며 기본 값은 100%이다.

  5. filter: drop-shadow();
    ( )안에 "x축 y축 blur 색상"을 입력하여 사용한다. 그림자 효과

  6. filter: hue-rotate();
    ( )안에 deg단위를 넣어 사용한다. 아래의 그림에서 각도로 색상을 바꿀 수 있다.

  7. filter: invert();
    이미지의 색을 반전 시킬 때 사용한다.

  8. filter: opacity();
    ( )안에 0~1사이의 숫자를 넣어 사용한다. 투명도

  9. filter: saturate();
    ( )안에 %단위를 넣어 사용한다. 채도

  10. filter: sepia();
    ( )안에 %단위를 넣어 사용한다. 오래된 사진 느낌을 줄 때 사용(어두운 갈색)

  11. filter: contrast(175%) brightness(3%);
    filter를 다중 값으로 사용 할 수 있다.

  12. filter: none;
    필터가 없다.

  13. backdrop-filter: blur();
    ( )안에 px단위를 넣어 사용한다. 요소의 뒷 배경을 filter(blur) 처리를 한다.

4. Grid

Grid는 CSS Flex와 같이 Container와 Item이라는 두 가지 개념으로 구분되어 있다.
Container는 Items를 감싸는 부모 요소이며, 그 안에 각 Item을 배치할 수 있다.

기본 예시 및 설명

<!--index.html-->
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8<ㅇ]/div>
  </div>
.container {
  border: 4px solid;
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
  grid-template-columns: repeat(3 , 1fr);
  /* grid-template-rows: 100px 100px 200px; */
  grid-template-rows: repeat(3, 100px);

  grid-auto-rows: 100px;

  /* 1번 예시 */
  /* grid-auto-flow: row dense; */

  gap: 10px 20px; 
}
.item {
  border: 1px solid;
  background-color: #FFF;
}
.item:nth-child(2) {
  /* 1번 예시  span n : n개로 확장 */
  /* grid-column: span 2;
  grid-row: span 2; */

  /* 1번 예시 */
  /* grid-column: span 3; */

  /* 2번 예시 그리드 구조 내 배치*/
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  z-index: 0;
}
  /* 1번 예시 */
/* .item:nth-child(4) {
  grid-column: span 2;
} */

  /* 2번 예시 그리드 구조 내 배치*/
.item:nth-child(7) {
  /* item이 나중에 쌓일수록 위에 배치가 된다. */
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
  /* 2번 예시 order : 순서 정하기 */
.item:nth-child(6){
  order : -1;
}

현재 2번 예시가 메인이며 1번 예시와 2번 예시라 적혀있는 부분에 주석을 풀고 실행해 보면 된다.

  1. 기본 개념
  • template : 직접 지정한다.
  • fr : 사용 가능한 공간에 대한 비율을 의미한다.
  • row : 가로, 행 이라고 한다.
  • column : 세로, 열 이라고 한다.

  1. repeat() 함수 : 행/열의 크기 정의를 반복한다.

  2. grid-template-columns : 열의 개수 + 너비를 지정

  3. grid-template-rows : 행의 개수 + 너비를 지정

  4. gap : 각 행과 행, 열과 영 사이의 간격을 지정

  5. span n : n개로 확장

  6. grid-auto-rows : px => item이 넘칠 경우 auto를 통하여 제어 가능하다. 넘치면 입력한 수치로 맞춰지게 된다. item이 넘쳐서 밀린것 처럼 보이는 것은 overflow-hidden이 아니다!

  7. grid-auto-flow: row => 빈공간을 빽빽하게 채운다.
    row: 기본 값, 수평으로 쌓아라, 생략 가능
    column: 수직으로 쌓아라, ★생략 불가능
    dense: 빽빽하게 채워라

  8. grid-row, grid-column
    grid-row : grid-row-start와 grid-row-end의 단축 속성이다. 각 속성을 "/"로 구분한다.
    grid-column : grid-column-start와 grid-column-end의 단축 속성이다. 각 속성을 "/"로 구분한다.
    ★ "/" 를 사용한 이동 방법 :
    코드를 실행시키고 개발자 도구에 들어가서 grid 영역을 찍어서 보면

위와 같이 gird를 누를 버튼이 나오게 된다. 누르면 아래의 그림처럼 숫자와 영역에 빗금 처리가 된다.


위의 그림에 있는 숫자들은 각 행과 열의 갯수를 의미한다. 원하는 cell의 위치를 해당 숫자를 보고 배치를 진행하면 된다.
예시로 grid-column: 3 / 4 이면 3열과 4열의 사이에 배치를, grid-row : 2 / 4 이면 2행과 4행 사이에 배치를 하게 된다. 위의 2번 예시로 실습하며 확인해 보자!

  1. z-index : grid안에 item들이 중첩되어 있을 때 z-index의 숫자를 통하여 위치를 조절할 수 있다. 0은 기본 값이 아니다!

area를 이용한 예시

다음과 같은 grid를 만드는 예시이다. 총 두 가지 방법으로 진행했으며 아래에 코드를 첨부하였다.

<!--index.html-->
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
.container {
  width: 500px;
  border: 4px solid;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 100px 200px 100px;
  /* 2. areas 이용 : 부여된 이름을 이용 */
  grid-template-areas: 
    "header header" 
    "main aside"
    "footer footer";
}
.item {
  border: 1px solid;
}
/* 1. 그냥 하기 */
/* .item:nth-child(1) {
  grid-column: span 2;
}
.item:nth-child(4) {
  grid-column: span 2;
} */

/* 2. area 이용 : 이름 부여 */
.item:nth-child(1) {
  grid-area: header;
}
.item:nth-child(2) {
  grid-area: main;
}
.item:nth-child(3) {
  grid-area: aside;
}
.item:nth-child(4) {
  grid-area: footer;
}

1번 방법은 span을 이용하여 간단하게 만드는 방법이다.
2번 방법은 area를 이용한 예시이다.
grid-template-columns에 2fr, 1fr을 기준으로 하여 해당 위치에 해당하는 이름을 사용하여 배치를 한 것이다.
아래에 그림으로 표현을 해 놓았다.

Grid Function

  1. repeat() : 행/열의 크기 정의를 반복한다. '반복되는 횟수'와 '행/열의 크기 정의'를 인수로 사용한다.
    grid-template-rows와 grid-template-columns에서 사용한다.
    ex)grid-template-rows: repeat(3, 100px);

  2. minmax() : 행/열의 '최소/최대 크기'를 정의한다. 첫번 째 인수는 '최솟값' 두번 째 인수는 '최대값'이다.
    grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용한다.
    min-width, max-width 속성을 동시에 지정하는 것과 유사하다. 가변을 보장한다.
    ex) grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);

  3. fit-content() : 행/열의 크기를 grid item이 포함하는 내용 크기에 맞춘다. '내용의 최대 크기'를 인수로 사용한다.
    minmax(auto, max-content)와 유사하다.
    ex) grid-template-columns: fit-content(300px) fit-content(300px);

  4. max-content : 그리드 아이템이 포함하는 내용의 최대 크기를 의미한다.
    ex) grid-template-columns: max-content 1fr;

  5. auto-fill, auto-fit : 행/열의 개수를 grid container및 행/열 크기에 맞게 자동으로 조정한다.
    repeat() 함수와 같이 사용하며, 행/열과 item 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용하다.(반응형 그리드)
    auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작한다.
    ex) container의 크기가 500px -> 400px -> 300px
    grid-template-columns: repeat(4, minmax(120px, 1fr)); 사용 시 item의 최대 길이가 480px이므로 container의 크기가 작아지면서 item들이 넘치게 된다.
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    위와 똑같은 상황일 때 최적화가 되어 container크기에 맞게 item의 개수를 자동 조절한다.(3개, 2개...)

profile
변승훈
잘 할 수 있는 개발자가 되기 위하여
이전 포스트

10일차 JavaScript 맛보기

다음 포스트

13~14일차 CSS마지막 추가내용 + Node.js

0개의 댓글