Blog Content

노드트리란 ? HTML의 문서의 정보는 노드트리라는 계층적 구조에 저장이 되는데 이러한 노드트리는 (node tree) 노드들의 집합이고, 노드간의 관계를 보여준다. 노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다. html은 크게 head와 body의 요소 노드가 있다.노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재한다. 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가지는데. 모든 요소 노드는 자식 노드(child node)를 가질 수 있다. 형제 노드(sibling node)..

HTML 이란 ? HTML 이란 Hyper Text Markup Language 의 약자로써 웹 페이지를 만들기 위한 언어로 웹 브라우저에서 동작하는 가장 기본적인 프로그래밍 언어의 한 종류이다. Document HTML 문서를 선언한것이다.HTML은 시작과 끝이 있고, 그 끝은 로 닫아주며, 물론 예외적으로 싱글 태그도 있다.head 는 말 그대로 문서의 두뇌의 역활을 한다고 볼수 있다. 사이에는 중요한 정보들을 담고 있으며,현재 만들어진 문서의 meta 태그보다 많은 태그 javascript / css 등 여러가지를 선언한다. 위 코드에 선언된 meta태그만 간략하게 설명 해보고자 한다. UTF-8 유니코드UTF-8은 유니코드이다. 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩 이다. 다만 ..

이미지 체인지 jQuery 이미지 체인지 관련 jQuery 왜 만들었는지 모르겠는데... 무슨생각으로 만들었지..그냥 회사에서 뭔가 하고 있다가 만들었는데 .... 그래도 코드만 덩그러니 있으면 뭔가 보기 싫으니..살짝 수정을 다시 해본다.. /* HTML */ // 이미지 체인지 function main_change(){ var change_img = $ (".main_visual .swiper-wrapper .swiper-slide img"); // var ui_width = window.innerWidth; // 브라우저 width 값 var allWidth = window.innerWidth; if ( allWidth < 1000 ) { change_img.attr('src', 'resource/..

제이쿼리 슬라이드메뉴 제이쿼리 슬라이드 메뉴를 한번 만들어 보았습니다..if문과 jQuery animate를 이용해서 메뉴를 열렸다 펼쳤다 하는 슬라이드 메뉴입니다. JS 코드를 설명드리자면 ..버튼을 클릭 하면 만약 num이 0보다 크면 위에 있는 animate를 실행그렇지 않으면 아래 있는 animate를 실행.. See the Pen XEbZEL by uicode (@uicode) on CodePen. 최초 제이쿼리 슬라이드 메뉴 실행화면 닫힘버튼을 눌렀을때 슬라이드 메뉴가 사라지면서 메뉴명이열림 버튼으로 변경됩니다. 코드를 보시면 아시겠지만 width 값을 변수에 담고 그 값을호출해오는 방식을 사용하였는데 .. 클릭했을때 좌표가 ( 마이너스 - )값이 들어가니저는 당연히 그러면 if문의 조건 값이..

jQuery Images Gallery 이번 포스팅에서는 이미지 갤러리를 만들어볼까 합니다.쇼핑몰이나 이런곳에서 자주 등장하는 이미지 갤러리 인데요. 자 진행하기에 앞서 이미지를 3장 저는 준비 했는데요이미지 갤러리이다 보니 이미지는 필수 겠죠? 저는 한효주씨를 모델로 jQuery Gallery를 만들어 보았는데요.생각보다 어렵지 않습니다. See the Pen JpKmMR by uicode (@uicode) on CodePen. 네 상단의 코드를 보시면 .. 원래는 RESULT 부분에 결과값이 나오게 되어있는데요이부분이 사정없이 깨지는 모습을 볼 수 있을거에요^^ 왜냐면... 제가 이미지를 담아야 하는 공간이 없기 때문에저 부분은 직접 이미지를 만들어서 넣어보시기 바랍니다. 아래는 제가 만든 이미지 갤..

Accordion MENU-드롭다운 한것도 없이 벌써 월요일이네요~ 날씨도 많이 춥구요~ 오늘은 일어나서 무엇을 할까 고민하다.. 아코디언 메뉴를 생각했습니다. 웹사이트에서 항상 들어가는 아코디언메뉴 생각보다 어렵거나 복잡하진 않은데요~ 보통 QNA에서 많이 사용하는 Accordion menu 를 제작해 보았습니다. See the Pen bLpmmy by uicode (@uicode) on CodePen. 간략한 설명을 드리자면... 위에 코드를 보시면 우선 var에 버튼을 만들어서 담았습니다. 즉, 클릭해야 할 위치를 변수에 넣어두었습니다. 그리고 버튼을 클릭했을때 if 조건문이 들어갔습니다. 만약에 this 즉, 나 자신에게 클래스 on가 있는지 없는지를 hasClass가 체크를 합니다. 체크를 마치..

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

JQUERY-UI-DATEPICKER 제이쿼리 유아이 데이터 피커 정리 See the Pen JQUERY-UI-DATEPICKER by uicode (@uicode) on CodePen.

폰트사이즈 확장 및 축소 컨텐츠 본문에서 폰트 사이즈 확장 및 축소 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..