스타일

Notice

Recent Posts

Recent Comments

Link

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

Today I Learned

스타일 본문

Vue.js

스타일

하이라이터 2019. 5. 6. 18:55

스타일 적용

스타일 적용 순서

속성 값 뒤에 !important 를 붙인 속성
HTML에서 style을 직접 지정한 속성
#id 로 지정한 속성
.클래스, :추상클래스 로 지정한 속성
태그이름 으로 지정한 속성
상위 객체에 의해 상속된 속성

인라인 스타일

HTML 요소의 style 프로퍼티에 CSS를 기술하는 방식

    <div id="example">
        <button id="a" v-bind:style="style1" @mouseover.stop="overEvent" @mouseout.stop="outEvent">테스트</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#example",
            data: {
                style1: {
                    backgroundColor: "aqua",
                    border: 'solid 1px gray',
                    with: '100px',
                    textAlign: 'center'
                }
            },
            methods: {
                overEvent: function(e) {
                    this.style1.backgroundColor = "purple";
                    this.style1.color = "yellow";
                },
                outEvent: function(e) {
                    this.style1.backgroundColor = "aqua";
                    this.style1.color = "black";
                }
            }
        })
    </script>

v-bind:style 디렉티브를 통해 인라인 스타일로 style 지정 가능(카멜 표기법 사용)

예제에서는 mouserover와 mouseout 이벤트를 사용해 style 속성을 변경

* HTML과 Vue.js에서 인라인 스타일은 권장되는 방식은 아님

CSS 클래스 바인딩

<head>
    <meta charset="utf-8">
    <title>05-06</title>
    <style>
        .set1 {
            background-color: aqua;
            color: purple;
        }
        
        .set2 {
            text-align: center;
            width: 120px;
        }
        
        .set3 {
            border: sandybrown dashed 1px;
        }
    </style>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="example">
        <button id="btn1" v-bind:class="mystyle">버튼1</button>
        <p>
            <input type="checkbox" v-model="mystyle.set1" value="true" />set1 디자인<br/>
            <input type="checkbox" v-model="mystyle.set2" value="true" />set2 디자인<br/>
            <input type="checkbox" v-model="mystyle.set3" value="true" />set3 디자인<br/>
        </P>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#example",
            data: {
                mystyle: {
                    set1: false,
                    set2: false,
                    set3: false
                }
            }
        })
    </script>
</body>

v-bind:class을 이용한 클래스 적용 시에는 boolean 값 사용

true일 시 해당 css 클래스 추가 / false일 시 제외

계산형 속성, 메서드를 이용한 스타일 적용

<head>
    <meta charset="utf-8">
    <title>05-07</title>
    <style>
        .score {
            border: solid 1px black;
        }
        
        .warning {
            background-color: orange;
            color: purple;
        }
        
        .warnimage {
            width: 18px;
            height: 18px;
            top: 5px;
            position: relative;
        }
    </style>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="example">
        <div>
            <p>1부터 100까지만 입력가능합니다.</p>
            <div>
                점수 : <input type="text" class="score" v-model.number="score" v-bind:class="info" />
                <img src="images/error.png" class="warnimage" v-show="info.warning" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#example",
            data: {
                score: 0
            },
            computed: {
                info: function() {
                    if (this.score >= 1 && this.score <= 100)
                        return {
                            warning: false
                        };
                    else
                        return {
                            warning: true
                        };
                }
            }
        })
    </script>
</body>

계산형 속성을 사용해 올바른 범위에 포함되지 않을 때 CSS 적용

input 요소에서 입력한 값은 score 데이터 속성에 설정되고, info 계산형 속성에 의해 warning 클래스 지정 여부가 결정됨

컴포넌트에서의 스타일 적용

컴포넌트 단위에 대해서도 클래스와 스타일을 적용할 수있다.

<head>
    <meta charset="utf-8">
    <title>05-08</title>
    <style>
        .boxcolor {
            background-color: orange;
        }
        
        .center {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid gray;
        }
    </style>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="example">
        <center-box v-bind:class="boxstyle"></center-box>
    </div>
    <script type="text/javascript">
        Vue.component('center-box', {
            template: '<div class="center">중앙에 위치</div>'
        })
        var vm = new Vue({
            el: "#example",
            data: {
                boxstyle: {
                    boxcolor: true
                }
            }
        })
    </script>
</body>