css파일까지 추가되어서 3개의 파일을 생성
index2.html
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div id="app">
<div id="product">
<div class="product-image">
<img v-bind:src="image" v-bind:alt="altText" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
<script src="index2.js"></script>
</body>
</html>index2.js
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
// 파일 다운 받아서 할 경우
//, image: "./assets/vmSocks-green-onsdfWhite.jpg"
, image: "https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg"
, altText : "이미지를 표시할 수 없습니다."
}
});index2.css
body {
font-family: tahoma;
color:#282828;
margin: 0px;
}
.nav-bar {
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
height: 60px;
margin-bottom: 15px;
}
.product {
display: flex;
flex-flow: wrap;
padding: 1rem;
}
img {
border: 1px solid #d8d8d8;
width: 70%;
margin: 40px;
box-shadow: 0px .5px 1px #d8d8d8;
}
.product-image {
width: 80%;
}
.product-image,
.product-info {
margin-top: 10px;
width: 50%;
}
.color-box {
width: 40px;
height: 40px;
margin-top: 5px;
}
.cart {
margin-right: 25px;
float: right;
border: 1px solid #d8d8d8;
padding: 5px 20px;
}
button {
margin-top: 30px;
border: none;
background-color: #1E95EA;
color: white;
height: 40px;
width: 100px;
font-size: 14px;
}
.disabledButton {
background-color: #d8d8d8;
}
.review-form {
width: 400px;
padding: 20px;
margin: 40px;
border: 1px solid #d8d8d8;
}
input {
width: 100%;
height: 25px;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 60px;
}
.tab {
margin-left: 20px;
cursor: pointer;
}
.activeTab {
color: #16C0B0;
text-decoration: underline;
}
실행 결과
css 파일이 없어도 결과는 확인 하실수 있습니다. 다만 이미지 사이즈가 커 한 화면에 보이지 않지만 결과는 잘 표시됩니다.
'언어 > vue' 카테고리의 다른 글
| vue Invalid Host header (0) | 2020.08.12 |
|---|---|
| [vue - 4] 배열 변수 값 사용 (0) | 2020.08.04 |
| [vue - 3] if - else 적용 (0) | 2020.08.04 |
| [vue -1] Hello Vue! 표시하기 (0) | 2020.08.04 |
