본문 바로가기

분류 전체보기

 (185)
[swiper] 활성화된 슬라이드에 이벤트주기
자바스크립트로 진동 기능 구현하기 진동 시작 SOS 진동 시작 진동 중지
단 1줄로 드래그하여 순서 변경하는 효과만들기 jQuery-Sortable 드래그하여 순서를 변경할 수 있는 효과를 만들었다. 이 효과는 특히 모바일에서 쉽게 볼 수 있다. jQuery UI - Sortable 를 이용하면 아주 간단하게 구현할 수 있다. 아래는 해당 예제이다. 1. HTML 제이쿼리에서 제공하는 UI이기 때문에 특정 class명을 사용하면 css가 적용된다. div, span, ul, li 등 무엇을 사용해도 상관없으며 드래그를 원하는 큰 틀에 id="sortable" 만 작성하면 된다. Item1~Item6 까지 정상적으로 드래그된다. Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 2. script 제이쿼리 작동을 위한 CDN을 넣어주고 드래그를 위한 스크립트는 단 한 줄이면 된다. //필수 //모바일의 경우 추가할것 만약 특정 ..
모바일 제스처 스와이프, CSS 두 줄로 간단하게 만들기(가로스크롤) 모바일에서 좌/우로 넘기는 제스처를 스와이프라고 한다. 흔히 모바일 쇼핑 어플등에서 스와이프 제스처를 안 써본 사람은 없을것이다. 아래는 스와이프가 되는 박스(div) 안에 넣어야 할 CSS 코드이다. 1. 스와이프 박스 만들기 스와이프를 원하는 구간에 아래의 코드를 넣는다. 가로스크롤을 만드는것이다. .box { overflow-x: auto; white-space: nowrap; } 2. 가로 스크롤 없애기 보통 모바일에서 가로스크롤이 보이지않아도 스와이프 제스처로 좌우 화면이동이 가능하다. 가로 스크롤을 안보이도록 하기위해 아래의 코드를 추가로 작성한다. .box { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar..
CSS로 스크롤바 기능만 살리고 안보이게하기 IE, Edge, Firefox, Chrome, Safari, Opera 대응법 1. IE, Edge .box { -ms-overflow-style: none; /* IE, Edge */ } 2. Firefox .box { scrollbar-width: none; /* Firefox */ } 3. Chrome, Safari, Opera .box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }
Vuejs 2 . 여러개의 Vue 인스턴스 사용하기 여러개의 Vue 인스턴스를 사용하고싶으면 아래의 예제처럼 id를 el에 넣어주면 서로 연결됩니다. 아래의 예제는 #app의 버튼을 클릭하면 #app의 name이 바뀌고, #app-1의 버튼을 클릭하면 #app-1의 name이 바뀌는 예제입니다. 그런데 만약 #app의 버튼을 클릭했을때 #app-1의 name을 바꾸고싶다면 어떻게하면 될까? 아래의 예제처럼 Vue 인스턴스를 변수에 담아주면됩니다. 아래의 예제는 Vue 인스턴스를 변수에 담아 #app의 버튼을 클릭하면 #app-1의 name이 바뀌고, #app-1의 버튼을 클릭하면 #app의 name이 바뀌는 예제입니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!
Vuejs 2 . v-for 리스트 렌더링 1. v-for v-for는 반복해야할때 사용합니다. 아래의 예제는 v-for를 사용하여 반복한 예제입니다. 데이터에 people이라는 배열을 만들어 값을 넣어주었습니다. 이것을 {{ people[0].name }} {{ people[0].age }}를 사용하여 웹브라우저에 출력해주었습니다. 하지만 이렇게하면 데이터가 추가될 때 마다 계속 입력을 해줘야하는 번거로움이 있습니다. 그래서 이것을 v-for를 사용하여 반복문을 만들어주면 데이터가 추가되어도 알아서 출력해냅니다. person은 오브젝트이고 people은 데이터에 있는 배열을 의미합니다. in 대신에 of를 넣어도 상관없습니다. 만약 인덱스(순번정도의 의미)가 필요하다면 아래처럼 작성할 수도 있습니다. 2. key Vue에서 개별 DOM 노드들을..
Vuejs 2 . v-if 와 v-show 1. v-if v-if 속성은 이름처럼 vue에서의 조건 속성입니다. v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. 아래의 예제는 버튼을 클릭하면 True가 False로 바뀌는 예제입니다. 먼저 버튼에 클릭이벤트를 넣어주고 메소드에 함수를 설정합니다. this.show = !this.show; --> 토글 효과, 버튼을 클릭할때마다 true와 false가 교차됨 this.show = false; --> 버튼을 클릭하면 false되고 버튼을 다시 클릭해도 이미 false이기 때문에 변화가 없음 데이터에 show를 true로 설정했으므로 처음 웹 브라우저에서는 3개가 모두 보일것입니다. 버튼을 누르면 false로 바뀌면..

티스토리툴바