M

MLOG

한국어

네이티브 CSS에 Sass와 유사한 문법을 도입한 CSS 중첩의 강력한 기능을 알아보세요. 이 새로운 기능이 전 세계 웹 개발자들의 스타일링을 단순화하고, 코드 가독성 및 유지보수성을 향상시키는 방법을 배워보세요.

CSS 중첩: 전 세계 개발자를 위한 네이티브 CSS의 Sass와 유사한 문법

수년간 웹 개발자들은 표준 CSS의 한계를 극복하기 위해 Sass, Less, Stylus와 같은 CSS 전처리기에 의존해 왔습니다. 이러한 전처리기들의 가장 사랑받는 기능 중 하나는 중첩(nesting)으로, CSS 규칙 내에 다른 CSS 규칙을 작성하여 더 직관적이고 조직적인 구조를 만들 수 있게 해줍니다. 이제 CSS 표준의 발전 덕분에, 외부 도구 없이도 강력한 대안을 제공하는 네이티브 CSS 중첩이 마침내 등장했습니다.

CSS 중첩이란 무엇인가요?

CSS 중첩은 CSS 규칙을 다른 CSS 규칙 안에 중첩할 수 있게 해주는 기능입니다. 이는 부모 선택자 내에서 특정 요소와 그 상태를 대상으로 지정할 수 있어 CSS를 더 간결하고 읽기 쉽게 만들어 줍니다. 이는 HTML의 계층적 구조를 모방하여 유지보수성을 향상시키고 중복을 줄입니다. 예를 들어, 내비게이션 메뉴가 있다고 상상해 보세요. 전통적으로 다음과 같이 CSS를 작성할 수 있습니다:


.navbar {
  background-color: #f0f0f0;
  padding: 10px;
}

.navbar a {
  color: #333;
  text-decoration: none;
}

.navbar a:hover {
  color: #007bff;
}

CSS 중첩을 사용하면 더 구조화된 접근 방식으로 동일한 결과를 얻을 수 있습니다:


.navbar {
  background-color: #f0f0f0;
  padding: 10px;

  a {
    color: #333;
    text-decoration: none;

    &:hover {
      color: #007bff;
    }
  }
}

a와 a:hover 규칙이 .navbar 규칙 내에 어떻게 중첩되어 있는지 주목하세요. 이는 이 스타일들이 내비게이션 바 내의 앵커 태그에만 적용된다는 것을 명확하게 나타냅니다. & 기호는 부모 선택자(.navbar)를 참조하며 :hover와 같은 가상 클래스에 매우 중요합니다. 이 접근 방식은 간단한 웹사이트부터 전 세계 사용자들이 이용하는 복잡한 웹 애플리케이션에 이르기까지 다양한 프로젝트에 잘 적용됩니다.

네이티브 CSS 중첩 사용의 이점

네이티브 CSS 중첩의 도입은 웹 개발자들에게 많은 이점을 가져다줍니다:

CSS 중첩 사용 방법

CSS 중첩은 기존 CSS 관례를 기반으로 한 간단한 문법을 사용합니다. 주요 개념을 분석해 보겠습니다:

기본 중첩

어떤 CSS 규칙이든 다른 CSS 규칙 안에 중첩할 수 있습니다. 예를 들어:


.container {
  width: 80%;
  margin: 0 auto;

  h2 {
    font-size: 2em;
    color: #333;
  }
}

이 코드는 .container 요소 내의 모든 h2 요소에 스타일을 적용합니다.

& 선택자 사용하기

& 선택자는 부모 선택자를 나타냅니다. 이는 가상 클래스, 가상 요소 및 조합자에 필수적입니다. 예를 들어:


button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #0056b3;
  }
}

이 예제에서 &:hover는 버튼 위에 마우스를 올렸을 때 스타일을 적용하고, &::after는 버튼 뒤에 가상 요소를 추가합니다. 부모 선택자를 참조하기 위해 "&"를 사용하는 것의 중요성에 주목하세요.

미디어 쿼리와 함께 중첩하기

반응형 디자인을 만들기 위해 CSS 규칙 내에 미디어 쿼리를 중첩할 수도 있습니다:


.card {
  width: 300px;
  margin: 20px;
  border: 1px solid #ccc;

  @media (max-width: 768px) {
    width: 100%;
    margin: 10px 0;
  }
}

이 코드는 화면 너비가 768px 미만일 때 .card 요소의 너비와 마진을 조정합니다. 이는 전 세계 사용자가 사용하는 다양한 화면 크기에 적응하는 웹사이트를 만드는 데 강력한 도구입니다.

조합자와 함께 중첩하기

CSS 조합자(예: >, +, ~)는 중첩된 규칙 내에서 요소 간의 특정 관계를 대상으로 지정하는 데 사용할 수 있습니다:


.article {
  h2 {
    margin-bottom: 10px;
  }

  > p {
    line-height: 1.5;
  }

  + .sidebar {
    margin-top: 20px;
  }
}

이 예제에서 > p는 .article 요소의 직접적인 자식 단락을 대상으로 하고, + .sidebar는 바로 다음에 오는 .sidebar 클래스를 가진 형제 요소를 대상으로 합니다.

브라우저 지원 및 폴리필

