안녕하세요~~~!!
오늘은 vue.js2에서 클래스&스타일바인딩에 대해 알아보도록 하겠습니다.
저는 유튜브 '코지코터' 무료강의를 통해 vue를 공부하고 있습니다!
https://www.youtube.com/kossiecoder
코지 코더 Kossie Coder
호주에서 웹개발자로 일하고 있는 코지 코더의 채널입니다! 실용적인 개발 영상들로 처음 코딩을 접하시는 분들이 따라하시고 기본을 익힐수 있는 영상들을 만들고 있습니다. 감사합니다 ^^
www.youtube.com
++정리를 하던 와중에 vue.js2서비스는 곧 종료된다 하여....
아마 다음 게시물부터는 vue3강의를 보며 공부를 다시 시작하게 될 것 같네요^^
좋은 정보 감사합니다.
어떤 환경이든지 클래스나 스타일 바인딩은 기본적으로 사용할 테니
일단 습득한 내용을 참고차 정리해 보도록 하겠습니다:)
1.style선언 및 사용하기
<style> 태그 클래스와 .bold클래스를 선언하여 내용을 작성해 줍니다.
그리고 body의 <div> Hello에 스타일을 적용할 때에는
<div class="red bold"> 이렇게 띄어쓰기를 통해 다중 적용할 수 있습니다.
결과를 확인해 보도록 하겠습니다.
짜잔!! 이렇게 style에 선언한 red와 bold클래스를 적용하여
빨간색의 굵은 글씨로 스타일을 주었습니다.
2. 데이터 바인딩으로 클래스 주기
데이터에 isRed: false를 추가하여 클래스에 바인딩해보도록 하겠습니다.
바인딩할 때에는 :class로 앞에 콜론표시를 해주면 됩니다.
.red클래스(style에 선언)에 isRed(false)를 적용한 것입니다.
그렇다면 color:red = false이기 때문에 Hello는
그냥 기본 색상인 검은색으로 나올 것입니다.
이렇게 객체로 클래스에 바인딩해 보았습니다.
그럼 이번에는 예제로 버튼을 하나 만들어서
클릭 이벤트로 false를 true로 변경하여
스타일을 적용하는 클래스를 만들어보도록 하겠습니다.
클릭이벤트로 update메서드를 선언해 줍니다.
그 안에 isRed = !this.isRed;를 주어 false를 true로 변경하도록 하였습니다.
click이벤트를 주어 한번 클릭하면
isRed는 true가 되고 또다시 클릭하면 isRed는 false가 될 것입니다.
즉, class ="red:true" , class ="red: false"로 변화하는 것입니다.
결과 화면을 통해 직접 보도록 하겠습니다.
결과화면을 보니 어떤 변화가 생기는지 더 직관적으로 확인할 수 있었습니다.
개발자 모드로 red가 생겼다가 사라지는 것을 보았습니다.
그럼 bold 클래스도 동일하게 적용해 보도록 하겠습니다.^^
여러 개의 클래스를 바인딩할 때에는 ,(쉼표)로 구분하여 작성해 주면 됩니다.
또 다른 경우를 설명하기 위해 style의 .bold 클래스 명을 .font-bold로 수정하였습니다.
이렇게 클래스명이 -(dash)로 구분되어 있을 경우에는
''문자열로 묶어 표현해주어야 합니다.( 'font-bold':isBold )
이렇게 객체를 바인딩하여 다중으로 클래스 적용하는 것을 확인해 볼 수 있었습니다!!!
3. style바인딩하기
이번에는 직접 태그 안에 style을 바인딩하는 방법을 보여드리겠습니다.
style로 직접 css값을 적용할 수도 있습니다.
우리는 객체를 바인딩하기 위해
:style로 선언하여 보도록 하겠습니다.
style도 class와 마찬가지로 "{ 스타일명:바인딩할 객체명, 스타일명:바인딩할 객체명 }"
이렇게 여러 개를 사용할때 ,(쉼표)로 구분하여 사용합니다.
클래스와 차이나는 부분이 있다면
스타일명에서 font-size와 같이 한단어가 아닌 것을 표현할 때에는
'fontSize'와 같이 -(dash) 구분을 빼고 앞글자를 대문자로
변경하여 선언해 줍니다.
결과화면 속 개발자 모드를 통해 더 직관적으로 확인해 보도록 하겠습니다:)
짜잔!!!
이렇게 color: isRed(red) , fontSize: isSize(30px)이 적용되어
빨간색의 조금 큰 사이즈의 결과화면을 볼 수 있었습니다!!!!
우리가 fontSize로 스타일명을 준 것은 실제 개발자모드로 확인하면
기존의 font-size로 나타나는 것을 확인할 수 있었습니다!!!!!
이해가 좀 더 잘 되었나요???
더 자세하고 많은 내용은 vue가이드 문서를 통해 확인하실 수 있습니다!!!
인라인 스타일을 조작하기 위해 일반적으로 사용하며,
더 다양한 방법으로 활용할 수 있다고 적혀있습니다 ^^
오늘 제가 정리한 것처럼 객체를 바인딩하는 방법이 적혀 있고,
더 깔끔한 방법으로 객체 오브젝트를 만들어
데이터를 하나로 묶어 사용하는 방법도 나와있습니다.
그리고 배열을 활용하는 방법과 삼항연산자를 활용하는 방법,
컴포넌트를 활용하는 방법 등
여기에는 정리되어있지 않은 다양한 방법을 확인하실 수 있습니다.
컴포넌트를 활용한 방법은 아직 이해하기 어렵네요!!
이 부분에 대해서는 컴포넌트를 공부하고 보면 더욱
이해하기 쉬울 것 같습니다 ^^
그리고 마지막으로 함께 정리하며 보았던 스타일바인딩하는 방법까지!!
우리가 알아본 방법과 그 이외에도 다양한 방법이 명시되어 있으니
확인하고 연습해 보시면 도움이 될 것 같습니다!!!
오늘도 많은 도움이 되었길 바라며
앞으로도 더 파이팅 하도록 해요 > <
감사합니다!!
'vue.js > vue.js2 기초강의 정리' 카테고리의 다른 글
| 6. vue.js watch 속성 사용하기 (2) | 2023.11.27 |
|---|---|
| 5. vue.js Computed 속성 사용하기 (2) | 2023.11.25 |
| 4. vue.js 데이터 양방향 바인딩 (0) | 2023.11.24 |
| 3.vue.js로 이벤트 주기 (0) | 2023.10.31 |
| 2. vue.js 데이터 바인딩 (0) | 2023.10.30 |
