Blog Content

jQuery Event 구분 일요일이네요~ 시간이 참 빨리 가는것 같습니다.현재 일을 잠시 쉬고 있어서 블로그를 열심히? 해볼려고 하고 있는데..생각처럼 쉽기자 않네요 ^^; 오늘은 jQuery Event 를 정리 해볼까 합니다.이벤트는 어떤 사건을 의미합니다. 예를들자면 버튼을 클릭, 혹은 마우스이동, 마우스 스크롤 input에 포커스등 일련의 사건들을 의미하는데요.아래 표로 정리를 해보도록 할께요~ 문서로딩 이벤트 이벤트 설명 ready 문서가 로딩되었을 때 처음 문서를 읽을때에 발생 unload 해당 문서에서 빠저나갈때에 발생 처음 페이지를 로딩할 때 혹은 문서를 빠저나갈때에 발생하는 이벤트 입니다. 키보드 이벤트 이벤트 설명 keydown 해당영역에서 키보드를 눌렀을 때 keypress 해당영역에..

jQuery 시작하기 Hello World 모든 프로그래밍은 Hello World로 시작한다는 말을 어디선가?들어본듯 합니다. 그래서 저도 거창하게 프로그래밍이랄꺼 까진 없지만..기본부터 충실하게 스터디를 하며, 블로그에 포스팅해보고자 ...거창한 꿈을 갖고... 이렇게 흠흠..... 사실 오늘은 토요일이라 넘어갈까 하다가 jQuery에 대해 블로그에 포스팅을 해보기 위해 아주 간단한 예문을 하나 준비해보았습니다.간단하게 설명을 드리자면 .. See the Pen LQGKYB by uicode (@uicode) on CodePen. 위에 소스를 보시면 var는 변수를 의미합니다. var 변수를 선언하고 변수 이름을 btn 이라는 변수명을 지정했습니다.그리고 그 변수안에 button이라는 버튼 HTML을 ..

DOM 문서 객체 모델 DOM은 HTML 문서의 요소를 제어하기 위해서 처음 지원되었는데 문서의 내용, 구조, 스타일에 접근하거나 변경하는 수단입니다. 웹 브라우저 사이에 DOM 구현이 호환되지 않음에 따라서, W3C에서 DOM 표준 규걱을 작성하게 되었습니다. DOM은 문서(Document), 객체(Object), 모델(Model)의 약자로 문서는 HTML의 전체를 의미합니다.객체는 Javascript가 HTML의 구성요소들을 독립된 것으로 인식하는것을 의미하구요.Javascript 가 문서를 해석 하는 것을 모델이라고 합니다. 이처럼 프로그램이나 스크립트가 효율적으로 문서의 내용과 구조 모양등을 접근함에있어갱신, 교체, 삭제하도록 도와줍니다. DOM Tree 돔트리 출처 - W3schools 위에 이..

폰트사이즈 확장 및 축소 컨텐츠 본문에서 폰트 사이즈 확장 및 축소 jQuery 12345678910111213141516171819var maxNum = 24; // 폰트 사이즈 var nimNum = 14; // 폰트 사이즈 $('.box-zoom .btn-zoomin').on('click', function () { // console.log(uiSize + 2) var ui_font = $(".box-news-body").css("font-size") var uiSize = Number(ui_font.replace(/[^0-9]/g,'')); if (uiSize nimNum) $('.box-news-body').css({'font-size': '-=2'}); }); 12345678910111213..

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