CSS 스코프(scope), 스타일이 영향을 미치는 범위

CSS에서 스코프(scope)는 스타일이 영향을 미치는 범위를 의미해요. 즉, 작성한 CSS가 어느 요소들까지 적용되는지를 결정하는 개념이에요.

스코프 (scope) 란?

스코프(scope)의 어원을 살펴보면,

고대에는 활을 쏠 때 조준하는 목표 지점이나 눈으로 관찰 할 수 있는 범위를 뜻했어요. 이후 현대 영어에서는 범위, 영향권, 적용 영역이라는 의미로 확장되어 사용되고 있어요.

이러한 의미는 CSS와 프로그래밍에서도 그대로 이어져서 프로그래밍에서의 scope는 코드가 영양을 미치는 범위, 변수가 보이는 범위, 스타일이 적용되는 범위를 가리켜요.

따라서 스코프라는 단어의 본래 의미인 ‘보이는 범위, 영향을 미치는 범위’라고 이해하면 CSS와 프로그래밍에서의 scope 개념도 훨씬 쉽게 이해할 수 있어요.

Copy to Clipboard
Syntax Highlighterp{
  color: red;
}

일반 css는 기본적으로 전역 스코프에요. 위의 예시처럼 쓰면 페이지 안의 모든 태그가 빨간색이 됩니다. CSS는 기본적으로 ‘문서 전체에서 선택자에 맞으면 전부 적용’이라는 방식이기때문이에요.

css

Copy to Clipboard
Syntax Highlighter.card p {
  color: pink;
}

html

Copy to Clipboard
Syntax Highlighter<div class="card">
	<p>카드 안</p>
</div>

<p>카드 밖</p>

적용 화면

카드 안

카드 밖

이렇게 되면 .card 안에 있는 p에만 분홍색이 적용돼요. 즉 스코프가 .card 내부로 제한 된 것이에요.

Copy to Clipboard
Syntax Highlighter.sidebar button {
  background: pink;
}

sidebar 클래스 안에 들어있는 모든 <button> 요소에 분홍 배경이 적용 돼요.

css

Copy to Clipboard
Syntax Highlighter.sidebar button {
  background: pink;
}

html

Copy to Clipboard
Syntax Highlighter<div class="sidebar">
  <button>버튼1</button>
  <button>버튼2</button>
</div>

<button>바깥버튼</button>

적용 화면

Copy to Clipboard
Syntax Highlighter.profile-card {
  border-radius: 20px;
}

html에서 class=”profile-card”을 가진 요소에만 모서리 둥글게가 20px으로 적용돼요.

이처럼 CSS에서 스코프는 선택자를 통해 만들어지는 적용 범위를 의미해요.

CSS는 기본적으로 전역으로 적용되기 때문에 스코프 관리를 하지 않으면 예상하지 못한 문제가 생기기 쉬워요.

선택자가 문서 전체를 기준으로 동작하기때문에 의도하지 않은 UI의 색이나 스타일이 함께 바뀌거나 서로 다른 스타일이 충돌할 수 있어요.

이러한 상황이 반복되면 수정할 때마다 다른 요소까지 영향을 받게 되고 결국 유지보수가 매우 어려워져요 따라서 CSS를 작성할 때는 적용 범위를 명확히 나누고 클래스와 구조를 통해 스코프를 관리하는 습관이 필요해요.

Copy to Clipboard
Syntax Highlighterbutton {
  background:red;
}

이렇게 쓰면 사이트 전체의 버튼이 빨간색이 되기때문에

Copy to Clipboard
Syntax Highlighter.header button {}
.modal button {}
.card button {}

이렇게 컴포넌트 단위로 스코프를 잡아줍니다.

*컴포넌트 : 독립적으로 분리된 재사용 가능한 UI 조각