728x90
1. HTML의 스타일 적용
- HTML 요소의 스타일 적용은 모두 문자열이며, 케밥 표기법을 주로 이용한다.
- font-size와 같은 형태
- 이와 같은 표기법을 사용하는 이유는 HTML에서는 대소문자를 구별하지 않기 때문이다.
- 케밥 표기법은 HTML, 스타일 특성 등에서 주로 사용한다.
<style>
.test { background-color:aqua; color:brown; border:solid 1px black; }
</style>
<button class="test">버튼 1</button>
<button class="test">버튼 2</button>- 이렇게 클래스를 적용하는 모든 HTML 요소에 동일한 스타일이 적용된다.
- 하지만, 적용되는 순서는 꼭 알아둬야 한다.
<style>
.test { background-color: yellow; border:double 4px gray; }
.over { background-color: aqua; width: 300px; height: 100px;}
</style>
</head>
<body>
<div style="background-color: orange;" class="test over"></div>
</body>- 이렇게 살펴보면, style 특성에 직접 지정하는 인라인 스타일 방식이 마지막으로 적용된다.
요소의 기본 스타일 -> .test 스타일 -> .over 스타일 -> 인라인 스타일
2. 인라인 스타일
- 인라인 스타일은 v-bind:style로 작성한다. style로 지정할 정보는 데이터 속성에 자바스크립트 객체로 작성한다.
- Vue 인스턴스의 데이터로 처리하려면 케밥 표기법을 사용할 수 없다.
| 케밥 표기법(kebob casing) | 카멜 표기법(camel casing) |
| font-size | fontSize |
| background-color | backgroundColor |
- mouseover와 mouseout에 대한 기능 구현
<body>
<div id="app">
<button id="a" :style="style1" @mouseover.stop="overEvent"
@mouseout.stop="outEvent">테스트</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var vm = Vue.createApp({
name : "App",
data() {
return {
style1 : { backgroundColor : "aqua", color : "black" }
}
},
methods : {
overEvent() {
this.style1.backgroundColor = "purple";
this.style1.color = "yellow";
},
outEvent() {
this.style1.backgroundColor = "aqua";
this.style1.color = "black";
}
}
}).mount("#app");
</script>
</body>- 지정할 스타일을 객체 단위로 바인딩 하는 방법 ( 더 편리한 방법 )
<body>
<div id="app">
<button id="a" :style="{ backgroundColor:bgColor, color }"
@mouseover.stop="overEvent"
@mouseout.stop="outEvent">테스트</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var vm = Vue.createApp({
name : "App",
data() {
return {
bgColor : "aqua", color : "black"
}
},
methods : {
overEvent() {
this.style1.backgroundColor = "purple";
this.style1.color = "yellow";
},
outEvent() {
this.style1.backgroundColor = "aqua";
this.style1.color = "black";
}
}
}).mount("#app");
</script>
</body>- 인라인 스타일을 지정할 때, 한번에 여러 객체를 지정할 수 있다.
<body>
<div id="app">
<button id="btn1" :style="[ myColor, myLayout ]">버튼1</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = Vue.createApp({
name : "App",
data() {
return {
myColor : { backgroundColor:'purple', color:'yellow' },
myLayout : { width:'150px', height:'80px', textAlign:'center' }
}
}
}).mount("#app")
</script>
</body>
3. CSS 클래스 바인딩
- CSS 클래스를 지정하기 위해 v-bind:class="..." 또는 :class="..."을 사용하며, 두가지 방법으로 바인딩 할 수 있다.
CSS 클래스명 문자열을 바인딩하는 방법
true/false 값을 가진 객체를 바인딩하는 방법- 3.1 - CSS 클래스명 문자열을 바인딩 하는 방법
<style>
.buttonColor { background-color: aqua; color:black; }
.buttonLayout { text-align:center; width:120px; }
.staticBorder { border: khaki dashed 1px; }
</style>
</head>
<body>
<div id="app">
<button class="staticBorder" :class="myColor">테스트 버튼</button>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = Vue.createApp({
name : "App",
data() {
return {
myColor : "buttonColor buttonLayout",
}
}
}).mount("#app")
</script>
</body>- 3항 연산식과 조합하면 동적으로 클래스 바인딩 여부를 결정 할 수 있다.
<style>
.buttonColor { background-color: aqua; color:black; }
.buttonLayout { text-align:center; width:120px; }
.staticBorder { border: khaki dashed 1px; }
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="isMyLayout">레이아웃 적용 여부<br>
<button class="staticBorder"
:class="[myColor, isMyLayout ? myLayout : ' ' ]">
테스트 버튼
</button>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = Vue.createApp({
name : "App",
data() {
return {
myColor : "buttonColor",
myLayout : "buttonLayout",
isMyLayout : false,
}
}
}).mount("#app")
</script>- 3-2. true/false 값을 가진 객체를 바인딩하는 방법
- 아래와 같은 방법을 사용하면, 복잡하고 작성도 쉽지 않다.
- 이를 해결하는 방법이 바로 객체 바인딩
:class="[ isColor ? myColor : '', isLayout ? myLayout : '', isFont ? myFont : '']"- 3-3. 객체 바인딩을 통한 코딩
- 하지만, 이 방법도 그리 좋은 방법은 아니다.
- 만약, 미리 객체를 만들어 두어 바인딩을 용이하게 할 수 있는 방법이 있다면 더욱 용이할 것이다.
<style>
.bColor { background-color: aqua; color:black;}
.bLayout { text-align: center; width: 120px;}
.bBorder { border: khaki dashed 1px; }
</style>
<body>
<div id="app">
<button
:class="{ bColor:setColor, bLayout:setAlign, bBorder:setBorder }">
버튼 1
</button>
<p>
<input type="checkbox" v-model="setColor" value="true" /> 색상 <br/>
<input type="checkbox" v-model="setAlign" value="true" /> 정렬,크기 <br/>
<input type="checkbox" v-model="setBorder" value="true" /> 테두리선<br/>
</p>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = Vue.createApp({
name : "App",
data() {
return {
setColor : false,
setAlign : false,
setBorder : false
}
}
}).mount("#app")
</script>- 더욱 용이한 방법
- data를 myStyle이라는 개체로 초기화 하여 더욱 용이하게 만듬.
<style>
.bColor { background-color: aqua; color:black;}
.bLayout { text-align: center; width: 120px;}
.bBorder { border: khaki dashed 1px; }
</style>
<body>
<div id="app">
<button :class="myStyle">버튼 1</button>
<p>
<input type="checkbox" v-model="myStyle.bColor" value="true" /> 색상 <br/>
<input type="checkbox" v-model="myStyle.bLayout" value="true" /> 정렬,크기 <br/>
<input type="checkbox" v-model="myStyle.bBorder" value="true" /> 테두리선<br/>
</p>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = Vue.createApp({
name : "App",
data() {
return {
myStyle : { bColor : false, bLayout : false, bBorder : false }
}
}
}).mount("#app")
</script>
4. 동적 스타일 바인딩
- 계산된 속성과 메서드가 리턴할 값을 스타일에 적용할 수도 있다.
- 계산된 속성이나 메서드가 리턴하는 값이 CSS 클래스명의 문자열이거나 [ 클래스명 : true/false ] 형태의 객체라면 손쉽게 CSS 클래스로 바인딩 할 수 있다.
<style>
.score{ border : solid 1px black; }
.warning { background-color: skyblue; color:purple; }
.warnimg { width:18px; height: 18px; top:5px; position:relative; }
</style>
</head>
<body>
<div id="app">
<div>
<p>1부터 100까지만 입력 가능합니다.</p>
<div>
점수 : <input type="text" class="score" :class="info"
v-model.number="score" />
<img src="https://contactsvc.bmaster.kro.kr/img/error.png" class="warnimg"
v-if="info.warning" title="1부터 100까지만 입력하세요." />
</div>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = Vue.createApp({
name : "App",
data() {
return { score : 50 }
},
computed : {
info() {
return { warning : this.score < 1 || this.score > 100 }
}
}
}).mount("#app")
</script>
</body>
728x90
'Vue.js' 카테고리의 다른 글
| Vue.js 3.0 STEP 6 - 단일 파일 컴포넌트 (2) | 2024.01.25 |
|---|---|
| Vue.js 3.0 STEP 5 - TodoList (0) | 2024.01.25 |
| Vue.js 3.0 STEP 3 - 이벤트 처리 (0) | 2024.01.18 |
| Vue.js 3.0 STEP 2 - Vue 인스턴스 (0) | 2024.01.18 |
| Vue.js 3.0 STEP 1 - Vue.js 기초와 Template (0) | 2024.01.17 |
