HTML에서 스타일이 특정 요소(부모)와 그 하위 요소에만 적용되도록 지정하려면 <style> 태그에 scoped 속성을 사용하면 됩니다. 이 속성이 선언된 스타일은 문서 전체에 영향을 주지 않고, 해당 요소와 그 자식 요소에만 한정적으로 적용됩니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: yellow;
}
</style>
</head>
<body>
<div>
<style scoped>
h2 {
color: grey;
}
</style>
<h2>회색 제목</h2>
</div>
<h2>노란색 제목</h2>
</body>
</html>
위 예제에서 <head> 안의 전역 스타일은 모든 h2 요소를 노란색으로 지정합니다. 반면 <div> 내부에 scoped 속성과 함께 작성된 스타일은 해당 div 요소와 그 안의 h2 요소에만 적용되므로, “회색 제목”은 회색으로, div 바깥에 있는 “노란색 제목”은 노란색으로 표시됩니다.
주의: scoped 속성은 더 이상 지원되지 않습니다
scoped 속성은 과거 HTML5 초안에 포함되었던 기능이지만, 최종 표준에서 제거되었으며 현재 Chrome, Firefox, Edge 등 주요 브라우저에서 지원하지 않습니다. 따라서 실무 프로젝트에서는 사용하지 않는 것이 좋습니다.
현대적인 대안 방법
- 구체적인 선택자 사용: 클래스나 ID 선택자를 조합해 스타일 적용 범위를 명확히 지정합니다. 예:
.container h2 { color: grey; } - Shadow DOM: 웹 컴포넌트 기술을 활용하면 외부 스타일의 영향을 받지 않는 캡슐화된 스타일 스코프를 만들 수 있습니다.
- CSS Modules / CSS-in-JS: React, Vue 등 프레임워크 환경에서는 빌드 도구가 고유한 클래스명을 생성해 스타일 충돌을 방지합니다.
- @scope 규칙: 비교적 최근 도입된 CSS
@scopeat-rule을 사용하면 네이티브 방식으로 스타일 범위를 지정할 수 있습니다(사용 전 브라우저 지원 여부 확인 필요).