보안 전공생의 공부

[[앞 게시물 이어서 materialize의 기능들에 대해 설명하는 글 ! ]] ● Navbar 앞에서 navbar 컴포넌트(웹사이트 탐색에 이용) 보여준 기본 구조이다. "hide-on-med-and-down"이라는 클래스의 속성 -> 태블릿 이하의 화면 크기에서는 보이지 않도록 하라 스마트폰에서 navbar을 이용하려면 >> a 태그의 data-target 속성 이용해 id 속성값을 설정하고, class 속성에 "sidenav-trigger" 설정 [index.html] 수이니의 여행 menu {{link.text}} {{link.text}} 1) index.html파일 - head 태그 : Google Icon Font, materialize.css, fontawesome.com 링크 추가 2) i..

●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..