게시글

배경을 클릭했을때 레이어 창이 닫히는 소스

jquery로 작업하였습니다 버튼에는 class="​c_layer_menu_btn" 선언해주고 메뉴에는 class="c_layer_menu​" 선언해줘야 합니다 menu1 //배경클릭시 메뉴가 사라지는 함수 $(document).on("click", function(e) { if (!$(e.target).closest(".c_layer_menu, .c_layer_menu_btn").length) { $(".c_layer_menu").hide(); } });

#자바스크립트 #Jquery #프론트엔드 #레이어팝업 #레이어메뉴 #클릭이벤트 #코드조각

게시글

jquery 활용해 버튼클릭시 레이어창이 뜨고 다른 배경 클릭할때 뜬 레이어 창 닫게 하는

배경클릭시 레이어 창을 닫는 방법입니다 일반적으로 레이어 창이 뜨면 배경 아무곳을 클릭하여 제거하려는 습관이 있습니다 배경을 클릭했는데 떠있는 레이어모달창이 닫히지 않으면 참 난감할때가 있습니다 이런걸 방지하기 위해 배경클릭시 모달창을 닫게 하는 이벤트를 추가해 놓으면 유용합니다

#자바스크립트 #Jquery #레이어창닫기 #모달창닫기 #배경클릭시 #배경클릭이벤트 #레이어팝업

게시글

자바스크립트 object 관려 내용을 json 형식으로 확인하는 방법

res 가 object 인경우 alert(JSON.stringify(res)) document.write(JSON.stringify(res)) php 의 var_dump() 함수와 비슷하다고 생각하면된다

#프로그램 #자바스크립트 #소스 #Jquery #JSON.stringify #object확인 #디버깅 #var_dump

게시글

팝업창 옆에 팝업창 띄우기

팝업창을 띄울때 top,left는 고정되는데 상대적인 위치에 팝업창을 띄우고자 할때 사용하는 방법 var nWidth = "260"; var nHeight = "430"; // 듀얼 모니터인경우 var curX = window.screenLeft; var curY = window.screenTop; var curWidth = document.body.clientWidth; var curHeight = document.body.clientHeight; var nLeft = curX + (curWidth / 2) - (nWidth / 2); var nTop = curY + (curHeight / 2) - (nHeight / 2); var strOption = ""; strOption += "left=" + nLeft + "px,"; strOption += "top=" + nTop + "px,"; strOption += "width=" + nWidth + "px,"; strOption += "height=" + nHeight + "px,"; strOption += "toolbar=no,menubar=no,location=no,"; strOption += "resizable=yes,status=yes"; window.open(src, '', strOption);

#프로그램 #자바스크립트 #HTML #소스 #팝업창 #window.open #팝업위치 #듀얼모니터

게시글

select 변경시 리스너 처리방법 onchange 이벤트를 사용하는 방법

