CSS 의사 요소 선택기에서 앰퍼샌드(&) 이해하기

CSS에서 이와 같은 코드를 접할 때 앰퍼샌드(& ) 문자:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

그러나 이 구문은 CSS의 일부가 아니라는 점에 유의하는 것이 중요합니다. 대신 LESS라는 CSS 전처리기에 속합니다.

LESS를 사용하면 앰퍼샌드 문자를 사용하여 선택기 수정자를 중첩할 수 있습니다. 이를 통해 반복을 방지하여 간결하고 읽기 쉬운 코드를 작성할 수 있습니다. 예를 들면:

.clearfix { 
  &:before {
    content: '';
  }
}

이것은 다음과 같이 컴파일됩니다:

.clearfix:before {
  content: '';
}

앰퍼샌드는 중첩된 선택기가 .clearfix:before로 컴파일되도록 합니다. 앰퍼샌드가 없으면 .clearfix :before로 컴파일되어 잘못된 CSS 선택기가 발생하게 됩니다.

제공한 Twitter Bootstrap 예에서 앰퍼샌드는 의사 요소에 스타일을 적용하는 데 사용됩니다(::before 및 ::after)는 .clearfix 요소의 하위 항목으로 생성됩니다. 이를 통해 이러한 의사 요소를 간결하게 정의하고 CSS 내에서 모듈식 구조를 유지할 수 있습니다.