웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.
# VueJS에 스타일(Style) 적용하기
시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?
스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타일은 아래와 같이 2가지 방식으로 적용할 수 있습니다.
1. style 태그 내부에 선언하기
vue 파일 안에 style코드를 선언하여 사용하는 방법으로 외부 또는 내부의 style 전체를 문법에 맞게 적용합니다. css에서는 속성이 케밥 표기 방식으로 사용합니다.
(케밥 표기식은 헝가리, 카멜 표기처럼 사용하는 방식을 의미하며 중간에 대쉬기호를 사용... 마치 케밥 사이의 코치를 연상하시면 됩니다)
@ style에 적용된 코드
<style>
* { margin: 0; padding: 0; }
body a.text { color: blue; }
.box { color: blue; }
</style>
* { margin: 0; padding: 0; }
body a.text { color: blue; }
.box { color: blue; }
</style>
2. 인라인(Inline style) 방식으로 선언하기
인라인 방식은 태그에 직접 사용하는 방식을 의미하며 style 속성을 함께 사용합니다.
<div style="display: none;">Hide On</div>
스타일 적용은 이처럼 위와 같이 두 가지 방식으로 적용할 수 있는데 일반적으로는 위의 방법으로 사용하고 자바스크립트에 의하여 컨트롤 되는 등의 액션이 필요한 경우에 아래의 인라인 방식이 사용됩니다. 여기서 인라인 방식을 알아본 이유는? 바로 v-bind:style을 사용시 인라인 형태로 적용되기 때문이죠. 아래에서 알아봅니다.
! vuejs의 v-bind:style 적용하기
앞에 언급인라인 방식을 알아야하는 이유는 VueJS에서 v-bind:style을 사용하여 적용될 경우 인라인 방식으로 적용되기 때문입니다. 예를들어 아래의 코드는 인라인 방식으로 태그에 적용됩니다.<span v-bind:style="{ fontSize: '20px' }">20 pixel Size</span>
실제 웹에서는 아래와 같이 나타나게됩니다.
<span style="font-size: 20px;">20 pixel Size</span>
이처럼 vuejs에서는 스타일 적용을 위해 v-bind:style을 매우 유용하게 사용할 수 있습니다. 그렇다면 여러개의 스타일을 함께 적용하려면?
! v-bind:style 멀티 스타일 적용하기
하나가 아닌 여러개의 스타일을 한 번에 적용하는 방법입니다. 이 경우 여러개의 프로퍼티를 사용할 수 있습니다. 아래는 하나가 아닌 두 개의 스타일을 동시에 적용하였습니다.<span v-bind:style="{ fontSize: '20px', border: '1px solid gray' }">20 pixel Size</span>
! 참고하기, 자바스크립트에서의 스타일 적용방법
그렇다면 자바스크립트 만으로 스타일을 적용하는 것은 어떻게할까요? 아래의 방법으로 스타일을 적용합니다.
<span id="test">Hi Hello!</span>
<script>
document.querySelector('#test').style.fontSize = '20px';
document.querySelector('#test').style.border = '1px solid gray';
</script>
<script>
document.querySelector('#test').style.fontSize = '20px';
document.querySelector('#test').style.border = '1px solid gray';
</script>
즉 Node에 style 프로퍼티를 사용하여 적용할 수 있습니다. 참고차 함께 알아두세요.
! CSS 클래스를 바인딩하여 스타일 적용, v-bind:class
스타일을 추가하는 방법으로 위의 v-bind:style 보다는 클래스 추가 방식이 선호됩니다. 클래스 추가 방식은 v-bind:class를 사용하는데이 방식이 더 선호되는 이유는 아래와 같죠.- 보기에 깔끔
- 유지보수에 적합
v-bind:class 적용방법 및 예제를 자세히 알아봅니다.
! v-bind:class 디렉티브 어떻게 적용하는가?
먼저 문법입니다. 문법은 v-bind:style과 거의 동일하게 사용합니다. 객체 형태로 사용되며 앞에가 적용되는 클래스명이고 뒤에는 적용을 할 것인지 결정하는 불리언 값이 사용되게됩니다.<span v-bind:class="{ 'hidden': false }">
20 pixel Size
</span>
20 pixel Size
</span>
매우 간단하죠? 이 것 역시 멀티 케이스, 즉 여러개의 클래스를 동시 적용 가능합니다.
! 멀티 케이스의 클래스를 적용하기
추가할 클래스 개수만큼 각각의 프로퍼티를 추가하여 사용합니다. 만약 hidden, active 두 개의 클래스 명을 정의한다면 아래와 같겠죠?<span v-bind:class="{ 'hidden': false, 'active': true, 'hover': false }">Click</span>
또 다른 방법으로 배열 값을 적용하는 것도 됩니다.
<span class="[{ 'hidden': false }, { 'active': true } ]">Click</span>
# 컴포넌트에 스타일 적용하는 방법
Vue 컴포넌트에 스타일을 적용하는 방법은 위 방법과 동일합니다. 다만 컴포넌트 내부 스코프에만 적용할 수 있는 방법이 존재하며 이 방법을 알아두어야합니다. 이때는 사용하는 속성이 따로 있는데 바로 scoped 입니다.<style scoped></style>
<style></style>
<style></style>
이처럼 scoped를 사용할 경우 해당 컴포넌트 내부에만 적용되므로 다른 컴포넌트가 간섭되지 않습니다. 매우 중요한데 프론트엔드의 SPA에서는 스타일 적용시 꼭 이 방법을 알아야합니다.
<style scoped>의 동작 원리는 간단합니다. scoped가 적용된 경우에는 css의 style을 적용할 때 엘리먼트의 속성값을 사용하여 적용되도록 변경하게됩니다. 적용하기 이 전이 위라면 아래처럼 바뀌게 되죠.
span { color: #f00; }
span[data-v-2341234] { color: #f00; }
span[data-v-2341234] { color: #f00; }
그럼 여기까지 VueJS에서 스타일을 적용하는 여러 방법들을 알아보았습니다. 아래 링크 역시 참고하세요!
관련 링크 바로가기 >
https://webisfree.com/2019-01-04/[vuejs]-v-bind-class-사용방법-및-예제
아래의 글도 찾고 계시지 않나요?
