분류 전체보기 (157) 썸네일형 리스트형 Transition (2) Transition 예제 (2) DOCTYPE html> Step01_Transition2.html .box{ width: 100px; height: 100px; border: 1px solid red; } #one{ transition: all 5s ease-in-out; /* 처음에 천천히 */ } #two{ transition: all 5s ease-out; /* 나중에 천천히 */ } #three{ transition: all 5s linear; /* 계속 일정하게 */ } .margin{ margin-left: 800px; } transition timing function 테스트 start document.querySelector("#startBtn").addEventListener("clic.. Transition (1) transition 란? css가 변경되는 중간 과정을 보여주기 위한 css 속성이다. DOCTYPE html> Step01_Transition.html .box{ width: 100px; height: 100px; border: 1px solid red; cursor: pointer; /* css 가 변경되는 중간 과정을 보여주기 위한 css 속성*/ /* transition: all 1s linear; */ transition-property: all; transition-duration: 1s; transition-timing-function: linear; } .box:hover { width: 200px; height: 200px; border-width: 10px; margin-left: 10.. [Vue.js] component (3) component 예제3) Vue.component 으로 정의하여 재사용 가능한 컴포넌트를 전역으로 정의할 수 있다. div의 id 를 다르게 지정해도 my-component 를 사용 할 수 있다. 각 id 마다 다른 greet의 값을 입력하여 사용한다. [Vue.js] component (2) component 예제2) 위 예제에서는 friends-component 에서 friends, friends2 라는 배열의 값을 받아와서 사용한다. 친구 목록에서는 데이터 안에 friends 배열의 값이 나오고 동물 친구 목록에서는 데이터 안에 friends2 배열의 값이 나타난다. [Vue.js] component (1) component 예제1) component 라는 속성을 이용하면 template에 정의한 요소를 불러올 수 있다. 컴포넌트에 my-component라는 컴포넌트를 정의하고 으로 사용한다. 컴포넌트에서 정의한 박스 요소가 생성된것을 볼 수 있다. your-component에서는 요소안에 greet 라는 값을 받아서 your-component v-bind:greet(데이터명)="입력할 값" 으로 사용한다. 두번째 greet에서는 msg라는 값을 사용하여 위에 input 값에 입력한 텍스트가 나타난다. input 에 입력한 데이터가 값이 박스안의 텍스트에 나타난다. [Vue.js] for (2) for 예제2) li 요소에 msgs의 배열안에 v-onlick=clicked 버튼을 누르면 input 요소의 값을 추가하는 기능을 갖고v-on:click=deleteItem 버튼을 누르면 배열에 추가된 아이템이 지워지는 기능을 갖는 코드이다. input 칸에 텍스트를 입력하고 추가 버튼을 누르면 li 요소에 입력한 텍스트가 출력된다. 추가된 li 요소에 X버튼을 누르면 추가된 li요소가 사라진다. [Vue.js] for (1) for 예제1) v-for 속성은 배열이나 오브젝트의 값을 반복문처럼 순서대로 출력하는 기능을 갖고 있다. v-for="item in "배열, 오브젝트" 값을 써서 사용 한다. 위 코드의 웹브라우저 출력 결과이다. [Vue.js] if (1) if 예제1) v-if 속성은 문서 객체를 생성할지 없앨지를 결정한다 ( 추가, 제거) v-show 속성은 문서 객체를 보여줄지 숨길지를 결정한다 box3 는 체크박스를 클릭하면 true, false 값에 따라서 문서객체가 추가/제거 되는 속성의 코드이고box6 는 체크박스를 클릭하면 true, false 값에 따라서 문서객체가 눈에 보일지 말지를 결정하는 코드이다. 체크박스가 해제 상태인경우에는 box3의 div 요소가 아예 나타나지 않지만 box6 같은경우엔 코드로 보면 보이지만 실제 구현된 페이지에서만 나타나지 않는다. 체크박스를 클릭하여 isMake, isShow 값이 true 로 바뀌니 box3 요소의 코드가 나타나고 화면상에도 정상 구현되었고 box6 요소는 style 속성의 display n.. 이전 1 2 3 4 5 ··· 20 다음
