Vue.js 3.0 STEP 4 - 스타일 적용 — Developer Story House

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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Vue.js 3.0 STEP 4 - 스타일 적용

'Vue.js' 카테고리의 다른 글

'Vue.js' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역