[콜럼Vue스] 인라인스타일

1. 인라인 스타일이란?

• HTML 요소에 직접적으로 style 속성을 사용하여 CSS를 적용하는 방식임.
• 인라인 스타일은 Vue.js에서도 지원되며, 보통 v-bind:style로 데이터 속성을 바인딩해 스타일을 적용할 수 있음.
• 스타일 속성은 케밥 표기법(예: background-color)을 사용하지만, Vue 인스턴스에서는 카멜 표기법(예: backgroundColor)으로 표기해야 함.

2. 인라인 스타일 사용 예시

• 예시 코드에서는 버튼에 마우스를 올렸을 때(mouseover), 인라인 스타일을 통해 배경 색상과 텍스트 색상이 바뀌도록 설정.
• 마우스를 버튼에서 뗄 때(mouseout) 다시 원래 색상으로 돌아가도록 정의.

methods: {
   overEvent() {
     this.style1.backgroundColor = "purple";
     this.style1.color = "yellow";
   },
   outEvent() {
     this.style1.backgroundColor = "aqua";
     this.style1.color = "black";
   }
 }

3. 인라인 스타일과 객체 단위 바인딩

• 인라인 스타일을 객체 단위로 바인딩할 때, 여러 스타일 속성을 한꺼번에 정의할 수 있음.
• 예시에서는 myColor와 myLayout 스타일 객체를 사용하여 버튼의 배경 색상과 레이아웃을 동시에 적용함.

<button id="btn1" :style="[ myColor, myLayout ]">버튼1</button>

주요 포인트

• 인라인 스타일은 CSS를 직접적으로 적용하는 방식이지만, Vue.js에서는 데이터 속성을 통해 바인딩할 수 있어 더욱 효율적으로 스타일을 적용 가능함.
• 객체 단위로 여러 스타일 속성을 바인딩하는 것이 가능하며, 이를 통해 유지보수와 코드 관리를 쉽게 할 수 있음.
• 스타일 적용 시 케밥 표기법과 카멜 표기법의 차이를 이해하고 올바르게 사용해야 함.