이 페이지는 Cloud Translation API를 통해 번역되었습니다.

모든 프런트엔드 개발자가 2023년에 알아야 할 6가지 CSS 스니펫

지금 바로 사용할 수 있는 강력하고 안정적인 CSS로, 툴벨트에 추가할 만한 가치가 있습니다.

Adam Argyle

모든 프런트엔드 개발자는 컨테이너 쿼리를 사용하고, 스크롤 스냅 환경을 만들고, 그리드를 사용하여 position: absolute를 피하고, 원형을 빠르게 처리하고, 계단식 레이어를 사용하고, 논리적 속성을 통해 더 적은 수로 더 많은 도달범위를 확보하는 방법을 알아야 합니다. 다음은 각 기대치에 대한 간략한 개요입니다

1. 컨테이너 쿼리

10년 연속 가장 많이 요청된 CSS 기능이 이제 모든 브라우저에서 안정적으로 작동하며 2023년에는 너비 쿼리에 사용할 수 있습니다.

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

브라우저 지원

소스

container

브라우저 지원

소스

2. 스크롤 스냅

잘 구성된 스크롤 환경은 다른 환경과 차별화되는 환경을 제공합니다. 스크롤 스냅은 시스템 스크롤 UX와 일치하면서 의미 있는 중지점을 제공하는 완벽한 방법입니다.

.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;
}

25개 정도의 데모가 포함된 대규모의 멋진 Codepen 컬렉션에서 이 CSS 기능의 잠재력을 자세히 알아보세요.

scroll-snap-type

브라우저 지원

소스

scroll-snap-align

브라우저 지원

소스

scroll-snap-stop

브라우저 지원

소스

overscroll-behavior

브라우저 지원

소스

3. 격자 쌓기

단일 셀 CSS 그리드로 position absolute를 사용하지 마세요. 서로 쌓인 상태가 되면 justify 및 align 속성을 사용하여 위치를 지정합니다.

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

.pile > * {
  grid-area: 1/1;
}

grid

브라우저 지원

소스

4. 빠른 원

CSS에서 원을 만드는 방법은 많지만 이 방법이 가장 간단합니다.

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

aspect-ratio

브라우저 지원

소스

5. @layer로 변형 제어

캐스케이드 레이어를 사용하면 나중에 발견되거나 생성된 대안을 원래 대안 세트와 함께 캐스케이드의 올바른 위치에 삽입하는 데 도움이 됩니다.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

그런 다음 다른 임의의 시점에 로드된 완전히 다른 파일에서 마치 그동안 나머지 버튼과 함께 있었던 것처럼 새 버튼을 버튼 레이어에 추가합니다.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

브라우저 지원

소스

6. 논리적 속성을 사용하여 더 적게 기억하고 더 많은 도달범위 달성

이 새로운 박스 모델 하나를 기억하면 국제 쓰기 모드와 문서 안내의 왼쪽과 오른쪽 패딩이나 여백 변경에 관해 다시 걱정할 필요가 없습니다. 스타일을 실제 속성에서 padding-inline, margin-inline, inset-inline와 같은 논리적 속성으로 조정하면 브라우저에서 조정 작업을 실행합니다.

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

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

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

padding-inline

브라우저 지원

소스

margin-block

브라우저 지원

소스

inset-inline

브라우저 지원

소스