2023년 후반기 기준으로, CSS 중첩은 상당한 주목을 받으며 Chrome, Firefox, Safari, Edge를 포함한 대부분의 최신 브라우저에서 지원됩니다. 그러나 대상 고객에 대한 호환성을 보장하기 위해 Can I use와 같은 리소스에서 현재 브라우저 지원 현황을 확인하는 것이 중요합니다. CSS 중첩을 기본적으로 지원하지 않는 구형 브라우저의 경우, PostCSS Nested 플러그인과 같은 폴리필을 사용하여 중첩된 CSS를 호환 가능한 코드로 변환할 수 있습니다.

CSS 중첩을 위한 모범 사례

CSS 중첩은 수많은 장점을 제공하지만, 지나치게 복잡하거나 유지보수하기 어려운 코드를 만들지 않도록 신중하게 사용하는 것이 중요합니다. 다음은 따라야 할 몇 가지 모범 사례입니다:

CSS 중첩 실제 사용 예시

다양한 UI 컴포넌트의 스타일을 지정하는 데 CSS 중첩을 어떻게 사용할 수 있는지 몇 가지 실용적인 예시를 살펴보겠습니다:

버튼


.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &.primary {
    background-color: #007bff;
    color: #fff;

    &:hover {
      background-color: #0056b3;
    }
  }

  &.secondary {
    background-color: #f0f0f0;
    color: #333;

    &:hover {
      background-color: #e0e0e0;
    }
  }
}

이 코드는 일반적인 .button 클래스에 대한 스타일을 정의한 다음 중첩을 사용하여 주 버튼과 보조 버튼에 대한 변형을 만듭니다.

폼


.form-group {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .error-message {
    color: red;
    margin-top: 5px;
  }
}

이 코드는 폼 내의 폼 그룹, 라벨, 입력 필드 및 오류 메시지에 스타일을 적용합니다.

내비게이션 메뉴


.nav {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
    margin-right: 20px;

    a {
      text-decoration: none;
      color: #333;

      &:hover {
        color: #007bff;
      }
    }
  }
}

이 코드는 내비게이션 메뉴, 리스트 아이템 및 메뉴 내의 앵커 태그에 스타일을 적용합니다.

CSS 중첩 vs. CSS 전처리기

CSS 중첩은 수년간 CSS 전처리기에 의존해 온 웹 개발자들에게 획기적인 변화입니다. 전처리기는 변수, 믹스인, 함수를 포함한 다양한 기능을 제공하지만, 네이티브 CSS 중첩은 이러한 기능의 상당 부분을 브라우저 내에서 직접 제공합니다. 다음은 비교입니다:

기능 네이티브 CSS 중첩 CSS 전처리기 (예: Sass)
중첩 예 예
변수 사용자 정의 속성 (CSS 변수) 예
믹스인 아니요 (@property 및 Houdini API로 제한된 기능) 예
함수 아니요 (Houdini API로 제한된 기능) 예
연산자 아니요 예
브라우저 지원 최신 브라우저 컴파일 필요
의존성 없음 외부 도구 필요

보시다시피, 네이티브 CSS 중첩은 기본적인 중첩 요구사항에 대해 전처리기에 대한 강력한 대안을 제공합니다. 전처리기는 여전히 믹스인 및 함수와 같은 고급 기능을 제공하지만, 그 격차는 좁혀지고 있습니다. CSS 사용자 정의 속성(변수) 또한 스타일시트 전반에 걸쳐 값을 재사용할 수 있는 방법을 제공합니다.

CSS 중첩의 미래와 그 너머

CSS 중첩은 CSS 세계에서 일어나는 많은 흥미로운 발전 중 하나일 뿐입니다. CSS가 계속 진화함에 따라, 웹 개발을 단순화하고 코드 품질을 향상시키는 더욱 강력한 기능들을 기대할 수 있습니다. Houdini API와 같은 기술은 더 풍부한 타입 시스템을 갖춘 사용자 정의 속성, 사용자 정의 애니메이션, 사용자 정의 레이아웃 알고리즘을 포함한 고급 스타일링 기능의 길을 열고 있습니다. 이러한 새로운 기술을 수용하면 개발자들은 전 세계 사용자를 위해 더 매력적이고 상호작용적인 웹 경험을 만들 수 있습니다. CSS 워킹 그룹은 언어를 개선하고 웹 개발자들의 요구를 해결하기 위한 새로운 방법을 끊임없이 탐색하고 있습니다.

결론

CSS 중첩은 네이티브 CSS에 있어 중요한 진전이며, Sass와 유사한 문법의 이점을 더 넓은 사용자층에게 제공합니다. 코드 가독성을 높이고 유지보수성을 향상시키며 코드 중복을 줄임으로써, CSS 중첩은 개발자들이 더 깨끗하고 효율적이며 확장 가능한 CSS를 작성할 수 있도록 힘을 실어줍니다. 브라우저 지원이 계속 증가함에 따라, CSS 중첩은 모든 웹 개발자의 무기고에서 필수적인 도구가 될 것입니다. 그러니 CSS 중첩의 힘을 받아들이고 웹 개발 프로젝트에서 새로운 차원의 창의성과 생산성을 발휘해 보세요! 이 새로운 기능은 다양한 배경과 기술 수준을 가진 개발자들이 더 유지보수하기 쉽고 이해하기 쉬운 CSS를 작성할 수 있게 하여, 전 세계적으로 협업을 개선하고 개발 시간을 단축시킬 것입니다. CSS의 미래는 밝으며, CSS 중첩은 이러한 진보를 보여주는 빛나는 예입니다.