웹 애플리케이션에서 기본 CSS 중첩을 사용하는 방법

CSS 네스팅의 진화: 과거와 현재

과거에는 CSS가 다루기 복잡한 언어였다는 인식이 있었습니다. 이러한 어려움을 해소하기 위해 CSS 전처리기가 등장하여 CSS 작업의 효율성을 높이고, 루프나 믹스인과 같은 추가적인 기능을 제공했습니다. 시간이 흐르면서 CSS 자체도 발전하여, 이전에는 CSS 전처리기를 통해 가능했던 일부 기능들을 내장하게 되었습니다. 그 중 대표적인 예가 바로 "네스팅 스타일 지정"입니다.

계속해서 읽어보세요.

네스팅 스타일링은 개발자가 HTML 구조를 반영하여 CSS 규칙들을 중첩시키는 방식입니다. 이를 통해 HTML 요소와 그에 따른 스타일 간의 관계가 시각적으로 더욱 명확해져 코드가 보다 체계적이고 이해하기 쉬워집니다.

과거의 네스팅 스타일링 방식

Sass, Stylus, Less와 같은 다양한 CSS 전처리기가 네스팅 스타일링을 지원합니다. 이들 전처리기의 구문은 다를 수 있지만, 기본 개념은 동일합니다. 예를 들어, 일반적인 CSS에서 컨테이너 클래스 내부의 모든 h1 요소에 스타일을 적용하려면 다음과 같이 작성합니다:

 
  .container {
    background-color: #f2f2f2;
  }
  .container h1 {
    font-size: 44px;
  }

반면, Less와 같은 CSS 전처리기를 사용하면 아래와 같이 중첩된 스타일을 구현할 수 있습니다:

  .container {
    background-color: #f2f2f2;
    h1 {
      font-size: 44px;
    }
  }

위 코드들은 동일한 결과를 보여주지만, CSS 전처리기를 사용한 방식이 코드의 흐름을 더 명확하게 파악할 수 있도록 해줍니다. 이러한 "계층적 구조"는 CSS 전처리기의 중요한 장점 중 하나였습니다.

네스팅 구조는 깊이에 제한 없이 중첩될 수 있지만, 너무 깊게 중첩하면 코드가 불필요하게 길어질 수 있으므로 주의해야 합니다.

CSS 자체에서 제공하는 네스팅 스타일링

모든 브라우저가 기본적으로 네스팅 스타일을 지원하는 것은 아닙니다. Can I use 웹사이트를 통해 대상 브라우저가 이 기능을 지원하는지 확인하는 것이 좋습니다.

CSS에서 제공하는 기본 네스팅 스타일은 CSS 전처리기와 유사하게 작동합니다. 그러나 중요한 차이점이 하나 있습니다. 아래 코드 예시를 살펴봅시다.

  <div class="container">
    <h1>지구별에서 인사드립니다!</h1>
  </div>
  <style>
    .container {
      background-color: red;
      h1 {
        color: yellow;
      }
    }
  </style>

위 코드에서 `.container` 클래스를 가진 div 요소의 배경색은 빨간색으로, h1 요소의 색상은 노란색으로 지정하고자 합니다. 하지만 브라우저에서 이 코드를 실행해보면 h1 요소에는 스타일이 적용되지 않는 것을 확인할 수 있습니다.

이는 CSS의 네스팅 스타일링이 Less와 같은 CSS 전처리기와는 약간 다르게 작동하기 때문입니다. 즉, 네스팅 구조 안에서 HTML 요소를 직접 참조할 수 없습니다. 이 문제를 해결하려면 앰퍼샌드(&) 기호를 사용해야 합니다. 아래 코드를 참고하세요.

  .container {
    background-color: red;
    & h1 {
      color: yellow;
    }
  }

위 코드에서 앰퍼샌드(&)는 부모 선택자를 참조하는 역할을 합니다. h1 요소 앞에 앰퍼샌드를 붙임으로써 브라우저에게 해당 스타일을 `.container` div의 하위 h1 요소에 적용하라고 지시하는 것입니다. 이제 브라우저에서 코드를 실행하면 h1 요소에 노란색 스타일이 제대로 적용된 것을 확인할 수 있습니다.

앰퍼샌드는 상위 요소를 참조하는 데 사용되므로, 다음과 같이 요소의 의사 클래스나 의사 요소를 대상으로 지정하는 것도 가능합니다:

  .parent1{
    &:hover{
      background-color: red;
    }
    &::before{
      content:"여기는 의사 요소입니다.";
    }
  }

