Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

모든 프런트엔드 개발자가 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

Browser Support

Source

container

Browser Support

Source

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 기능의 잠재력에 대해 자세히 알아보려면 데모가 25개 정도 포함된 크고 영감을 주는 CodePen 컬렉션을 참고하세요.

scroll-snap-type

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. 그리드 더미

단일 셀 CSS 그리드에서 절대 위치를 사용하지 마세요. 서로 쌓이면 justify 및 align 속성을 사용하여 배치합니다.

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

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

grid

Browser Support

Source

4. 빠른 원

CSS로 원을 만드는 방법은 많지만 이 방법이 가장 최소한의 방법입니다.

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

aspect-ratio

Browser Support

Source

5. @layer로 변형 제어

캐스케이드 레이어를 사용하면 나중에 발견되거나 생성된 변형을 삽입하여 원래 변형 세트와 함께 캐스케이드의 올바른 위치에 배치할 수 있습니다.

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

그런 다음 다른 임의의 시간에 로드된 완전히 다른 파일에서 버튼 레이어에 새 변형을 추가합니다. 마치 이 변형이 처음부터 다른 변형과 함께 있었던 것처럼 말입니다.

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

@layer

Browser Support

Source

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

Browser Support

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source

모든 프런트엔드 개발자가 2023년에 알아야 할 6가지 CSS 스니펫 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

1. 컨테이너 쿼리

2. 스크롤 스냅

3. 그리드 더미

4. 빠른 원

5. @layer로 변형 제어

6. 논리적 속성을 사용하여 더 적게 암기하고 더 많은 곳에 도달하세요

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