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

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

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

Adam Argyle

모든 프런트엔드 개발자는 :has()가 '상위 선택자' 이상의 의미를 지닌다는 점, subgrid의 방법과 이유, 내장 CSS 문법으로 중첩하는 방법, 브라우저가 광고 제목 텍스트 줄바꿈의 균형을 맞추도록 하는 방법, 컨테이너 쿼리 단위를 사용하는 방법을 알아야 합니다.

이 게시물은 지난해의 모든 프런트엔드 개발자가 2023년에 알아야 할 6가지 CSS 스니펫의 연장선입니다.

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

브라우저 지원

소스

:has()가 2023년 말에 모든 주요 브라우저에 출시되었습니다. 이 새로운 선택기는 작고 무해해 보이지만 게임, 반응성, 콘텐츠 인식 레이아웃, 스마트 구성요소 등 다양한 사용 사례를 활용할 수 있다는 점에 놀라실 것입니다. Jhey가 이 도움말에서 자세히 살펴본 다른 사용 사례도 많습니다.

이미지와 자막이 있는 패널 4개가 표시되어 있습니다.
각 이미지는 점점 더 많은 두뇌 활동이 일어나고 있는 뇌를 보여줍니다. 첫 번째 패널에는 :has()라고 표시되어 있고 두 번째 패널에는 상위 선택기로 figure:has(caption)이라고 표시되어 있습니다.
세 번째 패널에 수량 선택기로 .layout:has(> :nth-child(5))가 표시됩니다.
네 번째 패널에 html:has(#checked) .new-subject가 조건부 제목 변경 선택기로 표시됩니다.

다음은 :has()를 상위 선택기로 사용하는 몇 가지 예입니다. 일반적으로 선택기의 주체가 끝에 있기 때문에 이 이름이 지정되었습니다. 예를 들어 ul li에서 li이 주체이고 스타일을 가져옵니다. :has()를 사용하면 선택기 시작 부분의 요소가 주제가 될 수 있습니다. 다음 예에서 .icon 클래스의 요소가 내부에 있으면 버튼에 간격이 있습니다. 카드 내에 이미지가 있으면 방향이 변경됩니다.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

오랫동안 원했던 선택자는 항목 수를 기반으로 레이아웃을 변경하는 것입니다. 이제 :has()를 사용하면 하위 요소 수를 쿼리하는 동안 컨테이너를 주제로 유지할 수 있으므로 이 작업이 가능합니다.

main:has(> :nth-child(5)) {…}

다른 상위 수준 예는 페이지의 특정 체크박스가 사용 설정되면 전체 문서에 설정된 스타일을 변경하는 것입니다.

html:has(#dark-mode:checked) {…}

이는 선택자의 주제를 변경하지 않는 간단한 사용 사례입니다. 이와 같은 예시만 보면 :has()가 상위 선택자로 제한된다고 생각할 수 있습니다. 하지만 다음 예시를 고려해 보세요. 이러한 선택자는 공통 조상을 기반으로 항목을 확인한 다음 페이지 내 더 깊은 위치에 있는 하위 요소로 선택자 대상을 전환합니다.

입력 중 하나라도 잘못된 경우 양식 오류 요소를 표시합니다.

form:has(:user-invalid) .error {
  display: block;
}

사이드바의 클래스가 .--is-open인 경우 기본 콘텐츠 영역을 슬라이드 아웃합니다.

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

다음은 :has()를 상위 선택기로 사용하고, 수량 쿼리와 함께 :has()를 사용하고, 컨테이너 쿼리를 사용하여 세로 모드 또는 가로 모드 방향으로 1~12개의 요소를 우아하게 표시할 수 있는 그리드 레이아웃을 만드는 재미있는 데모입니다.

Codepen에서 사용해 보기

하위 그리드 만들기

subgrid

브라우저 지원

소스

수년 동안 프런트엔드 웹 커뮤니티는 대중적이고 강력한 CSS 그리드 레이아웃 엔진을 완성하는 데 도움이 되는 하위 그리드를 요청해 왔습니다. 이제 세 가지 주요 엔진에서 모두 사용할 수 있습니다.

개요를 보려면 여기에서 하위 그리드에 대해 자세히 알아보세요.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

CSS 방식으로 중첩

nesting

브라우저 지원

소스

2023년부터 모든 주요 브라우저에서 내장 CSS 중첩을 사용할 수 있게 되었습니다. 중첩을 컴파일하는 빌드 프로세스를 삭제하도록 웹사이트를 업데이트했으며 이제 더 작은 스타일시트를 제공합니다. 예. 중첩된 스타일시트는 더 작으며 모든 브라우저 DevTools에서 이를 나타낼 준비가 되었습니다.

CSS 중첩 문법에서 모든 세부정보를 확인할 수 있습니다. 다음 코드 예는 구문 예를 보여줍니다.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

브라우저에서 광고 제목 균형 맞추기

balance

브라우저 지원

소스

pretty

브라우저 지원

소스

text-wrap: balance가 없으면 개발자와 광고 문구 작성자는 <wbr> 요소나 와 같은 줄바꿈 힌트를 사용해야 합니다. 콘텐츠가 번역되거나 확대/축소되거나 어떤 식으로든 수정되는 즉시 이러한 줄바꿈 힌트가 콘텐츠의 새 프레젠테이션에 적절한 위치에 있을 거라는 보장은 없습니다.

균형 잡힌 텍스트 줄바꿈을 사용하면 이 작업을 브라우저에 맡길 수 있습니다. 다음 Codepen에서 비교를 확인할 수 있습니다.

컨테이너 쿼리 단위 사용

cqw

브라우저 지원

소스

작년 게시물에서는 모든 프런트엔드 개발자가 컨테이너 쿼리를 작성하는 방법을 알아야 한다고 제안했습니다. 아직 배워 보지 않았다면 2024년을 시작으로 컨테이너 쿼리 단위도 확인해 보세요. 개요를 보려면 2021년에 Ahmad Shadeed가 작성한 컨테이너 쿼리 단위에 관한 유용한 도움말을 참고하세요.

새로운 컨테이너 쿼리 단위는 6개입니다.

인라인 변형 cqi
너비 변형 cqw.
블록 변형 cqb
높이 변형 cqh
cqmin 중 더 작은 길이의 대안입니다.
두 길이 중 더 큰 cqmax의 변형입니다.

컨테이너에 대한 상대 및 고유 애니메이션 시나리오를 생각해 보세요. 100cqi(컨테이너 인라인 크기의 100%)를 사용하여 컨테이너에서 완전히 슬라이드 아웃되는 하위 요소입니다.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

다음은 컨테이너 반응형 서체가 있는 카드와 컨테이너의 방향에 맞게 조정되어 방향이 가로 모드인 경우 크기가 절반이 되는 이미지입니다.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

이러한 단위를 처음 사용하는 경우 2024년에 사용할 수 있는 모든 단위를 검토하는 것이 좋습니다.