내가 이해한) 프론트엔드 개발자가 2023년에 알아야할 6가지 css 스니펫(in web.dev)

원문 )
https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/

순서

• A container query
• Scroll snap
• Grid pile
• Quick circle
• Control variants with @layer
• Memorize less and reach more with logical properties

A container query

@media (max-width : 30em){
/* stylesheet */
}
@container (width > 15em){
/* stylesheet */
}

미디어 쿼리 말고 컨테이너 쿼리가 등장했다. (얜 잘 모르겠다)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Scroll snap

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

스크롤 후 마우스에서 손을 떼었을 때 어디서 멈추는지 정해주는 친구가 등장했다.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align
scroll-snap-type 과 scroll-snap-stop 그리고 scroll-snap-align 이다.

간단하게 보면
scroll-snap-type
무조건 정해진 범위만큼 넘어가게 할 것인지 혹은 좀 유하게 스크롤 범위를 잡아줄 것인지 정해준다.
scroll-snap-stop(터치패드가 있는 디바이스에서만 효과)
normal과 always가 있는데 normal일 때는 스크롤시 세게 스크롤하면 여러페이지가 한번에 넘어가지만 always의 경우엔 무조건 한 페이지씩만 넘어가게 해준다.
scroll-snap-align
스크롤시 중심을 어디에 두고 스크롤 할지 정해준다. start의 경우엔 스크롤이 시작되는 곳에 위치중심이 center은 중간에 end는 스크롤이 끝나는 곳에 위치중심이 있게 설정할 수 있다.

Grid pile

얘도 모루겠다...

Quick circle

CSS로 동그라미를 그릴수 있는 가장 간단한 방법의 등장!!

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
aspect-ratio는 기본 가로세로 비율을 정해준다. 위예시에서는 1로 지정했으므로 원형이 나오게 되는 것이다

Control variants with layer

얘도 모루겠다...

Memorize less and reach more with logical properties

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

얘는 보니까 react native StyleSheet에 있는 paddingVertical , paddingHorizontal과 같은 역할을 한다.

padding : 10px 0 === padding-inline: 10px
padding : 0 10px === padding-block: 10px
margin : 10px 0 === margin-inline: 10px
margin : 0 10px === margin-block: 10px

inset-inline 은 바로 바깥 박스를 기준으로 어떻게 자리잡을지 보여준다.
https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline

반은 못알아들었네...
그래도 이중에 scroll snap이나 마지막에 나온 padding-inline등의 간단한 css는 나도 프로젝트 적용할때 사용해 볼 수 있을것 같다.