보안 전공생의 공부

●Button 1) Raised Button - 기본 버튼 - 클릭했을 때 물결 효과 - 버튼색 -> waves-color 형태로 정의해서 사용 button 2) Floating Button - 원형 모양 버튼 add 3) Flat Button - card, modal 내에서 사용하는 버튼 button index.html wireless cloudcloud wifiwifi app.js new Vue({ el:'#app', methods:{ showMessage($event){ ($event.target.children.length == 2) ? alert($event.target.children[0].innerText) : alert($event.target.innerText); } } }) 조건부 3항..

스마트폰, 태블릿, PC 등 다양한 장치의 각각의 화면 크기에 맞춰 적절한 페이지를 보여주기 위해 반응형(responsive)을 구현해야 한다. Materialize는 CSS, 자바스크립트, HTML로 작성된 UI라이브러리다. 이를 이용하면 장치에 따라 특정 콘텐츠는 감추고, 다른 콘텐츠는 보이도록 할 수 있으며 짧은 시간 내 반응형 애플리케이션을 만들 수 있다. ▶Materialize 설치 materializecss.com/getting-started.html Getting Started - Materialize Materialize comes in two different forms. You can select which version you want depending on your preferenc..

(출처 : wiki.plateer.com/pages/viewpage.action?pageId=8553499) 하위 컴포넌트 D에서 상위 컴포넌트 A로 통신을 위해 상위 컴포넌트 B -> 최상위 컴포넌트 -> 상위 컴포넌트 A>경로를 이용할 수 있지만, 이는 필요없는 상위 컴포넌트를 필요로 한다. 이러한 점을 보완하기 위한 방법으로 이벤트 버스를 이용한다. var eventBus = new Vue(); Vue 인스턴스를 생성하고, 이를 이용해 컴포넌트 간 통신 매개체로 쓴다. - 데이터를 전달하는 컴포넌트에서 eventBus.$emit 사용 method: { 메소드명: function(){ eventBus.$emit('이벤트명',데이터,...); } } - 데이터를 전달받는 컴포넌트에서 eventBus.$..

◆ 이벤트 : 어떤 특정 행동이 발생한 그 자체를 의미 ex) 마우스 클릭, 메뉴 선택, 등 (출처 : coding-factory.tistory.com/262 ) 특정 이벤트 발생 → 이벤트 처리 필요 ! ◆ v-on : vue.js에서 이벤트를 처리할 때 사용하는 디렉터리 이벤트 리스너 ( 이벤트를 실행하기 위한 트리거와 이벤트를 연결해주는 것 ) // 이벤트 발생하면 다른 형식과 같이 메서드 실행 X, 직접 data 프로퍼티에 정의된 값에 접근 가능 //이벤트 발생시 입력된 parameter이용해 발생하는 이벤트 처리 //@ - v-on:의 단축형태로 사용됨 위와 같은 형식으로 이벤트를 처리함 [ 첫번째 형식 - 예제 ] 직접 data 프로퍼티에 정의된 count 값에 접근 {{ count }} 추가..