애트리뷰트 팝업 창 띄우기

애트리뷰트 이용해서 레이어 팝업창 띄우기 팝업창 띄우기 소스 팝업1 팝업2 팝업 팝업 닫기 팝업 띄우기 팝업 2 팝업 닫기 팝업 띄우기 2 /* 팝업 */ .pop {height:100%; height:100%; min-height:100%;} .popup-wrap {display:none; width:100%; background:#ccc;} /* 팝업 공통 */ .popup-wrap .popup-area { background:#fff; position:fixed; left:50%; top:50%; z-index:2; transform: translate(-50%, -50%);} .popup-wrap .pop-title {padding:15px 30px 20px; background:#685e52; ..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 11. 1.
• textsms

jQuery 폐쇄형 슬라이드

jQuery 슬라이드 웹사이트에서 제이쿼리를 이용한 슬라이드폐쇄형으로 작업되었다. 즉, 이전, 다음 이미지가 보이지 않는 오로지 중앙에 이미지가 나올때 적합한 소스이다.오픈된 슬라이드 메뉴가 아닌 폐쇄형 슬라이드다. 실행된 이미지 이전 다음 0000 1111 2222 3333 .wrap {width:400px; margin:0 auto; } .wrap .sliderWrap {width:400px; height:200px;overflow:hidden;} .wrap .slider:after {display:block; content:""; clear:both;} .wrap .slider {height:100%; width:1600px; position:relative;} .wrap .box {float:le..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 9. 18.
• textsms

jQuery 실행 파일의 위치

script 파일을 문서 하단에 배치하는 이유 스크립트 파일을 head에 혹은 body맨 하단에 배치 하는 이유 : 하단 이미지 참고 하단에 실행문을 보면 제이쿼리에서 제공하는 동일한 문법이다. 문장을 해석하면 Document가 준비가 되면 실행을 하라는 문구이다. 이 문장은 상단의 이미지에서 상단 배치에 해당하는 부분으로말 그대로 문서가 준비가 되면 스크립트를 실행 하라는 말이 된다. $(function(){ // 실행문 }); $(document).ready(function(){ // 실행문 }); 그렇다면 하단에 배치 할 경우 하단의 문법으로 코딩이 가능한 형태가 된다.이 말은 상단의 문법도 가능하지만, Document가 로딩이 되면서 순차적으로 스크립트의 영역에 도달했을때 실행을 하게된다.(fun..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 9. 3.
• textsms

노드트리는 무엇인가

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

• format_list_bulleted 개발연습막쓰기/HTML
• · 2018. 7. 4.
• textsms

HTML 문서

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

• format_list_bulleted 개발연습막쓰기/HTML
• · 2018. 7. 4.
• textsms

이미지 체인지 관련

이미지 체인지 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/..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 5. 16.
• textsms