본문 바로가기

IT_Developers/Javascript79

console.log - 콘솔 로그 스타일 입히기 console style 글짜 변경하기 안녕하세요. 고코더 입니다. ● 1. 티스토리를 접속하고 콘솔창을 확인하면 이렇게 티스토리 시그니쳐 텍스트가 찍혀있습니다. ● 2. 이건 console.log에 스타일을 입힐 수 있기 때문입니다. 아래 코드를 콘솔창에서 실행 해보세요. 1234console.log( '%cGocoder IT Express', 'color:red; font-size:25px; background:black'); cs ● 3. 실행화면 ● 4. 사용 방법은 간단합니다. 첫번째 인자에 %c를 입력하고 글자를 입력하면 됩니다. console.log('%c[글자입력]') ex)%cGocoder IT Express ● 6. 그리고 두번째 인자에 스타일을 입력하면 됩니다. console.log(.. 2019. 7. 11.
jQuery - Div등 요소의 크기 조절, 사이즈 가져오기 / width(), hegiht(); 디자인 요소의 크기 변경 안녕하세요. 고코더 입니다. jQuery에서는 선택한 요소의 크기의 값을 알거나 변화 시킬 수 있습니다. ● 1. 바로 width()와 height() 메서드 입니다. width() - 선택요소의 가로 크기를 가져오거나 변경한다. height() - 선택요소의 세로 크기를 가져오거나 변경한다. style 속성에 접근하지 않아도 간단한 명령어로 크기를 조절 가능 합니다. ● 2. 예제를 한번 살펴보세요. 12345678910111213141516171819202122 $(document).ready( function() { //해당 DIV 사이즈 조정 $('#gocoder_size').width('300'); $('#gocoder_size').height('300'); alert(.. 2019. 6. 19.
JavaScript - setTimeout(), setInterval() 차이점 예제 몇 초후에 한번 실행 , 초 마다 반복 실행 안녕하세요. 고코더 입니다. 제 홈페이지 고코더넷(http://gocoder.net)에 학생분이 질문을 남기셔서 열코딩 하다 강의 작성 모드로 스위치를 바꿨습니다. 문의한 사항은 이렇습니다. 요즘 학생분들이 코딩 많이 하시네요. (덕분에 선생님 소리도 들어보네요) 좋은 현상입니다. 차이점 이론 ● 1. setTimeout() 이 메서드는 일정 시간 후에 함수를 한번! 실행합니다. setTimeout(function(){alert('gocoder.net')}, 1000); // 1초 후에 스크립트 실행 ● 2. setInterval() 이 메서드는 해당 시간마다 반복해서 함수를 실행합니다. setInterval(function(){alert('반복 gocoder.. 2019. 6. 17.
jQuery UI - 이미지 드래그, 리사이징 / resizable() draggable() 제이쿼리 이미지 드래그 드랍, 사이즈 조절 안녕하세요. 고코더 입니다. jQuery UI를 쓸때 가장 많이 활용하게 되는 기능이 두가지가 있습니다. 바로 이미지 드래그와 리사이징 입니다. 레이어 팝업을 만들거나 사용자에게 크기를 조절하게 편의를 제공 하는 기능은 많이 씁니다. 그래서 이번 시간에 제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다. ● 1. 아래 소스를 웹사이트에서 실행해보세요. 1234567891011121314151617 $( document ).ready(function() { $('#GoCoderImg1').resizable(); $('#GoCoderImg2').draggable(); }); Colored by Color Scriptercs ● 2. 하나는 사이즈 조절이 가.. 2019. 6. 11.
jQuery UI - Div 강조하기 / effect highlight Div 반짝 거리게 하기 안녕하세요. 고코더 입니다. Div안에는 많은 것들을 담습니다. 사이트는 강조해야 할 Div가 존재하게 됩니다. ● 1. 얼마전에 만든 제가 만든 QR코드 만들기 사이트에 접속시에 해당 네모 DIV안에 이미지가 나타난다고 알려주고 싶더군요 그래서 알아본 결과 jQuery UI에 제공하는 간단하고 강력력한 기능인 effect를 사용하는 방법이 있습니다. ● 2. 아래에 코드를 웹에서 실행해보세요. 12345678910111213141516171819 $( document ).ready(function() { $('#GoCoderDiv').effect("highlight", 1000); }); DIV 강조 Colored by Color Scriptercs ● 3. 아래처럼 Div가 .. 2019. 6. 3.
JavaScript - 사파리에서 body, HTML에 클릭(click) 이벤트가 바인딩 되지 않는다. safari click 에 되지 않네요 안녕하세요. 고코더입니다. 브라우저는 제조사 마다 웹사이트를 분석하는 각자의 특징을 가지고 있습니다. 개발시에 크로스브라우징을 체크하지 않으면 클레임에 걸리게 됩니다. 최근에 모니터 불량화소 체크 사이트를 만들면서 (monitor.gocoder.net)특이한 케이스를 발견했습니다. 상식이었는데 제가 모르던 사실일 수도 있지만 ▼ 아래 소스를 우선 확인해보겠습니다. 1234567891011121314151617181920212223 $('html').on('click', function(){ alert('사파리에서 안됨'); }); $('body').on('click', function(){ alert('사파리에서 안됨'); }); $('body > div').on(.. 2019. 5. 22.
jQuery - 가볍고,간단한 깔끔한 화면 한쪽 팝업 / jGrowl 오른쪽 화면 위에 나타나는 javascript 네모난 팝업 레이어 박스 안녕하세요. 고코더 입니다. 예전에 팝업 하면 무조건 window.open 을 통한 브라우저 자체 내장객체를 사용했습니다. 그런데 요즘은 반응형 이슈와 스마트폰에서 팝업을 무조건 막는 정책때메 레이어 팝업을 많이 사용 합니다. 이 layer 팝업중 가장 깔끔한 플러그인을 소개 해드릴려고 합니다. ▼직영하면 j 으르렁 대다 인가 ㅎㅎ https://plugins.jquery.com/jgrowl/ ▼ 고코더 방문자와 구독자를 위해 직접 간단하게 코드를 작성했습니다. 그대로 HTML을 실행하면 화면이 실행 됩니다. 1234567891011121314151617181920212223242526272829303132333435363738394.. 2019. 5. 21.
jQuery - 이미지의 img src 태그로 선택하기 jquery img src selector 안녕하세요. 고코더 입니다. 개발을 하던 중에 이미지의 src 속성 이미지의 주소를 선택하여 수정할 일이 생겼는데 쓸모가 많은 방식인거 같아 블로그를 남겨드립니다. 제이쿼리에서 img의 src 속성으로 당연히 선택을 할 수 있습니다. 제 블로그에 있는 이미지 주소를 사용해 말씀드리겠습니다. https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg ▼ 이미지 src를 선택하는 3가지 방법입니다. 12345678910111. 이미지 주소 전체를 넣어 검색 - 하나의 이미지만 선택할때 유용 합니다. ex) $("img[src='https://tistory1.daumcdn.net/tistory/2778.. 2019. 4. 12.
JavaScript - 버튼 더블클릭 방지 유효성 처리하기 / onclick 안에 쉽게 프론트에서 더블클릭 되면 안되는 버튼이 있을 때 안녕하세요. 고코더 입니다. 프론트에서 가끔 두번 클릭되면 안되는 기능 버튼이 있습니다. 물런 이런 유효성 체크는 서버사이드 언어나 백엔드에서 처리해야 하는게 정석이지만 프론트 개발자라면 UI에서도 기본적인 실수 방지 정도는 해줘야겠지요. 사실 버튼을 두번 클릭하지 못하게 하는 방법은 많지만 오늘은 간단하게 onclick 에 넣어 처리할 수 있는 방법을 소개하려고 합니다. ▼ 우선 제가 작성한 예제 소스를 보겠습니다. 12345678 Colored by Color Scriptercs 개발자가 아니어도 원리는 금방 눈치 채셨을텐데요. input 타입이 button일 경우 disabled 를 만들고 이미지 버튼일 경우에는 visibility를 이용해 다시 클릭.. 2019. 4. 4.

티스토리툴바