비쥬얼스튜디오코드

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

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 9. 11.
• textsms

jQuery 탑 버튼

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..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 25.
• textsms

scrollTop 이벤트

스크롤 따라다니는 메뉴 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..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 18.
• textsms

드롭 ANIMATE 텝

텝 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..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 17.
• textsms

텝 메뉴

텝 메뉴 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..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 17.
• textsms

jQuery 핵심 - 노드 다루기

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

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 12.
• textsms