Blog Content

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

HTML 워크리스트1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651..

HTML 푸터 고정 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 New Document html, body {margin:0; padding:0; height:100%;} #wrap {min-height:100%; position:relative;} #header { background:#ff0; padding:10px; } #container {padding:10px; padding-bottom:60px;} /* contianer padding-bottom px*/ #footer { position:absolute; bottom:0; width:100%; height:60px; backgroun..

CSS animate 사이트 https://daneden.github.io/animate.css/

출처http://zetawiki.com/wiki/JQuery_%EC%85%80%EB%A0%89%ED%84%B0 셀렉터 예시 설명 id, class, tag로 선택 ★★★ * $("*") 모든 요소들 #id $("#lastname") id가 "lastname"인 요소 .class $(".intro") 클래스가 "intro"인 요소들 .class,.class $(".intro,.demo") 클래스가 "intro" 또는 "demo"인 요소들 element $("p") 요소들 el1,el2,el3 $("h1,div,p") , and 요소들 처음, 마지막, 홀수, 짝수 선택 ★ :first $("p:first") 첫번째 요소 :last $("p:last") 마지막 요소 :odd $("tr:odd") 홀수번째 요소..

DOM Tree 모든 엘리먼트는 HTMLElement의 자식이다. HTMLElement는Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다.이러한 관계를 DOM Tree 라고 한다.

한글 Lorem Ipsum 디자인을 할때 더미텍스트로 사용할수있는 사이트 http://guny.kr/stuff/klorem/#/p-html

index() / text() / html() 매서드 HTML 123456789101112131415 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 메뉴10 jQuery 12345678$(function(){ /* index() / text() / html() 매서드 */ $('#gnb>li').on('click', function(){ var i = $(this).index(); $('.txt').text(i); $('.box').html(""+i+"") });});