VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타일은 아래와 같이 2가지 방식으로 적용할 수 있습니다.1. style 태그 내부에 선언하기vue 파일 안에 style코드를 선언하여 사용하는 방법으로 외부 또는 내부의 style 전체를 문법에 맞게 적용합니다. css에서는 속성이 케밥 표기 방식으로 사용합니다.(케밥 표기식은 헝가리, 카멜 표기처럼 사용하는 방식을 의미하며 중간에
2019-02-07 11:30:23vuejs에서 클래스 이름을 저장된 scope 값에 따라서 다이나믹(dynamic)하게 적용하는 방법을 알아보려고합니다. vuejs 역시 다른 프론트엔드 엔진처럼 클래스명을 값에 따라 그때그때 다르게 적용할 수 있습니다. 이때 v-bind:class를 사용합니다.v-bind:class="{ condition }"위와 같이 조건식을 사용하여 원하는 클래스명을 추가하거나 제거할 수 있습니다. 예를들어 vuejs에서 사용되는 변수 hide의 값이 true인 경우에만 hidden이라는 클래스를 보여줄 수도 있고 아니면 status='active'인 경우에만 active 클래스명을 적용하는 것도 가능하게 됩니다. 여기서 조건식은 아주 간단하게 동작합니다.- 조건식을 사용하여 boolean값이 true인 경우에만 해당하는 클래스명이 적용됨조건식은 객체 형태로 나타나게됩니다. 아래와 같이 앞에는 적용될 클래스명 위치하고 뒤에는 true, false의 boolean이 위치합니다.v-bind:cl
2019-01-04 13:37:31AngularJS에서 html 코드를 html 파일에서 출력하는 방법을 알아봅니다.! HTML출력시 sanitize를 사용하는 이유는?AngularJS에서 html을 출력하려면 sanitize를 거쳐야 가능합니다. 그렇지 않으면 html 태그가 적용되지 않고 그대로 화면에 출력만 될 수 있습니다. 이를 위해서 아래와 같이 $sce 서비스와 trustAsHtml() 메소드를 사용하여야합니다. 아래 예제는 이를 사용하여 html을 ng-bind-html을 사용하여 출력하는 예제입니다.# AngularJS의 $sce 그리고 ng-bind-html 예제보기div 태그내의 span 태그는 html 코드를 출력하여 보여주려는 간단한 예제입니다. 변수 trustedHtml에 보여줄 html 코드를 추가하여 이를 ng-bind-html을 사용하여 출력해보겠습니다.@ ngbind.html<div> <span ng-bind-html="trustedHtml"></span></div>이제 위 html에
2017-08-14 01:09:02AngularJS의 가장 큰 장점은 손쉽게 Two-way binding(양방향 바인딩)을 사용할 수 있다는 점이다. 데이터, 즉 모델값을 뷰에 바인딩하기 위하여 단방향, 양방향 바인딩을 사용하는데 이 둘의 차이점은 다음과 같다.# 단방향과 양방향 바인딩의 차이점i. 단방향 바인딩(one-way binding); 단방향 바인딩은 처음 모델이 가진 값을 뷰에 표현하고 나중에 모델이 변경되더라도 업데이트 되지 않는다.ii. 양방향 바인딩(two-way binding); 양방향 바인딩은 모델을 뷰에 바인딩함과 동시에 이후 모델이 변경되는 경우를 감지하여 지속적으로 뷰를 업데이트 해준다.이 둘의 가장 큰 차이점은 모델값이 변경에 따라 뷰 콘텐츠를 계속해서 업데이트 할 것인가이다. 사실 모두 양방향으로 설정해둔다 해도 뷰가 달라지는 것은 없다. 다만 계속해서 데이터 변화를 감지하고 바인딩해야하기 때문에 성능 및 리소스 관리에 좋지 않다.결국 단방향 바인딩만으로 표현가능한 요소를 양방향으로 사용
2017-01-25 17:05:43구버전의 제이쿼리를 사용하여 작성된 코드에서는 이벤트 메소드로 live(), delegate(), bind()등을 볼 수 있습니다. 최근의 제이쿼리에는 통합 메소드 .on()이 사용되므로 이들 메소드 대신 통합 메소드를 사용하는 것이 맞겠습니다. 대부분의 이벤트 바인딩에 on() 메소드가 적용됩니다. 그렇다면 기존의 live() 메소드와 on() 메소드는 차이가 무엇인지 알아보고 여기에 대하여 알아보도록 하겠습니다.# jQuery live() 메소드는 무엇인가먼저 live() 메소드는 무엇일까요? live() 메소드는 웹문서에 존재하는 노드 요소가 현재는 존재하지 않으나 추후 이벤트 또는 비동기 방식으로 인하여 새롭게 생성되는(발생하는) 경우에 대비하여 사용됩니다. 쉽게 얘기하자면 클릭 등의 특정 이벤트를 만들되 이 이벤트가 동작되는 시점은 지금 당장이 아니라 해당 노드 요소가 생성된 이후가 될 수 있도록 하는 것입니다. 이는 현재 없는 노드에 이벤트 예약을 걸어두는 것과 같죠. 그
2016-08-29 16:07:00
