CATEGORIES
VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타일은 아래와 같이 2가지 방식으로 적용할 수 있습니다.1. style 태그 내부에 선언하기vue 파일 안에 style코드를 선언하여 사용하는 방법으로 외
Last Modified : 2019-08-07 20:38:13
vuejs에서 클래스 이름을 저장된 scope 값에 따라서 다이나믹(dynamic)하게 적용하는 방법을 알아보려고합니다. vuejs 역시 다른 프론트엔드 엔진처럼 클래스명을 값에 따라 그때그때 다르게 적용할 수 있습니다. 이때 v-bind:class를 사용합니다.v-bind:class="{ condition }"위와 같이 조건식을 사용하여 원하는 클래스명을 추가하거나 제거할 수 있습니다. 예를들어 vuejs에서 사용되는 변수 hide의 값이 true인 경우에만 hidden이라는 클래스를 보여줄 수도 있고 아니면 status='active'인 경우에만 active 클래스명을 적용하는 것도 가능하게 됩니다. 여기서 조건식은 아주 간단하게 동작합니다.- 조건식을 사용하여 boolean값이 true인 경우에만 해당
Last Modified : 2019-01-04 00:36:06