web sprit

그대로의 radio 버튼을 사용하여도 되지만작업을 하다보면 커스터마이징 해야하는 경우가 있다. 그때를 대비해서 미리 준비해 봅니다. 아래와 같이 적용해 줍니다. HTML12345678910111213141516171819 라디오버튼1 라디오버튼2 라디오버튼3 Colored by Color Scriptercs CSS12345678.radio-list{width:300px; margin:20px auto 0;}.radio-list li{position:relative; font-size:13px; color:#000; border:1px solid #e2e2e2; background:#fbfbfb; padding:6px 10px; margin-bottom:-1px;}.radio-list li.active{f..

jQuery 다운 URL : http://jquery.com/ 위 URL을 들어가시면 jQuery 사이트가 나옵니다. 메뉴에서 Download 를 눌러 들어 갑니다. 실제 적용하는 소스는 압축버전을 사용하시고 그에대한 내용을 보시고 싶으시다면 코드정리버전으로 확인하시면 되겠습니다. jQuery 1.x & jQuery 2.x 차이점 jQuery 1.x 버전은 하위 브라우저의 호환성을 가지고 있으나 jQuery 2.x 버전은 IE6/7/8 을 지원하지 않습니다. 간단하게 장·단점을 따지자면 jQuery 1.x 버전이 호환성을 보장하는 대신 그만큼 jQuery 2.x 버전보다 소스량 즉 용량이 큽니다. 그렇다면 당연히 jQuery 2.x 버전은 용량이 작겠죠. 불러오는 속도도 차이가 날겁니다. 체감적으로 많은..

어느 블로그나 홈페이지를 들어가면 상단 영역이라던가 상단 메뉴부분이 스크롤시 상단에 붙어 있는듯한 UI를 많이 보았을 것입니다. 그 기능은 CSS 와 j-Query 를 이용하여 구현해 보았습니다. 제가 만든 소스를 그대로 사용하시기 보다는 좀더 보안하여 응용형식으로 사용되었음 좋을 것 같습니다. HTML1234567891011121314151617 상단 배녀 영역 상단 고정 영역 하단 contents 영역 Colored by Color Scriptercs CSS1234567891011.wrap{}.wrap div{width:100%; text-align:center; font-size:20px; font-weight:700; color:#fff;}.top_bar_fix{position:fixed; top..

상단메뉴나 퀵메뉴를 눌럿을때 앵커설정으로 인해서 앵커의 아이디 값으로 이동하는것을 경험해 보았을 것이다.단순히 앵커의 기능으로 갑자기 정적으로 위치이동 보다는 앵커를 눌럿을때 동적으로 보다 부드럽게 이동하는 제이쿼리를 소개하려 한다. 앵커이동 제이쿼리 - *제이쿼리 부분123456789Colored by Color Scriptercs *CSS 부분12345.red{height:1000px; background:red;} .blue{height:1000px; background:blue;}.yellow{height:1000px; background:yellow;}.start_zone{background:#e7e7e7;}.start_zone a{font-size:20px; color:#666; font-we..

Colored By Color Scripter™1234567891011121314151617181920212223 topmenu 에서 가로 100%인 bg를 나타낼때 쓰면 된다.기타 그밖에 내용은 수정하여 사용.

직관적으로 사용하면 된다. class의 변경의 경우 attr이라는 메소드를 호출해야 하며, $(this).attr('class','class_name'); 처럼 이용할 수 있다. class의 추가와 삭제 또한 돌직구 처럼~ $(this).addClass("class_name"); $(this).removeClass("class_name"); 처럼 사용하면 된다. css의 기본이 숙지되어 있다면, 변경과 추가,삭제는 어떻게 다른지 아실터... (변경은 말그대로 기존의 class를 버리고 교체.) (추가는 class="class_1 class_2" 와 같은 방식..추가,삭제!) 참고로 아직 쓸일이 없어서 사용해보지는 않았지만.... 클래스의 유무를 판단해주는 .hasClass(); //반환값으로는 true는..