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

오늘 사용할 수 있는 강력하고 안정적인 CSS

Adam Argyle

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

이 게시물은 작년에 게시된 모든 프런트엔드 개발자가 2023년에 알아야 할 6가지 CSS 스니펫의 후속편입니다.

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

:has()

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

: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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

수년 동안 프런트엔드 웹 커뮤니티는 매우 인기 있고 강력한 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

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

2023년에 모든 주요 브라우저에서 기본 CSS 중첩을 사용할 수 있게 되었습니다. 중첩을 컴파일하는 빌드 프로세스를 삭제하도록 웹사이트를 업데이트했더니 이제 더 작은 스타일시트를 제공할 수 있습니다. 네, 중첩이 있는 스타일시트는 더 작고 모든 브라우저 개발자 도구는 이를 나타낼 준비가 되어 있습니다.

자세한 내용은 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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source

pretty

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari: 26.

Source

text-wrap: balance가 없으면 개발자와 카피라이터는 <wbr> 요소나 &shy;와 같은 줄바꿈 힌트에 의존해야 합니다. 콘텐츠가 번역되거나, 확대/축소되거나, 어떤 방식으로든 수정되면 이러한 래핑 힌트가 콘텐츠의 새로운 표현에 적합한 위치에 있다는 보장이 없으므로 대부분 소용이 없습니다.

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

컨테이너 쿼리 단위 사용

cqw

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

새로운 container query 단위는 6개입니다.

  1. 인라인 변형 cqi
  2. 너비 변형 cqw
  3. 블록 변형 cqb
  4. 높이 변형 cqh
  5. 길이가 더 짧은 cqmin의 변형
  6. 길이가 더 긴 cqmax의 변형

컨테이너에 대한 상대적 및 내재적 애니메이션 시나리오를 고려해 보세요. 컨테이너 인라인 크기의 100% 인 100cqi를 사용하여 컨테이너에서 완전히 슬라이드되는 하위 요소

@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년에 사용할 수 있는 모든 단위를 검토하는 것이 좋습니다.