Java Script 썸네일형 리스트형 [java script] Vue.js 속성(v-bind, a, class) 1. v-bind : 요소의 속성을 데이터로 지정합니다. ◎ image 속성 예제 이미지 속성을 지정하는 예제 직접지정 v-bind로 지정 v-bind 생략 이미지 변수를 만들어 v-bind:src="프로퍼티명"으로 지정할 수 있습니다. 또한, v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ url 속성 예제 링크를 직접지정 링크를 v-bind로 지정 링크를 v-bind로 생략 지정 url 변수를 만들어 v-bind:href="프로퍼티명"으로 지정할 수 있습니다. 이미지와 동일하게 v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ align 속성 예제 align 지정 예제 우측정렬 직접 지정 우측정렬을 v-bind로 지정 우측정렬을 v-bind 없이 지정 align 변수.. 더보기 [java script] Vue.js 입문 데이터 표시(new Vue, v-text, v-html) 먼저 Vue의 기본 코드를 살펴보겠습니다!! 1. Vue 인스턴스 만들기 : new Vue, el, data 아래와 같이 Script에 작성하면 Vue를 사용할 수 있습니다. new Vue({Vue 인스턴스 내용}) 또는 var 변수명 = new Vue({Vue 인스턴스 내용}) 보통 Vue의 구성은 아래를 참고하시면 됩니다! new Vue({ el : 어느 HTML 요소를 연결할 것인가 data : 어떤 데이터인가 methods : 어떤 처리를 하는가 computed : 어떤 데이터를 사용하여 계산하는가 watch : 어느 데이터를 감시하는가 }) 2. 데이터 표시 방법 데이터를 표시할 때는 이중 중괄호 {{ 데이터 }} 즉 머스태시(Mustache) 태그로 표시합니다. 머스태시 : 콧수염 더블쿼테이션.. 더보기 [java script] Vue.js 입문 start 1. Vue.js란 : 자바스크립트 프레임워크 중 하나입니다. ▷ Vue.js : 데이터와 뷰를 연결해주는 역할 ◎ 프레임워크 : 복잡한 내용을 간단히 미리 규격화/모듈화 해둔 도구 ▷ 프레임워크 사용시 : 기존 자바 스크립트에서 사용할 수 없던 문법이나 입력 방식들을 사용할 수 있게 되고, 타 플러그인을 통해 UI 컴포넌트나 스타일, 추가 기능 등을 불러 사용하는 것도 가능해집니다. ▷ 자바스크립트 프레임워크 종류 : Vue/React/Angular ▷ SPA(Single Page Application)은 한 페이지에서 모든 컨텐츠를 보여주는 웹사이트입니다. ▷ 이때, 동적인 페이지를 쉽게 만들어주는 기술이 Vue.js입니다. jQuery보다 간단합니다. ▷ 아래의 홈페이지는 Vue.js를 통한 예제 .. 더보기 [java script] DOM 노드 추가, 삭제 연습 문제 문제 1) 문제 파일을 열면 다음과 같이 항목 5개가 나열되어 있습니다. 힌트를 참고하여 항목 앞에 있는 체크 표시를 누르면 항목 텍스트의 글자가 회색(#ccc)으로 바뀌면서 가로줄이 그려지는 소스를 작성하세요. 할 일 목록 ✓할 일 1 ✓할 일 2 ✓할 일 3 ✓할 일 4 ✓할 일 5 최종 결과는 1번 클릭시 원하는 스타일로 지정했고 동일한 것을 1번 더 누르면 원상태로 복귀하도록 했습니다. 이때, querySelectorAll을 사용하면 원하는 노드를 다 배열로 지정합니다. 그 배열을 반복문을 통해 click하면 clicks라는 함수가 실행 되도록 설정했습니다. 클릭 함수에는 this를 사용해 해당 배열만 동작하도록 만들었습니다. this라는 것은.. 더보기 [java script] addEventListener의 이벤트 사용 예시 ◎ addEventListener 사용 예시 상품 정보 원산지 : 에디오피아 지 역 : 이르가체프 코체레 농 장 : 게뎁 고 도 : 1,950 ~ 2,000 m 품 종 : 지역 토착종 가공법 : 워시드 상세 설명 2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다. 커피의 풍미 은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득. 1. '상품 정보'에 마우스를 올리면 글자색(red), 글자사이즈(2.0em), 배경색(blue)을 변경하고 마우스를 내리면 글자색(blue),.. 더보기 [java script] addEventListener의 이벤트 종류 ◎ UI 이벤트 NO Event Description 1 load 웹 페이지나 스크립트의 로드가 완료되었을 때 2 unload 웹 페이지가 언로드 될 때 (주로 새로운 페이지를 요청한 경우) 3 error 브라우저가 자바 스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 4 resize 브라우저 창의 크기를 조절했을 때 5 scroll 사용자가 페이지를 위 아래로 스크롤 할 때 6 select 텍스트를 선택했을 때 ◎ Keyboard 이벤트 NO Event Description 1 keydown 키를 누르고 있을 때 2 keyup 누르고 있던 키를 뗄 때 3 keypress 키를 누르고 뗐을 때 4 keyCode 키 코드 값 ◎ Mouse 이벤트 NO Event Description 1 clic.. 더보기 [java script] 문서 객체 모델(DOM) 1. 문서 객체 모델이란? ◎ 자바스크립트를 이용해 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법입니다. ▷ 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다. ex) 웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체, h1의 글자는 text 객체입니다. ◎ DOM 트리 ▷ 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것입니다. ▷ 나무 형태가 되기 때문에 "DOM 트리"라고 합니다. ▷ 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목입니다. ▷ 루트 노드(root node) : DOM 트리의 시작 부분(html) ◎ DOM 구성 원칙 ▷ 모든 HTML 태그는 요소(element) 노드 ▷ 웹 .. 더보기 [java script] 브라우저 관련 객체(window, navigator, location) 1. 브라우저 관련 객체의 계층 구조 no 종류 설명 1 window 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있습니다. 2 document 웹 문서마다 하나씩 있으며 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨 있습니다. 3 navigator 현재 사용하는 브라우저의 정보가 들어 있습니다. 4 history 현재 창에서 사용자의 방문 기록을 저장합니다. 5 location 현재 페이지의 URL 정보가 담겨 있습니다. 6 screen 현재 사용하는 화면 정보를 다룹니다. 2. window ◎ window 객체의 프로퍼티 ▷ 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용합니다. No 종류 설명 1 document 브라우저 창에 표시된.. 더보기 이전 1 2 3 다음
