728x90
반응형
요소의 속성을 데이터로 지정하는 : v-bind
v-bind:속성명
ex) :속성명 으로 사용 가능하다.
<태그명 v-bind:속성="프로퍼티명"></태그명>
- 이미지 지정하기
ex) <img v-bind:src="fileName"></img>
- 링크 지정하기
ex) <a v-bind:href="myURL"></a>
- 정렬 위치 지정하기 (우측정렬, 좌측정렬, 중앙정렬)
ex) <p v-bind:align="프로퍼티명"></p>
인라인 스타일 지정
- 인라인 : 태그마다 지정
(태그부분의 전체를 지정하는 것은 태그에 스타일을 지정함)
일반 style 태그 : style="원하는 속성 : 프로퍼티명;"
Vue데이터 사용 태그 : v-bind:style="{원하는 속성 : 프로퍼티명}" 으로 사용
ex) 일반 스타일에서 background-color ⇒ Vue 사용시 backgraoundColor
#id명 id선택자
.class명 class선택자
: 반응선택자 (a:action, a:hover)
* (전체선택)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
/* 백그라운드 컬러 지정은 rgb가 아닌 그냥 컬러 지정도 가능
body{background-color: ivory;}
------------------------------------------------------------*/
/*id에 지정을 하고 싶다면 #를 붙임
#id명 {background-color: ivory;}*/
#app {background-color: rgb(172,172,9);}
/*class에 지정을 하고 싶다면 .을 붙임
.클래스명 {background-color: ivory;}*/
.app {background-color: rgb(250, 250, 159);}
/*body태그에 지정을 하고 싶다면
태그명 id명 {background-color: ivory;}*/
body#app {background-color: rgb(83, 83, 50);}
.dark {background-color: rgb(126, 108, 226);}
/*
#id명 id선택자
.class명 class선택자
: 반응선택자 (a:action, a:hover)
* (전체선택)
*/
</style>
</head>
<body bgcolor="sunflower">
<div id="app" class="app">
<p id="app2">
<!--영역의 스타일 변경-->
<font color="red">글자색</font>
<p style="color : red">글자색 지정</p>
<p :style="{color : myColor}">글자색 Vue에서 지정</p>
<font size="5">글자 크기 1~7</font>
<p style="font-size : 200%">글자 크기 지정</p>
<p :style="{fontSize : mySize}">글자 크기 Vue에서 지정</p>
<hr>
<p style="background-color: aqua;">배경색 CSS로 지정</p> <!--한줄, 줄바꿈-->
<span style="background-color: aqua;">배경색 CSS로 지정</span> <!--글씨있는 부분 영역-->
<span style="background-color: red;">배경색 CSS로 지정</span>
<div style="background-color: aqua;">배경색 CSS로 지정</div> <!--한줄-->
<div :style="{backgroundColor : myBackcolor}">배경색 Vue에서 지정</div>
<span class="dark">클래스로 배경색 지정</span>
</div>
<script>
new Vue({
el : '.app', // .app이므로 class가 app인것을 지정함
data : {
url : 'http://www.koreait.ac.kr',
ol_type : 'a',
file_name : 'source/face1.png',
in_type : 'number',
myAlign : 'center',
myColor : '#000fff',
mySize : '200%',
myBackcolor : 'orange'
}
})
</script>
</body>
클래스 속성 지정
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.dark {background-color: rgb(126, 108, 226);}
.strike-through{
text-decoration: line-through;
color: blue;
}
</style>
</head>
<body bgcolor="sunflower">
<div id="app" class="app">
<!--클래스 속성 지정-->
<p class="strike-through"> 클래스 직접 지정</p>
<p :class="myClass">Vue에서 클래스 지정</p>
<p :class="[myClass,darkclass]">여러개의 클래스 지정</p>
<p :class="{'strike-through': isOn}">데이터 클래스로 on/off</p> <!--strike-through속성이라면, 실행한다.-->
<hr>
</div>
<script>
new Vue({
el : '.app', // .app이므로 class가 app인것을 지정함
data : {
myClass : 'strike-through',
darkclass : 'dark',
isOn : true
}
})
</script>
</body>
728x90
반응형