[Vue] Style 사용하는 방법

 

 

안녕하세요. 혀코입니다.

 

이번 시간에는 Vue에서 style을 사용하는 방법에 대해서 알아보겠습니다.

 

<style> 태그를 사용시 해당 Component에만 스타일을 적용하고 다른 Component에 스타일 변경을 막고자 한다면, <style scoped> 이렇게 사용합니다.

 

예를 들어 style에 scoped 속성 없이 사용하면 다른 Component의 태그에도 스타일이 영향을 끼치게 됩니다.

 

<template>
  <li>{{ name }}</li>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

<style>
h1 {
  color: red
}
</style>

 

위 태그에서 해당 컴포넌트에 h1 태그가 없음에도 불구하고 h1 색상을 빨간색으로 지정했습니다. 그리고 style 태그에 scoped 속성이 없습니다.  그러면 다른 component에 있는 h1 태그의 색상이 빨간색으로 지정됩니다.

 

그래서 위 코드는 다음과 같이 사용되어야 합니다.

 

<template>
  <li>{{ name }}</li>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
li {
  color: red
}
</style>

 

Component에 해당하는 태그의 속성에만 스타일을 정의하고 scoped 속성을 추가해 주도록 합니다.

 

그리고 style 종류에는 css 와 scss가 있습니다. scss는 중첩 문법을 사용할 수 있기에 개발 속도를 높일 수 있습니다.

scss를 사용하려면 lang 속성을 추가해주고 lang 속성의 값은 scss로 지정해줍니다.

 

<style lang="scss" scoped>

</style>

 

이렇게 Vue에서 component style을 사용하는 방법에 대해서 알아봤습니다.

 

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)