CSS 네스팅 스타일이 도입되기 전에는 브라우저의 폭에 따라 다른 스타일을 적용하려면 다음과 같은 방법을 사용해야 했습니다:

  p {
    color:black;
  }

  @media (min-width:750px) {
    p {
      color:gray;
    }
  }

브라우저는 페이지를 렌더링할 때 브라우저의 너비에 따라 p 요소의 색상을 결정합니다. 너비가 750px를 초과하면 회색을 사용하고, 그렇지 않으면 기본 색상인 검은색을 적용합니다.

물론 위의 방식도 잘 작동하지만, 특히 특정 규칙에 따라 다른 스타일을 적용해야 하는 경우에는 코드가 매우 복잡해질 수 있습니다. 이제 요소의 스타일 블록 내에 미디어 쿼리를 직접 중첩시킬 수 있습니다.

  p {
    color:black;
    @media (min-width:750px) {
      color:gray;
    }
  }

위의 코드는 이전 코드와 동일한 동작을 수행하지만, 훨씬 더 이해하기 쉽습니다. 미디어 쿼리와 상위 요소만 보면 정의된 조건이 충족될 때 브라우저가 스타일을 어떻게 적용하는지 직관적으로 알 수 있습니다.

CSS 네스팅 스타일을 이용한 웹사이트 스타일링

이제 간단한 웹사이트를 만들고 CSS의 네스팅 스타일링 기능을 활용하여 지금까지 배운 내용을 실습해 보겠습니다. 먼저, 원하는 이름으로 폴더를 만들고, 그 안에 index.htm 파일과 style.css 파일을 생성하세요.

index.htm 파일에 다음 코드를 추가하세요:

  <div class="container">
    <div class="article">
      <h1>로렘 입숨 돌로르 시트 아멧 콘섹테투르 아디피싱 엘리트.</h1>
      <div class="meta-data">
        <span class="author">김개발</span>
        <span class="time">3시간 전</span>
      </div>
      <div>
        로렘 입숨 돌로르, 시트 아멧 콘섹테투르 아디피싱 엘리트. 일로 웃
        콰시 힉 신트 돌로룸 사피엔테 마그니 라티오네? 수스시피트 콤모디 아드,
        아스페리오레스 노스트룸 나투스 아페리암 엣 알리아스, 오피시스 돌로룸 입사 베로
        미니마 콘세쿼투르 레쿠산대 콰시 알리퀴드 퀴부스담 두시무스 에아케!
        엑셉투리 볼럽타스 에베니엣 네모, 에아룸 드리블로스, 솔루타 아르키텍토
        이스테 레펠라트 아우템 아스페르나투르 베아테 웃 퀴스 오디오 에스트 볼럽타테스 선트
        퀴 레룸 블란디티스 미누스! 레룸 라보레 노비스, 오딧 쿼드 아멧 돌로룸
        퀘 라우단티움.
      </div>
    </div>
    <div class="sidebar">
      <h2>인기 기사</h2>
      <h4>로렘 입숨, 돌로르 시트 아멧 콘섹테투르 아디피싱 엘리트. 푸지트, 이우스토 입숨!</h4>
    </div>
  </div>

위 코드는 간단한 뉴스 웹사이트의 마크업을 나타냅니다. 이제 style.css 파일을 열고 다음 코드를 추가합니다.

  .container {
    display: flex;
    gap: 25px;
  
    @media(max-width:750px) {
      flex-direction: column;
    }
    
    .article{
      width:90%;
    }
    
    & div:nth-child(3) {
      text-align: justify;
    }
    
    & span {
      color: rgb(67, 66, 66);
    
      &:nth-child(1)::before {
        font-style: italic;
        content: "작성자: ";
      }
      
      &:nth-child(2) {
        font-style: italic;
        &::before {
          content: " ~ ";
        }
      }
    }
    
    .meta-data {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: solid 1px;
    }
  }

위의 코드에서는 CSS 네스팅 스타일을 사용하여 웹사이트 전체의 스타일을 지정하고 있습니다. `.container` 선택자는 최상위 깊이를 나타내며, 앰퍼샌드(&) 기호를 사용하여 이 선택자를 참조할 수 있습니다. 브라우저에서 코드를 실행하면 다음과 같은 결과가 나타납니다.

CSS 전처리기가 여전히 필요할까?

CSS 자체에서 네스팅 스타일을 지원하게 되면서 CSS 전처리기가 더 이상 필요하지 않다고 생각할 수도 있습니다. 그러나 CSS 전처리기는 네스팅 스타일 외에도 루프, 믹스인, 함수 등 다양한 기능을 제공한다는 점을 간과해서는 안됩니다. 결국 CSS 전처리기의 사용 여부는 특정 프로젝트의 요구 사항과 개인적인 선호도에 따라 결정됩니다.