셀렉트박스에서 내용이 변경될때 처리하는 이벤트가 있다 onchange 이벤트를 사용해서 원하는 부분을 처리하는 이벤트이다 이방법은 해당 태그에 onchange를 입력해서 처리해야된다 그러나 스크립트 만으로 변경하고자 할때가 있다 리스너를 활용해야 하는데 해당 사용방법은 다음과 같다 $("select[name='셀렉트박스이름']").change(function(){ //변경시처리하는 내용 });

#프로그램 #자바스크립트 #소스 #Jquery #셀렉트박스 #onchange #change이벤트 #이벤트리스너

게시글

jquery에서 ajax(아작스)사용하는 방법

$.ajax ({ type: 'post', // POST 로 전송 async: false,//동기화 url: 'http://', // 호출 URL data: {'변수1':'값1','변수2':'값2'}, // 파라메터 정보 전달 success:function(data){ alert(data);//처리된 정보가져오는 부분 }, error:function(e) { // alert(e.responseText); } });

#프로그램 #자바스크립트 #소스 #Jquery #ajax #아작스 #비동기통신 #POST전송

게시글

체크시 텍스트 문구 변경하는 방법

체크할때 텍스트를 바꾸는 방법은 많이 있다 아이디를 선언해서 해당 이벤트 발생시 처리 하는 방법이 있는데 그렇게 하지 않고 아이디 하나만 선언하고 태그내에서 parent()를 활용해서 접근한후에 텍스트를 교체하는 방법이다 여러게의 아이디를 사용할필요가 없어 간편하고 유지보수가 비교적 편리한 편이여서 즐겨사용하는 방법이다 //맵선택했을경우 바로 색상변경 function mapcheckbox(_this){ if($(_this).is(":checked")==true){ $(_this).parent().attr("class","checkbox_text_on"); }else{ $(_this).parent().attr("class","checkbox_text_off"); } } .checkbox_text_on{color:#000000;} .checkbox_text_off{color:#dddddd;} 테스트

#프로그램 #자바스크립트 #소스 #Jquery #체크박스 #parent함수 #텍스트색상변경 #클래스변경

게시글

스타일 여러게를 한꺼번에 변경하는 방법

스타일 여러게를 한꺼번에 변경하는 방법 여러옵션을 사용하는 방법이다 {}를 통해서 사용할수 있으며 형식은 {"옵션명1":"값1","옵션명2":"값2"} 이런식으로 사용한다 다음은 예시이다 $(this).css({'border':'2px solid #f9cd00','padding':'0px'}) 하나만 사용할때는 {} 없이 "옵션1","값1" 이런식이다 다음은 예시이다 $(this).css("border","2px solid #f9cd00");

#프로그램 #자바스크립트 #CSS #소스 #Jquery #css함수 #스타일변경 #여러스타일

게시글

여러 옵션을 동시에 넣는 방법

투명도,크기,위치 등을 한꺼번에 변경하는 방법이다 show(),hide() 이런 함수는 display만 사용가능하게 된다 이때 투명하게 되면서 display를 할때는 show("fade") 이런방법도 있지만 점점커지면서,투명에서 선명하게 되면서,보여지는 방법을 사용할때는 약간의 한게가 있을수 있다 이때 사용하면 좋은 방법이다 $("#아이디").animate( { width:($(window).width()) ,height:($(window).height()) ,top:0 ,left:0 ,opacity:1 } ,300 ,function(){ } )

#프로그램 #자바스크립트 #소스 #Jquery #투명도 #animate #애니메이션효과 #크기변경

게시글

태그의 노드(node) 접근하는 방법

$("#imgList").children().eq(0).contents(":last-child").attr("src"); imgList의 id내의 노드를 순서대로 접근한다 eq(0) => 첫번째 eq(1) => 두번째 contents(":last-child").attr("src") 해당 노드안에서 마지막 노드의 src값을 호출하는 부분이다

#프로그램 #자바스크립트 #소스 #Jquery #노드접근 #children #eq함수 #DOM탐색

게시글

이미지 변경하기 attr()

태그내 속성을 변경하고자 할때 사용하는 attr()함수이다 이미지 변경 뿐만아니라 클래스명 변경 사이즈변경 모든것이 가능하다 이미지 변경하는 방법 마우스 오버시 이미지주소1로 변경된다 $("#_index_banner").attr("src","이미지주소1");

#프로그램 #자바스크립트 #소스 #Jquery #마우스오버 #attr함수 #이미지변경 #속성변경

게시글

부모창에서 자식창(iframe)에 변수,함수 접근하는 방법

자식창에 선언해 놓은 함수나 변수를 접근할수 있다 $('#iframe').get(0).contentWindow.변수명; $('#iframe')[0].contentWindow.변수명; $('#iframe').get(0).contentWindow.함수명; $('#iframe')[0].contentWindow.함수명; 자식창에 id,함수를 접근하는 방법이다 $('#iframe')[0].contentWindow.$('#_parent').height();//높이 100을 가져올수 있다 $('#iframe')[0].contentWindow.js_parent();//함수를 실행할수 있다​

#프로그램 #자바스크립트 #소스 #Jquery #iframe #contentWindow #부모창자식창 #프레임접근

게시글

display가 none인지 display인지 알아내는 방법

jquery로 dispaly의 보여진 상태인지 감추어진 상태인지 알기위해서 여러가지 방법이 있다 그러나 나는 아래와같은 방법을 즐겨사용한다 $("#아이디").css("display") css()함수를 사용해서 none인지 block인지를 구분해서 처리한다

#프로그램 #자바스크립트 #소스 #Jquery #display속성 #css함수 #요소숨김확인 #화면표시여부

웹디자인CSS 소스

wsss.tistory.com

CSS를 통한 디자인 소스가 제공되는 사이트 입니다. 단순 디자인을 넘어 애니매이션 소스도 같이 제공됩니다 예전에는 플래시로 애니매이션을 만들었다면 지금은 CSS, HTML5, 자바스크립트 등을 통해 애니매이션을 제작 하는 추세입니다 그런 면에서 볼때 아주 도움을 주는 사이트 입니다 아래는 실행 화면입니다 https://wsss.tistory.com/55

#자바스크립트 #CSS #애니매이션 #웹디자인 #Animation #CSS소스 #CSS애니메이션 #HTML5 #웹퍼블리싱

언미니파이

unminify.com

웹브라우저에서 소스보기를 하면 웹관련 소스들이 보여집니다 그러나 보안을 위해 자바스크립트와 같은 언어를 암호화 하여 파악하기 어려운 경우가 있습니다 이때 해당 암호화된 문구를 사이트( https://unminify.com )에 입력하여 해독을 시켜줍니다 사용법도 간단합니다 입력하고 Unminfy 버튼을 클릭하면 그걸로 끝입니다

#자바스크립트 #압축풀기 #암호풀기 #언미니파이 #Unminify #자바스크립트압축풀기 #코드정리 #코드포맷터 #소스보기

게시글

자바스크립트로 위치정보 알아내기

자바스크립트로 위도 경도 값을 가져오는 방법입니다. 물론 해당 기능을 지원하는 디바이스나 브라우저에서 사용 가능합니다 스마트폰을 이용해 사용가능합니다. 간단하게 스크립트로 위경도를 알아 올수 있어 위치기반 서비스를 제공할수 있습니다 function getLocation() { if (navigator.geolocation) { // GPS를 지원하면 navigator.geolocation.getCurrentPosition(function(position) { alert(position.coords.latitude + ' ' + position.coords.longitude); }, function(error) { console.error(error); }, { enableHighAccuracy: false, maximumAge: 0, timeout: Infinity }); } else { alert('GPS를 지원하지 않습니다'); } } getLocation();

#자바스크립트 #위도 #경도 #GPS #위치정보 #위치 #geolocation #위도경도 #위치기반서비스

jquery

jquery.com

jquery을 소개합니다. jquery는 자바스크립트를 편리하게 사용할수 있도록 만들어진 라이브러리 입니다. jquery의 장점은 가장 많이 사용되는 자바스크립트 라이브러리 중 하나 라는 것입니다. 다이나믹한 웹페이지를 제작하기 위해 자바스크립트는 필수 입니다. 물론 CSS나 플래시 등을 통해서 구현 가능하지만 기본적으로 다이나믹한 웹페이지를 위해서는 자바스크립트를 사용합니다. 그러나 만들순 있지만 쉽게 구현하기는 어렵습니다. 그래서 쉽게 만들수 있도록 jquery를 사용합니다. 사용이 간편하고 효과가 좋아 아주 많은 사람들이 사용하고 있습니다. 사람들이 많이 사용하는 것은 그만한 이유가 있습니다. 저 역시 jquery를 많이 사용합니다. 해당 사이트에서는 사용할수 있는 방법 api가 제공되고 https://api.jquery.com 이미 만들어진 plugin도 존재하여 더욱 쉬운 사용을 도와줍니다. https://plugins.jquery.com 메뉴구성은 Dowload, API Documentation, Blog, Plugins, Browser Support등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 jquery는 홈페이지뿐 아니라 트위터등의 채널을 통해 고객들과 더 많이 소통하려 노력하고 있습니다. 자세한 정보를 원하신다면 https://jquery.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

#자바스크립트 #Jquery #제이쿼리 #자바스크립트라이브러리 #jQueryAPI #jQuery플러그인 #웹개발

w3schools

www.w3schools.com

w3schools을 소개합니다. w3schools 은 다양한 프로그램 소스를 공부할수 있는 사이트 입니다. w3schools의 장점은 소스와 실행되는 결과같은 바로 볼수 있다는 것이 장점입니다. 웹관련 소스가 궁금한 경우 검색하면 잘 나옵니다. 그러나 소스를 적용했을때 잘 되는지에 대해서는 장담하지 못합니다. 열심히 적용해 봤는데 소스가 잘못된경우 또는 버전이 맞지 않아 사용할수 없는 경우가 있기 때문입니다. 물론 올린사람이 의도적으로 틀린 소스를 올리는 것은 아니지만 시간이 흐름에 따라 틀린 소스가 되기도 합니다. 그러다 보니 적용하기전 정상적인 소스인지 먼저 확인 해봐야 하는데 w3schools 에서는 Try it Yourself 를 통해 미리 확인해 볼수 있습니다. 또 다른 장점으로 CSS관련 정보를 많이 얻을수 있다는 것입니다. 개인적으로 CSS관련 부분이 궁금한 경우 자주 활용하는 사이트입니다. 일반적으로 CSS의 특정 기능이 궁금하면 인터넷에 검색하여 정보를 얻습니다. 그러다 보니 체계적인 정보를 얻기보다는 산발적인 정보를 얻게 되는데 w3schools 에서는 체계적으로 관련정보가 잘 정리되어 있습니다. 적용 예시 뿐아니라 연관된 스타일들까지 다양하게 확인해볼수 있습니다. 그러기에 CSS를 공부하기에는 더할나위없이 좋은 사이트입니다. 메뉴구성은 HTML, CSS, AJVASCRIPT, SQL, PYTHON, PHP등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 웹관련 프로그램 소스가 궁금하시다면 w3schools를 활용해 보시기 바랍니다. 자세한 정보를 원하신다면 https://www.w3schools.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

#프로그램 #php #자바스크립트 #CSS #HTML #SQL #PYTHON #W3Schools #웹개발학습 #코딩예제

블루비

www.blueb.co.kr

웹프로그램 관련 소스를 다운받아 사용할수 있는 블루비(http://www.blueb.co.kr) 사이트를 소개합니다. 블루비는 HTML, 자바스크립트, CSS, Ajax 등 다양한 웹프로그램 코딩을 제공해주는 사이트 입니다. 대부분의 소스는 무료로 이용가능하며 유료로 제공하는 소스도 있습니다. 유료인 경우 그만한 가치가 있는 소스이기 때문에 결제하시는 것이 더 나은 서비스를 위해 좋은 방법이 아닐까 생각합니다. 소스들은 웹상에서 자주 사용되는 기능을 제공하고 있습니다. 트리메뉴, 탭메뉴, 갤러리, 슬라이드쇼 등 웹 상에서 한번쯤 사용해 봤을 만한 소스가 많이 있습니다. 사실 직접 제작해서 사용하려면 많은 시간과 노력이 필요합니다. 그렇지만 블루비를 통해 얻은 소스를 커스트마이징해 자신의 홈페이지에 적용 한다면 쉽고 빠르게 작업 할 수 있습니다. 간혹 소스를 다운받아 단순 업로드 하면 적용될 것이라 생각하시는 분들이 있는데 이는 너무 모르는 소리입니다. 홈페이지에 소스를 적용하려면 그에 맞게 고치는 커스트마이징 작업이 꼭 필요하다는 것을 명심해야 합니다. 홈페이지를 멋지게 꾸미기 원하신다면 블루비를 활용해 보시는 것은 어떨까요?

#프로그램 #자바스크립트 #CSS #HTML #이미지슬라이드 #갤러리 #소스 #웹소스 #프로그램소스 #홈페이지제작 #블루비 #자바스크립트소스