1. @supports

2. Snap Scroll

    <h3>Scroll down</h3>
    <div id="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 {
  width: 500px;
  height: 500px;
  border: 1px solid blue;
  overflow: scroll;
  **/* Add this to the parent */
  scroll-snap-type: y mandatory;**
}
.item {
  /* Add this to the child */
  scroll-snap-align: center;
  display: inline-block;
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 18px;
  align-items: center;
  **justify-content: center;
  border: 1px solid red;**
}

3. is Pseudo Selector

header button,
nav button,
form button {
	background-color: red;
}

에서 :is 를 사용한다면

:is(header,nav,form) button {
	background-color: red;
}

만약 요소가 header거나, nav거나, form 이면
button을 선택하고 배경색은 red로 변경한다

4. flex box gap

flex container에 gap property를 지정해주면 됨
(예전엔 margin을 사용했음.)

div{
	display: flex;
    gap: 10px 5px;
    /*10px은 row-gap , 5px은 column-gap*/
}

5. aspect ratio

웹사이트에서 이미지나 영상을 정해진 비율을 유지할때 유용.

igm{
	aspect-ratio : 16/9;
}

6. position: sticky

원하는 요소에 position: sticky를 지정해주고
정의된 높이가 있는 컨테이너 안에 요소를 넣어주면 됨.