알아두면 무조건 이득!최신 CSS 기능 5가지

 

<원본영상 - 노마드코더 알아두면 무조건 이득!최신 CSS 기능 5가지>
https://www.youtube.com/watch?v=lkTpOHv1Ros

 

 

- Demo Scroll: https://codepen.io/serranoarevalo/pen...

- Demo Sticky: https://codepen.io/serranoarevalo/pen...

 

영상에서는 기존에 Javascript 를 통해서만 가능했던 기능들을 CSS 만으로 구현이 가능해진 6가지 CSS 기능에 대해 설명해주고 있습니다. 영상만 보고 넘어가면 금방기억이 안나기에 아래와 같이 정리했습니다.

1. @supports // 브라우저 호환성을 검사해서 선별적으로 적용할 수 있도록 해줌

 

2. CSS Scroll Snap

<style>
#container {
width: 500px;
height: 500px;
overflow: auto;
/* ADD THIS TO THE PARENT */
scroll-snap-type: y mandatory;
}

.item {
/* ADD THIS TO THE CHILD */
scroll-snap-align: center;
display: inline-block;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
font-size: 38px;
align-items: center;
}
</style>

<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>

3. :is Pseudo Selector - CSS Selector 를 더욱 단순하게 적용

 

/* Before */
header button,
nav button,
form button {
background-color: tomato;
}

/* After */
:is(header, nav, form) button {
background-color: tomato;
}

4. Flex Box Gap - 기존 div container 에 빈 공간을 확보하기위해 margin 을 사용했는데, 이젠 gap 을 사용하면 됨

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

5. aspect ratio: 정해진 비율로 보여주고 싶을 때 (테스트가 필요함)

img {
	aspect-ratio: 16 / 9;
}

6. posotion:stickey - 사용자의 스크롤을 따라다니는 Header를 만들 수 있음...

<style>
section {
  background-color:beige;
  height:70%;   /* 필수 */
  width:100%;
  margin:35px 0px;

  display: flex;
  justify-content:flex-end;
}
aside{
  background-color:teal;
  height:50px;
  width:100%;
  position:stickey; /* 필수 */
  top:0px;
  text-align: center;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
}
</style>
<div id="container">
  <section>
    <aside>Header 1 </aside>
  </section>
  <section>
    <aside>Header 2</aside>
  </section>
  <section>
    <aside>Header 3</aside>
  </section>
</div>