[Udemy Vue 완벽가이드 Section9] 112. 범위가 지정된(scoped) 스타일

이번에는 스타일링에 대해 이야기해보자.

 

# <style></style>

style태그를 .vue파일에 추가하고, 그 안에 스타일링을 설정할 수 있다.

스타일링은 추가한 위치와 관계없이 항상 앱 전체에 영향을 주는 '전역 스타일'로 취급된다.

예를 들어, BadgeList.vue파일에서 section, h2 태그 스타일을 정의하더라도 위치는 중요하지 않다. 이 스타일이 이 BadgeList.vue 컴포넌트의 템플릿에만 영향을 미치는게 아니라, 모든 파일에 영향을 미친다.

 

 

TheHeader.vue파일에서 header요소를 태그로 선택하고, 특정 스타일을 적용시켜보자.

UserInfo.vue에 div로 wrapping되어있는 곳을 header요소로 변경하면 똑같은 스타일이 적용된다.

즉, 해당 파일에 스타일이 설정되어있더라도 앱 전체에 영향을 미친다.

 

## 전역 스타일이 필요한 경우

때로는 이런 설정이 필요한 경우도 있다.

예를 들어, App.vue에서 애플리케이션에 전역적으로 적용할 스타일(body나 font-family 등)을 정의한다.

앱 전체에 영향을 미치는 스타일은 일반적으로 App.vue파일의 style태그에서 정의된다.

여기가 전체 애플리케이션의 진입점이므로.

 

# <style scoped></style>

하지만 개별 컴포넌트에 적용할 스타일이 있는 경우, 일반적으로 스타일의 범위를 해당 컴포넌트로 지정해서 스타일을 정의한 컴포넌트의 템플릿에만 영향이 미치도록 한다.

Vue에서는 이것을 지원하는 기능이 있다. → style태그에 추가할 수 있는 'scoped' 속성.

 

scoped속성을 추가하면 Vue는 여기에 정의된 스타일이 같은 파일 내에 있는 템플릿에만 적용되도록 해준다.

다른 컴포넌트, 자식 컴포넌트, 형제 컴포넌트에도 적용되지 않고 앱의 다른 곳에도 적용되지 않는다.

모든 컴포넌트에서 이 작업을 수행할 수 있다.

 

 

## scoped 속성의 원리

스타일을 정의한 컴포넌트에만 해당 스타일이 적용되도록 하는 아주 유용한 기능이다.

Vue가 실제로 이걸 어떻게 구현하는지 궁금하다면 브라우저에 있는 개발자 도구를 확인해보자.

Vue가 요소에 특별한 속성을 부여해서 작업을 수행하는걸 볼 수 있다.

여기 보이는 'data-v-'가 붙어있는 속성. 이 속성은 Vue에 의해 추가된다.

 

스타일링을 보면 Vue가 내부에서 선택자를 변경한다.

 

TheHeader파일에 있는 header 선택자처럼 생성된 속성이 header에 더해진다.

ex: <a href="#">2</a>이면 a[href] 이렇게 href 속성이 생성된다는 뜻.

a 선택자를 가진 값 중에서 대괄호안의 속성을 가진 값만을 선택해서 css를 적용해준다.

 

scoped속성을 적용하면, 그 컴포넌트의 모든 템플릿은 'data-v-'가 붙은 고유한 속성을 받기 때문에 스타일링의 범위가 해당 컴포넌트의 템플릿 마크업으로 한정된다.

- 한 컴포넌트에는 똑같은 커스텀 속성이 생성되어 더해진다.

- scoped를 적지 않으면 커스텀 속성이 없다.

 

Vue는 이렇게 내부에서 커스텀 속성을 사용하여 선택자를 조정하여 scoped를 구현한다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.