class2 [CSS] quasar에 정의되어있는 가상 선택자 클래스 css 변경하기 Quasar프레임워크를 사용하다가 css를 변경할 때, Quasar가 가지고 있는 클래스를 재정의하여 사용하곤 한다. 하지만 기존 css의 가상 클래스 중 :active, :focus는 Quasar가 가지고 있는 클래스에 붙여 사용하려 해도 적용되지 않는 경우가 있다. 예를들어 q-tab의 경우이다. 개발자 도구를 들여다 보면 활성화된 탭에는 q-tab--active라는 클래스가, 비활성화된 탭에는 q-tab--inactive라는 클래스가 적용되어있다. 이러한 경우 q-tab:active 또는 q-tab:focus를 사용한다고 하더라도 적용 자체가 되지 않거나, 원하는 결과를 얻기가 어렵다. Quasar에서 가상클래스 재정의 하는 법 * Quasar자체에서 제공하는 클래스를 가상클래스라고 정의하기에는 확.. 2023. 10. 14. [Vue.js] HTML 요소의 클래스(class)를 동적으로 바인딩하기 css를 하다보면 하나의 HTML요소에 상황에 따라 다른 스타일을 적용해 주어야 할 때가 있다. 예를 들면 클릭 된 탭이 A냐 B냐에 따라 색상을 변경해 준다든가, 높이를 다르게 설정한다든가 하는 경우이다. :class 디렉티브 이런경우에는 :class 디렉티브를 사용해주면 된다. :class 디렉티브는 HTML요소의 클래스를 동적으로 바인딩하는데 사용된다. 삼항연산자를 이용하여 tabs가 template인 경우에는 aTemplateClass 클래스가, tabs가 template이 아닌 경우에는 bTemplateClass 클래스가 적용되게 해준다. 그 후에는 태그에 원하는 스타일을 지정해주면 된다. 사용자가 화면에서 탭을 클릭하면 tabs의 데이터가 변경됨에 따라 클래스를 동적으로 바인딩 할 수 있다. 2023. 10. 12. 이전 1 다음 728x90
