EFFECT (2) 썸네일형 리스트형 단 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을 넣어주고 드래그를 위한 스크립트는 단 한 줄이면 된다. //필수 //모바일의 경우 추가할것 만약 특정 .. [Hweb] Tab menu 기본 See the Pen Untitled by inyoung2200 (@inyoung2200) on CodePen. 1. HTML AWS AZURE GCP tab02 tab03 탭컨텐츠의 클래스 명을 통일해도 상관없다. 하지만 탭 컨텐츠마다 display가 다를수 있기 때문에 css를 더 자유롭게 쓰기 위해서 분리시켰다. 2. CSS .tab_cont1 { display: none; } .tab_cont2 { display: none; } .tab_cont3 { display: none; } .tab_cont1.on { display: grid; } .tab_cont2.on { display: block; } .tab_cont3.on { display: block; } 3. script $(function .. 이전 1 다음
