CSS Nesting은 스타일을 계층적으로 구성할 수 있도록 도와주는 최신 기능입니다. 이를 활용하면 코드 가독성이 향상되고, 유지보수가 쉬워집니다. 기존의 CSS 구조보다 더 효율적으로 스타일을 관리하는 방법을 살펴보겠습니다.
CSS Nesting이란?
CSS Nesting은 부모 요소 안에서 자식 요소의 스타일을 중첩된 형태로 정의할 수 있는 기능입니다. 기존의 SCSS(SASS) 문법과 유사하지만, 이제는 순수 CSS에서도 네이티브로 지원됩니다.
✅ CSS Nesting의 장점:
- 코드 가독성 증가 → 스타일을 논리적으로 그룹화
- 유지보수 용이 → 중복된 선택자 최소화
- CSS 코드 길이 단축 → 불필요한 코드 제거
📌 기존 CSS 방식 (비효율적인 스타일 작성법)
.card {
background: #f9f9f9;
padding: 20px;
}
.card .title {
font-size: 1.5rem;
font-weight: bold;
}
.card .content {
font-size: 1rem;
color: #333;
}
📌 CSS Nesting 적용 후 (더 깔끔한 코드 구조)
.card {
background: #f9f9f9;
padding: 20px;
& .title {
font-size: 1.5rem;
font-weight: bold;
}
& .content {
font-size: 1rem;
color: #333;
}
}
✔ 차이점:
- .card 내부의 요소를 중첩된 방식으로 스타일링 가능
- 선택자를 반복해서 작성할 필요 없음
- 코드가 더 직관적이고 유지보수하기 쉬움
1. CSS Nesting을 사용할 때의 주요 규칙
CSS Nesting을 올바르게 사용하려면 몇 가지 규칙을 이해하는 것이 중요합니다.
부모 선택자(&)를 명확하게 사용해야 함
부모 요소와 함께 사용될 경우, & 기호를 활용해 연관된 스타일을 명확하게 지정할 수 있습니다.
.button {
background: blue;
color: white;
padding: 10px;
&:hover {
background: darkblue;
}
&:active {
background: navy;
}
}
✔ 이점:
&을 사용하면 기본 선택자를 유지하면서 다양한 상태 스타일을 쉽게 정의 가능- 중복되는 코드 없이 더욱 직관적인 구조 생성 가능
2. 미디어 쿼리와 함께 사용하기
CSS Nesting은 미디어 쿼리(media query) 내부에서도 사용 가능합니다.
📌 기존 CSS 방식
.card {
width: 100%;
}
@media (min-width: 768px) {
.card {
width: 50%;
}
}
📌 CSS Nesting 방식 (더 논리적인 구조)
.card {
width: 100%;
@media (min-width: 768px) {
width: 50%;
}
}
✔ 장점:
- 미디어 쿼리를 관련 스타일 안에서 직접 정의 가능
- 각 요소별로 미디어 쿼리가 적용되므로 가독성이 높아짐
3. 상태 및 가상 요소와 함께 사용하기
&를 활용하면 가상 요소와 상태 변경 스타일도 더욱 간결하게 정의할 수 있습니다.
📌 예제: 가상 요소 및 상태 스타일 적용
.input {
padding: 10px;
border: 1px solid #ccc;
&:focus {
border-color: blue;
}
&::placeholder {
color: gray;
}
}
✔ 효과:
- .input이 포커스될 때 스타일을 변경
- ::placeholder를 사용해 입력 필드의 플레이스홀더 스타일 지정
4. CSS Nesting을 활용한 유지보수성 높은 코드 작성법
CSS Nesting을 활용하면 모듈화된 스타일 시스템을 쉽게 구축할 수 있습니다.
📌 예제: 카드 컴포넌트 스타일
.card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
& .header {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}
& .body {
font-size: 1rem;
color: #555;
}
& .footer {
margin-top: 20px;
text-align: right;
}
}
✔ 이점:
- .card 내부 요소들을 논리적으로 그룹화
- 불필요한 .card .header, .card .body 같은 반복된 선택자 제거
- 유지보수가 쉬운 모듈형 스타일 구조 완성
CSS Nesting을 활용하면 코드 가독성이 좋아지고, 유지보수가 쉬운 스타일링이 가능합니다.
✔ 핵심 정리:
✅ 중복 선택자를 줄여 코드 간결화
✅ 부모 선택자(&)를 사용해 가독성 높은 스타일 구성
✅ 미디어 쿼리와 상태 변화를 직관적으로 정의
✅ 컴포넌트 기반 스타일 작성에 유용
