[콜럼Vue스] 단일 컴포넌트에서의 스타일 관리

Vue.js 에서는 컴포넌트별로 CSS 스타일을 독립적으로 관리할 수 있음

이로 인해 유지보수가 용이해지고, 스타일 간의 충돌을 방지할 수 있음

특히, 범위 CSS (Scoped CSS)와 CSS 모듈을 사용하면 보다 구조적이고 명확적인 스타일링이 가능함

---

범위 CSS (Scoped CSS)

Scoped CSS는 특정 컴포넌트 내부에서만 스타일이 적용되도록 하는 기능임

이를 통해 다른 컴포넌트와의 스타일 충돌을 방지하고, 컴포넌트별로 독립적인 스타일을 제공할 수 있음

 

scoped 키워드의 역할

- <style scoped>를 선언하면 컴포넌트의 HTML 요소에 자동으로 데이터 속성 (data attribute)가 추가

- 스타일 정의 역시 해당 데이터 속성을 기반으로 범위 내에서만 적용

 

CSS 모듈 (CSS Modules)

CSS 모듈은 CSS를 컴포넌트의 로컬 스코프로 묶어 사용하는 방법

이는 CSS가 전역적으로 적용되지 않으며, 각 컴포넌트에 독립적으로 로드됨

 

	Scoped CSS	CSS 모듈
적용 범위	컴포넌트 내부에서만 적용	컴포넌트에 로컬 스코프로 적용
사용 방법	<style scoped> 사용	<style module> 사용
충돌 방지	데이터 속성을 이용한 제한적 범위 적용	해시 값으로 전역 충돌 완전히 방지
유지보수성	쉬움	복잡한 프로젝트에 적합
사용 시 주의점	동일한 스타일 중복 가능	$style 객체로 클래스 참조 필요