checkbox 다른이미지로 교체 123 input#consultOk{display: none;} label{display: block;background: url("../img/check_off.png") no-repeat 95% center;background-size: 18px;text-align: right;padding-right: 15%;font-size: 14px;} input:checked + label{background: url("../img/check_on.png") no-repeat 95% center;background-size: 18px;}Colored by Color Scriptercs 퍼블리싱/CSS 9년 전
Swiper Interaction 스와이프를 구현하는 플러그인에는 여러가지가 있는데 내비게이터의 인터랙션과 컨텐츠의 인터랙션의 연동이 내 생각만큼 제대로 구현되는 플러그인이 없어서 2가지의 플러그인을 섞어야했다.Swiper는 간단하면서도 효과적이다.Swipegory는 살짝 복잡하지만서도 그만큼의 부드러운 인터랙션이 있다. 나름대로 코딩을 올려보지만 정리는 잘 되지 않는다...#1 . 자바스크립트123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101.. 퍼블리싱/TIP 9년 전
swipe #. HTML12345678910111213141516171819202122232425262728 소개 시설 식단 서비스금액 프로그램 환불규정 가이드 스케쥴 Colored by Color Scriptercs #. CSS12345678910111213141516171819202122232425262728293031323334353637383940414243444546#bodywrap{background-color: #fff;overflow: hidden;position: relative;height:738px;width:100%;transition:height 1s;transform:translate3d(0,0,0);}header nav ul{width:100%;height:50px;background-c.. 퍼블리싱/TIP 9년 전
outerWidth() , outerHeight() p.outerWidth() - margin 값을 제외한 (패딩,보더값을 포함한) 넓이를 구함. p.outerWidth(true) - margin 값을 포함한 넓이를 구함. p.outerHeight() - margin 값을 제외한 (패딩, 보더값을 포함한) 높이를 구함. p.outerHeight(true) - margin 값을 포함한 높이를 구함 퍼블리싱/TIP 9년 전
a 태그 클릭이벤트 막기 12345$('nav a').on('click',function(e)){ e.preventDefault(); }Colored by Color Scriptercs e.preventDefault() 는 a태그와 관련이 있다.a태그의 기능은 2가지click이벤트href의 경로이동위 2가지를 항상 실행한다.경로를 지정하지 않고 #으로 해두면 클릭 시 페이지 상단으로 이동함.그 상단으로의 이동을 막기위해 e.preventDefault()를 사용하는 것. e.stopPropagation()a의 onclick을 실행했을 때 부모로의 확산을 막아주는 것.a의 부모태그는 li , ul이 있다.* a를 클릭했을 때의 반응 a의 onclick실행li의 onclick실행ul의 onclick실행만약 ul에 onclick이벤트가.. 퍼블리싱/TIP 9년 전
tab css #1. HTML1234 오늘예정 전체Colored by Color Scriptercs #2. CSS123456789101112.tab-active{ border:1px solid #eaeaea; border-bottom:1px solid white; border-radius: 3px 3px 0 0; color:#2FADE7; border-top:3px solid #2fade7;}.tab-non-active{ border:none; color:#eaeaea; border-top:3px solid white;}cs #3. Result 퍼블리싱/CSS 9년 전
box-sizing 1234567-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; cs - 해당 박스의 padding값과 border값을 width에 포함시키지 않는다. 퍼블리싱/CSS 9년 전
