이 페이지는 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

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

container

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

이 CSS 기능이 가진 잠재력에 대해 자세히 알아보려면 Codepen 컬렉션은 약 25개의 데모를 제공합니다.

scroll-snap-type

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

scroll-snap-align

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

scroll-snap-stop

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

overscroll-behavior

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

3. 격자 쌓기

단일 셀 CSS 그리드에서는 절대 위치를 사용하지 않습니다. 이미지나 동영상이 양쪽 맞춤, 양쪽 맞춤 사용 속성을 정렬하여 배치합니다.

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

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

grid

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

4. 빠른 원

CSS에서 원을 만드는 방법에는 여러 가지가 있지만, 있습니다.

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

aspect-ratio

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

5. @layer를 사용한 변형 제어

Cascade 레이어 대안 삽입을 지원할 수 있습니다 올바른 위치로 이동시키는 것을 볼 수 있습니다. 중복되지 않습니다.

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

그런 다음 임의의 시간에 로드되는 완전히 다른 파일에 마치 새 변형이 다른 변형과 함께 있는 것처럼 버튼 레이어에 할 수 있습니다.

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

@layer

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

6. 기억은 줄이고 논리적인 속성을 통해 더 많이 도달

이 새로운 박스 모델 1개 기억 걱정할 필요가 없기 때문에 국제 문자의 왼쪽 및 오른쪽 패딩 또는 여백 변경 모드와 문서 경로를 다시 클릭하세요. 물리적 속성부터 논리적 속성인 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

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

margin-block

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

inset-inline

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스