CATEGORIES
제이쿼리를 사용하여 스타일 추가 및 제거하기 위해 클래스(class) 속성을 선택자로 사용합니다. 그 외에 동적인 스크립트 및 액션 등은 자바스크립트의 ID 값을 많이 사용합니다. 이렇게 클래스명을 추가하거나 제거하면 간단하게 원하는 스타일을 추가 또는 제거하는 것이 가능합니다. 물론 해당하는 class에는 스타일이 css에 선언되어야겠죠.# 제이쿼리를 사용한 스타일 추가 및 제거 방법아래는 제이쿼리(jQuery)를 사용하여 클래스명을 추가, 삭제하는 방법에 대하여 알아보려고 합니다. 또한 현재 어떤 클래스를 가지고 있는지도 확인할 수 있는 메소드도 함께 알아보도록 하겠습니다.! 제이쿼리를 클래스를 추가하는 방법과 직접 스타일을 부여하는 방법과는 어떤 차이점이 있을까?사실 제이쿼리(jQuery)를 사용하여
Last Modified : 2018-07-25 19:46:38
제이쿼리의 toggleClass() 메소드 매우 자주 사용됩니다. 이 메소드를 사용하면 원하는 요소에 새로운 클래스를 추가하거나 제거하기를 매우 쉽고 간단하게 반복할 수 있습니다.toggleClass()는 설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여 해당 요소가 있으면 이를 제거합니다. 반대로 해당 요소가 없다면 이를 부여하는 매우 유용한 메소드입니다. 간단한 사용방법은 아래와 같습니다.element.toggleClass('클래스명')[ 1 ] toggleClass() 예제소스 코드 보기<html><head><style type="text/css"> .red { color: #f00; }</style></head><body> <p id='test' class='red'>Class name r
Last Modified : 2017-12-22 04:15:20
AngularJS에서는 클래스명을 추가할때 가장 많이 사용되는 ngClass 디렉티브에 대하여 알아보려 합니다. ngClass를 사용하는 방법은 매우 다양합니다. 언제 ngClass를 쓸 수 있을까요?! ngClass 디렉티브를 사용하는 경우는?ngClass는 받아오는 데이터값이 다른 경우 서로 다른 class를 적용할 때 주로 사용합니다. 데이터는 scope 변수로 저장하고 html에서 이를 읽어서 각각 다른 class를 적용할 수 있는점이지요. 즉, html 내에서 유연하게 클래스를 사용하기 위해서 사용합니다. 이를 사용하여 쉽게 클래스명을 변경할 수 있으며 아래는 ngClass 디렉티브의 다양한 사용방법, 예제에 대하여 알아보도록 하겠습니다.# ngClass 디렉티브 예제보기ngClass 디렉티브를 사
Last Modified : 2018-08-01 10:36:20
VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타일은 아래와 같이 2가지 방식으로 적용할 수 있습니다.1. style 태그 내부에 선언하기vue 파일 안에 style코드를 선언하여 사용하는 방법으로 외
Last Modified : 2019-08-07 20:38:13만약 전체 클래스를 모두 제거했다가 다시 추가하려면 어떻게 할까요? 제이쿼리의 toggleClass()를 사용할 수 있습니다. 아래는 예제코드입니다.<div class="active hover focus">Toggle Test</div> 이제 위 클래스를 모두 제거합니다. 이때 toggleClass()의 메소드를 빈값으로 실행합니다.$('div').toggleClass(); ! html code<div class>Toggle Test</div> toggleClass()를 빈값으로 전달할 경우 모든 Class 이름이 제거됩니다. 이를 다시 수행하면 어떻게될까요? 아래 래를 봐주세요.$('div').toggleClass(); ! html code<div class="active hover focus">Toggl
Last Modified : None
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객체지향언어에서 클래스의 상속은 매우 중요합니다. 서버사이드 언어뿐만 아니라 프론트엔드 역시 상속 및 인스턴스의 개념을 잘 알고 활용하여야 하죠. 아래는 Python언어에서 클래스를 상속하는 방법을 예제와 함께 알아보려합니다.#Python에서 상속받기Python은 알기 쉬운 언어답게 상속 역시 매우 쉽습니다. 클래스를 선언 후 ()를 사용해 상속받을 부모클래스를 파라미터로 전달하기만 하면 됩니다.class ClassName(ParentClass):그럼 예제를 볼까요? 먼저 부모가 될 클래스가 필요합니다. 여기서는 baseClass라는 이름의 부모 클래스를 아래와 같이 만들어봅니다. 클래스를 만들때는 앞에 class라는 키워드를 사용하여야 클래스가 만들어집니다.class BaseClass(self): def
Last Modified : 2017-11-09 13:06:56
React 앱에서 클래스 이름을 조건에 따라 다이나믹하게 설정하는 방법을 알아봅니다. 어떻게 하면 될까요?# React 클래스 이름 선언하는 방법React는 다른 프레임워크는 문법이 많이 다른 편입니다. 특히 클래스 이름을 선언할 때 역시 방법이 조금 틀립니다. 그런데 자세히 보면 틀린게 아니라 자바스크립트 문법을 그대로 적용한다라고 볼 수 있습니다. 아래에서 자세히 알아봅니다.! 클래스 이름을 설정하기먼저 기본부터 알아봅니다. 그냥 조건없이 문자로 바로 선언하는 방법이죠~ i 태그가 있다면 아래와 같이 active 클래스를 추가할 수 있습니다.<i className={ 'active' }></i>이제 i 엘리먼트에는 active 클래스가 선언되어 나타납니다. 이제 변수에 따라 다른 값을 적용하려면 어떻게
Last Modified : 2020-03-24 20:29:50ES 5 이후의 자바스크립트... 즉 ECMA Script 2015, ES 6부터는 자바스크립트에서도 클래스를 사용할 수 있게 되었습니다. ES 6에서 어떻게 클래스를 선언하고 사용하는지 자세히 알아봅니다.@ 이전에는 어떻게 클래스, 객체지향을 구현하였나...ES 6 이 후부터는 자바스크립트에서 클래스를 사용하여 선언할 수 있지만 이 전에는 프로토타입(prototype) 방식을 사용하는 방법으로 생성자 함수를 만들 수 있습니다. 하지만 클래스를 사용하면 더 쉽게 클래스를 만들고 확장하는게 간단하겠죠. 그렇다면 클래스는 무엇일까요?! 자바스크립트에서 클래스(class)객체지향언어에서 객체에 해당하는 것이 바로 클래스이며 가장 중요한 부분이라고 할 수 있습니다. 기존의 자바스크립트에서 클래스를 생성하려면 프로토
Last Modified : 2020-06-11 11:27:31