본문 바로가기

전체 글751

[jQuery] 제이쿼리로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 2 2014/12/05 - [프로그래밍 언어/jQuery] - jQuery로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 1 위 글을 먼저 읽은 다음에 다음 설명을 참조하세요. $("#searchText").addClass("placeholder").val(searchLabel).focus(function() { if(this.value == searchLabel) { $(this).removeClass("placeholder").val(""); }; }).blur(function() { if(this.value == "") { $(this).addClass("placeholder").val(searchLabel); } });focus(), blur() 함수를 이용해서 inputbo.. 2014. 12. 5.
[jQuery] 제이쿼리로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 1 jQuery로 작성된 자바스크립트 부분을 빼면 다음과 같이 화면에 보여집니다. '사이트 검색'이라는 부분을 inputbox에 넣어보는 예제입니다. $(document).ready(function() { var searchLabel = $("#search label").remove().text(); $("#searchText").addClass("placeholder").val(searchLabel); });$(document).ready(function() {...} 에 코딩을 하면 화면이 로딩되자마자 실행이 됩니다. var searchLabel = $("#search label").remove().text(); => label에 있는 텍스트인 '사이트 검색'이라는 값을 searchLabel이라는 변수에.. 2014. 12. 5.
[jQuery] 제이쿼리로 전체선택/선택해제 간단하게 구현해 보는 예제입니다. function checkAllFunc(obj) { $("[name=chk]").each(function() { this.checked = obj.checked; }) } 체크박스가 [name=chk]로 이름이 같기 때문에 each()문으로 루프를 돌리며 작업을 합니다. this.checked = obj.checked; => 전체선택 체크박스가 선택되면 다른 체크박스도 체크하고, 전체선택 체크박스가 선택해제되면 다른 체크박스도 선택해제하는 명령입니다. 전체선택 onclick="checkAllFunc(this)" => 전체선택의 체크박스를 클릭할 때 checkAllFunc ()함수를 실행해 달라는 명령입니다. 2014. 12. 5.
그 강력함에 끌려 에디트플러스(Editplus)에서 서브라임 텍스트(Sublime Text)로 갈아타다. 제가 자바 프로그래머다 보니 날마다 eclipse로 코딩을 하기 때문에 다른 에디터를 사용할 일이 별로 없었는데요. 얼마전부터 워드프레스라는 블로그 오픈소스를 공부하다보니 php를 할 일들이 생기더군요. 지금까지는 Editplus라는 툴을 편리하게 사용하고 있었는데 외국 PHP 프로그래머들은 Sublime Text라는 툴을 다 사용하더군요.(우리나라도 그런가요?) 호기심에 Sublime Text라는 툴을 설치해서 사용해 봤는데 너무너무너무 좋더군요. 특히, 소스의 강력한 자동완성 기능은 너무 편리해서 오히려 eclipse(이클립스)보다 낫지 않나하는 생각마저 들었답니다. http://www.sublimetext.com/ ( 2014. 12. 5.
[자바스크립트] javascript로 구현하는 base64 인코딩, 디코딩 함수 자바스크립트로 구현하는 base64 인코딩, 디코딩 함수 예제입니다. (참고로, 한글은 안됩니다.) 한글 (Ⅹ) 설명은 필요없을 듯하고(base64 인코딩이 어떤식으로 동작하는지는 저도 몰라요.) 그냥 소스 가져다 쓰시면 됩니다. 아래 [실행]에서 문자를 입력하시면 base64 인코딩, 디코딩이 되어 변환된 값을 보여줍니다. 한번 확인해 보세요. 2014. 12. 4.
[jQuery] 글자 폰트 사이즈 늘리고 줄이기, 숨기고 보이기, 애니메이션으로 버튼 크기 조절하는 예제 먼저, 아래 링크를 클릭해서 이전 예제를 참조하세요. 2014/12/03 - [프로그래밍 언어/jQuery] - 글자 폰트 사이즈 늘리고 줄이기 예제 2014/12/03 - [프로그래밍 언어/jQuery] - 글자 폰트 사이즈 늘리고 줄이기, 숨기고 보이기 예제 $("div.label").click(function() { $("div.button") .fadeTo("slow", 0.5) .animate({width:400}, "slow") .fadeTo("slow", 1.0) .animate({height:38}, "slow"); });$("div.button") 은 을 찾는 selecter 입니다. fadeTo() 로 서서히 나타나는 효과를 구현했구요. animate() 으로 버튼의 너비와 높이가 늘어.. 2014. 12. 3.
[jQuery] 글자 폰트 사이즈 늘리고 줄이기, 숨기고 보이기 예제 먼저, 아래 링크를 클릭해서 이전 예제를 참조하세요.2014/12/03 - [프로그래밍 언어/jQuery] - 글자 폰트 사이즈 늘리고 줄이기 예제 .more { color: blue; font-size: 25px; font-weight: bold; text-decoration: underline; } 말줄임표(...)에 스타일시트에 more 클래스를 정의합니다. $("p:eq(1)").hide(); /* 태그 중 첫번째 객체를 숨긴다. */ $("span.more").click(function() { $("p:eq(1)").show('slow'); $(this).hide('slow'); }); show()는 객체를 보이게 하고, hide()는 숨기는 명령입니다. show('slow')는 객체를 천천히 .. 2014. 12. 3.
[jQuery] 글자 폰트 사이즈 늘리고 줄이기 예제 .label { font-weight: bold; /* 글자를 진하게 */ font-size: 12pt; margin: 20px 0; /* 바깥 위아래 여백을 20px 준다. */ } .button { width: 200px; border: 1px solid #CCCCCC; /* 테두리를 1px크기의 실선으로 #CCCCCC 색깔로 입힌다. */ background-color: #EEEEEE; /* 배경색 */ padding: 2px; margin: 10px 0; } 스타일시트에 label과 button 클래스를 정의합니다. $(document).ready(function() { $("div.button").click(function() { var $speech = $("div.speech"); var c.. 2014. 12. 3.
[jQuery] 행에 징검다리 스타일 입히기 (:odd, :even) .odd { background-color: #FFC;/* 홀수번째 줄은 연한 노란색 */ } .even { background-color: #CEF;/* 짝수번째 줄은 연한 푸른색 */ }스타일시트에 odd, even 클래스를 정의합니다. 각각, 홀수와 짝수 행에 적용할 클래스입니다. $(document).ready(function() { $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); $("td:contains('헨리')").addClass("highlight"); });DOM이 로드되고 이미지가 로드되기 전에 $(document).read() 함수가 실행됩니다. 홀수행(tr:odd)에 odd 클래스를 적용하고, 짝수행(tr:even)에 ev.. 2014. 12. 3.
[jQuery] 리스트 항목에 레벨 단위로 스타일 입히기 (UL, LI 태그) .horizontal { float: left; /* 좌측 정렬 */ list-style: none; /* 목록 앞의 글머리 기호 표시를 제거한다. */ margin: 10px; /* 요소의 모든 가장자리에 10 픽셀의 여백을 준다. } 스타일시트에 horizontal 클래스를 정의합니다. $(document).ready(function() { $("#selected-plays > li").addClass("horizontal"); }); DOM이 로드되고 이미지가 로드되기 전에 $(document).read() 함수가 실행됩니다. selected-plays를 ID값으로 가지는 요소에 horizontal 클래스를 적용하라는 명령입니다. 2014. 12. 3.
작업 중에 갑자기 노트북 터치패드와 마우스가 작동하지 않는다면.. 제가 어제 프로젝트 중에 갑자기 노트북 터치패드와 마우스가 작동하지 않는 일이 발생을 했습니다. 만약에, 터치패드와 마우스 중에 하나라도 작동했다면 이상하게 생각하지 않았을텐데 둘 다 작동을 하지 않아서 노트북 마우스시스템이 고장이 난 거라고 생각을 했습니다. 재부팅도 여러번 해보았지만 마찬가지였구요. 주변에 다른 분들께 물어봐도 A/S센타를 다녀오라고 조언을 하셔서 부랴부랴 장비 반출증을 끊어서 택시를 타고 LG전자 서비스센타로 갔습니다. 월요일이라 많은 분들이 오셨는지 30분 가량을 기다려 점검을 받았는데, 기사아저씨가 글쎄 마우스가 잘 작동을 한다는 것이었습니다. 그러면서 LG X노트(엑스노트) 터치패드 작동 기능이 꺼져 있었는데 Fn(펑션키) + F5 버튼을 누르면 터치패드를 다시 켤 수 있다고 .. 2014. 12. 2.
"교차사이트 스크립팅을 방지하기 위해 Internet Explorer가 이 페이지를 변경했습니다."라는 메시지 나올 때 해결방법 요즘은 사실 익스플로러보다는 속도가 빠르고 기능도 편리한 구글의 크롬 브라우저를 더 많이 사용하는데요. 그렇지만, 우리나라 특성상 금융권이나 결제 등 ActiveX를 필요로 하는 곳에서는 어쩔 수 없이 익스플로러를 사용할 수 밖에 없습니다. 그러다가 "교차사이트 스크립팅을 방지하기 위해 Internet Explorer가 이 페이지를 변경했습니다."라는 메시지를 만나게 되었는데요. 이런 메시지가 뜨면 그 페이지는 화면이 제대로 보이지 않게 되죠. 해결 방법을 알아보겠습니다. 키보드의 [F10] 버튼을 눌러서 익스플로러 메뉴를 띄우고 [도구 > 인터넷옵션]을 클릭하셔서 아래 그림 순서대로 따라하시면 됩니다. XSS 필터를 사용 안함으로 하시면 이 문제가 해결됩니다. 빨리 우리나라 사이트에서도 ActiveX가.. 2014. 11. 27.
HTML5와 CSS3로 만드는 드롭다운 네비게이션 메뉴 HTML5 + CSS3로 만들어진 드롭다운 네비게이션 메뉴입니다. style 부분에 주석으로 간단하게 설명이 돼 있으니 자세한 설명은 생략합니다. 소스만 참고하시고 필요한 곳에 알맞게 변경하여 사용하시면 됩니다. 2014. 11. 27.
[Wordpress] 워드프레스를 다국어 사이트로 만들어주는 WPML(WordPress MultiLingual) 플러그인 구매 후 설치하는 방법 WPML(WordPress MultiLingual)을 유료로 구매를 했습니다. 유료라서 플러그인 자동설치가 안되는데 지금부터 어떻게 설치하는지 알아보도록 하겠습니다. 유료로 구매를 하셨다면 구매시 입력한 이메일로 계정이 도착했을 겁니다. Login name과 Password로 http://wpml.org 에서 로그인을 합니다. (Account 메뉴를 클릭하시면 됩니다.) 로그인을 하시면 아래처럼 여러가지 메뉴가 나오는데요. 비밀번호를 바꾸시려면 [Account Settings]로 가셔서 수정하시면 됩니다. 먼저, 플로그인을 다운받아야 하기 때문에 [Downloads]를 클릭하세요. 다운로드 할 플러그인이 굉장히 많은데요. 그냥 다 다운받으시면 됩니다. 압축을 풀면 이렇게 플러그인이 각각의 폴더에 담겨 있.. 2014. 11. 26.
[Wordpress] 워드프레스 메모장 플러그인(Plug-in) - Wordpress Admin Notepad 워드프레스 관리자용 메모장 어떤 거 사용하세요? 사이트 운영하다가 아이디어나 할일 들을 간단하게 적어놓을 수 있는 게 뭐 없을까 찾다가 [Wordpress Admin NotePad]를 찾아서 사용해보니 간단하면서도 아주 편리해서 좋은 플로그인인 것 같아 소개해 드립니다. Wordpress Admin Notepad로 검색해서 설치하시면 됩니다. 플러그인을 다 설치하고 활성화시키면 관리자페이지 우측 상단에 [Note]라고 작게 메뉴가 하나 생깁니다. 메모장을 보였다 감췄다할 수 있어서 좋네요. 아주 간단한 메모장 기능.. 한번 사용해 보세요~ 2014. 11. 25.

티스토리툴바