Blog Content

슬라이더를 사용할때 bxslider도 있고 slick도 있고 한데..이번에 써보면서 느낀건데 .. 이녀석이 가장 괜찮은듯모바일에서 여러가지 슬라이더 들이 있긴 한데 이녀석이 가장 쓸만한것 같다. http://idangero.us/swiper/

플러그인http://leafo.net/sticky-kit/#examples 참고 http://bong8nim.com/post/programming/javascript/sticky-sidebar-jquery-plugin-sticky-kit-js/

vs code 마켓플레이스 VS Code 마켓 플레이스 유용한 설치파일 auto-close-tagauto-rename-tag code-settings-syncfilenamecompletehtml-css-class-completionlocal-history beautify - HTML 파일을 정리해준다 (전체선택 후 문서서식누르면 정리된다.)

jQuery 퀵 버튼 01. CSS 12345678910* {margin:0; padding:0; font-size:14px;}a, a:active {color:#333; text-decoration:none;}ul li {list-style:none;}header {height:100px; background:orchid}section {height:1500px; background:burlywood}footer {height:100px; background:darkcyan}body { position:relative; }.quick {position:fixed; bottom:20px; right:20px; display:none;}.quick.on {display:block; }.quick a {di..

스크롤 따라다니는 메뉴 01. CSS 123456789/* CSS 는 입맛에 맞게 변경 */html, body {height: 100%;}#wrap {text-align:center; height:100%}header {background:orange; box-shadow: 0px 5px 10px -5px; position:relative;}header li {display:inline-block;}header li a {display:block; padding:20px;}header.fixd {position:fixed; top:0; width: calc(100% - 15px);} section {background:orchid; min-height:100%; padding:150px 0 150px}f..

텝 Animate 드롭 메뉴 01. CSS 123456789101112.tab_type02 ul:after {content:""; display: block; clear:both;}.tab_type02 li {float:left;/* width:25%;*/}.tab_type02 li a{display:block; padding:10px; border:1px solid #ccc; text-align:center;}.tab_type02 li.on a{background:#ccc; color:#fff; }.tab_type02 .box_area { position: relative;}.tab_type02 .box {border:1px solid #ccc; border-top:0; width:100%; paddi..

텝 메뉴 Animate 01. CSS 123456789101112.tab_type03 .box_area, .tab_type03 ul.menu:after {content:""; display: block; clear:both;}.tab_type03 .menu li {float:left;/* width:25%;*/}.tab_type03 .menu li a{display:block; padding:10px; border:1px solid #ccc; text-align:center;}.tab_type03 .menu li.on a{background:#ccc; color:#fff;}.tab_type03 .box_area {width:100%; height:100px; overflow:hidden;}.tab_typ..

1. 노드 찾기 - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자") - 클래스 이름으로 노드 찾기 : $(".클래스이름") - ID로 노드 찾기 : $("선택자") - 속성으로 노드 찾기 : $("[속성이름=값]") - 찾은 요소 개수 구하기 : .size() , .length - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){}); - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자") - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자") 2. 자식 노드 찾기 - 전체 자식 노드 찾기 -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents() -- 텍스트 노드 제외한 전체 자식 노드 찾기 ..

HTML CSS 2줄 말줄임 HTML CSS로 문서 컬럼 여러줄일경우에 말줄임 방법 CSS HTML 123456 텍스트 말줄임입니다. 텍스트 말줄임입니다. 텍스트 말줄임입니다. 텍스트 말줄임입니다. 텍스트 말줄임입니다. 텍스트 말줄임입니다. 텍스트 말줄임입니다. 텍스트 말줄임입니다. CSS123456789.box{width:200px;display: block;-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 2; // 컬럼개수 overflow: hidden;max-height: 36px;}

VSCODE 단축키Visua Stduio Code 단축키 f5 # 디버그 시작/정지 shift + f5 # 디버그 중지 f9 # breakpoint on/off f10 # 디버그 현재 라인 실행 f11 # 디버그 함수의 경우 함수 내부로 들어가서 실행 f12 # 함수 정의 가기 shift + f12 # 현재 함수를 참조하는 부분 보기 alt + shift + f # 포맷팅 alt + shift + i # 선택된 영역에서 각 라인의 끝에 커서 insert ctrl + ` # 통합 터미널 열기 ctrl + n # 새문서 열기 ctrl + s # 현재 문서 저장 ctrl + p # 빠른 파일 열기 ctrl + d # 선택(selection) 하며 찾기 ctrl + f2 # 현재 파일에서 전체 선택(select..