스터디/프론트엔드 (5) 썸네일형 리스트형 [JQuery] 이벤트 중복 실행 방지 버튼을 더블 클릭 했을 때 해당 이벤트가 여러 번 실행되는 문제가 발생할 때가 존재한다. 아래와 같은 jQuery 로직을 사용하면 해당 이벤트를 한번만 실행되게 처리할 수 있다. $("#id").off('click').on('click', function() { alert('클릭'); }); 유의사항 중복 실행을 방지하는 것이지 한번 실행되고 이벤트가 사라지는 것은 아님! [html] Apple Mobile Web App Tag 유효성 : iOS에서 사용할 수 있습니다. 안드로이드의 Add to Home Screen 기능은 단지 북마크를 화면에 추가하는 것일 뿐 추가적인 기능은 제공하지 않는다. 하지만 아이폰 사파리에서 웹 페이지에 대해 이렇게 + 를 눌러 “홈 화면에 추가”후 실행하면 iPhone 에서는 Mobile Web App 으로 동작하게 된다. 이때 Web App 의 지원을 위해 모바일 사파리는 몇 가지 태그를 지원한다. 모바일 웹 앱 개발자는 head 섹션에 아래의 4가지 태그를 추가할 수 있다. 이렇게 4가지 기능을 지원함으로써 HTML5 기반의 Local 또는 Online Web Application 들이 마치 Native App 처럼 실행하는 효과를 지원할 수 있다. 태그 설명 [Vue.js] 시작 ! Vue.js란? 2013년 12월에 UI의 빠른 개발 웹 화면 작성에 최적화된 프레임워크 최근 가장 빠르게 발전하고 확산되고 있는 자바스크립트 프레임워크 특징 대단히 유연하고 가볍다 SPA(Single Page Application) 아키텍쳐 구성을 위한 라우터 기능도 에코시스템에서 지원 전형적인 MVVM(Model – View – ViewMode) 패턴 가상 DOM 지원으로 빠른 UI 렌더링 속도 개발환경설정 Node.js https://nodejs.org/ko npm Visual Studio Code 크롬 브라우저 + Vue.js devtools Vue-Cli npm install –g vue-cli vue list simple browserify browserify-si.. [Vue.js] 2 vs 3 data, method ,computed 간단한 문법 정리 Vue 2 Name: {{ name }} Amount: {{ amount }} Increase Capacity Vue 3 Name: {{ name }} Amount: {{ amount }} Increase Capacity import import { ref } from "vue"; Composition API는 Vue의 핵심 기능들을 전부 import하는 대신 직접 선택하여 import할 수 있도록 해줍니다. 사용하기 위한 핵심 기능을 우선 import합니다. setup 메소드 setup() { const name = ref('Name'); const amount = ref(3); function increaseAmount() { amount.v.. SASS[SCSS] 설치 및 활용 1. Sass(syntactically awesome stylesheets, 사스) : Sass는종속형 시트(CSS)로해석및컴파일되는스크립트 언어입니다. (설치방법) 2. sass vs scss 차이 : {}(중괄호)와 ;(세미콜론)의 유무 SCSS 스타일: - SCSS의 문법이 css의 문법과 비슷하여 가독성이 좋음 $color: #3bbfce; $margin: 16px; .content-navigation { border-color: $color; color: darken($color, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $color; } SASS 스타일: $color: #3bbfce $margin: 1.. 이전 1 다음
