엘의 휴면 중인 미지공간

블로그 티스토리로 이전합니다.

2010-05-14T21:28:00.000+09:00

블로그 이전합니다.

http://coterie.tistory.com

뭐 나중에 텍스트큐브의 사정에 따라 텍스트큐브로 다시 돌아올지 어떨지 모르겠지만...

어찌되었든 블로거와의 통합으로 인해 티스토리로 이전하게 되었습니다.

차기 마크업 언어 표준 제안 - HTML5

2010-05-13T21:43:00.000+09:00

HTML5는 HTML 4.01, XHTML 1.0, DOM Level 2 HTML에 대한 차기 표준 제안으로 월드 와이드 웹의 핵심 마크업 언어입니다.

HTML5를 통해 어도비 플래시나 마이크로소프트의 실버라이트, 썬의 자바FX와 같은 플러그인 기반의 인터넷 어플리케이션에 대한 필요를 줄이는 데 목적을 두고 있습니다.

HTML5를 통해 더 강력하고 더 간소화된 코드사용을 가능하게 되는데 HTML4 와의 차이점은 아래와 같습니다.

1. 문서 선언(DOCTYPE) 선언의 간소화.

가장 먼저 기본적인 문서 선언이 간소화 되었습니다.

HTML4 에서는 DOCTYPE이 SGML기반으로 되있어 DTD의 참초가 필요한 반면,

HTML5 에서는 이를 간소화시켜 아래와 같이 쉽게 문서 선언을 할 수 있게 됩니다. 대소문자는 구별 하지 않습니다.

<!doctype html>

2. 기존 요소의 의미 변경.

em과 hr의 요소 의미가 변경 되었지만 자세한 내용은 나중에 다루도록 하겠습니다.

3. 새로운 요소의 추가.

① 구조적 요소. 기존의 div 구조대신 구역을 나누는 블록 요소로 사용할 수 있게 되었습니다.

header

nav

article

section

aside

② 멀티미디어 요소. 이를 통해 플러그인(플래시나 실버라이트 등)없이 멀티미디어를 재생할 수 있게 되었습니다.

audio

video

canvas

command

datalist

details

embed

figure

figcaption

이 요소들 역시 자세한 내용은 나중에 다루도록 하겠습니다.

PS - 오랜만에 포스팅이다 보니 영양가는 별로 없습니다. 사실 이런 내용은 이미 많이 다루어젔기도 하구요.

딱히 포스팅거리를 못찾고 있던 가운데 앞으로 많이 사용되게될 마크업 언어인 HTML5에 대해 다루어 볼까 생각 중입니다.

스타크래프트2 삼매경...

2010-03-22T01:28:00.000+09:00

지인이 배틀넷 친구초대를 통해 베타키를 주어서 스타크래프트2를 즐기고 있습니다.

전작에 비해 상당히 빨라지고 변수가 적어졌지만 상성관계가 중요해서 방심하면 역전경기도 자주 나오는 편입니다.

주종족은 프로토스이지만 현재 테란의 초반공세가 강해서 테란을 주로 플레이하고 있습니다.

레더시스템은 배치경기(10경기)에 의해서 각자의 실력에 맞는 조에 편성이 되는데...

저는 잘하진 못하지만 테란의 치즈러쉬(일꾼과 함께 나가는 초반 타이밍 러쉬)를 배워서 그걸로만

8승2패를 해서 골드리그에 배치되어 지금 69위에 올라있네요.

사실 레더는 잘 하지 않는 편이라 순위는 매번 바뀝니다. 처음 골드리그에 배치됬을땐 49위 였는데

자고 일어나니 70위대 네요. 하지만 저는 점수를 가지고 경쟁하는걸 좋아라 하지 않아서

그냥 기록이 남지 않는 사용자지정 게임을 즐겨합니다.

어차피 베타기록은 초기화되기 때문에 그리 신경쓰는 편도 아니지만...

아래는 제 스타2 프로필입니다.

아이디가 한자라서 사람들이 중국인으로 오해를 해 게임을 기피하는 경우가 많더군요. -_-;

이미지 중 지워진 부분은 제 본명이 적혀있어 일부로 지웠습니다.

오른쪽 위에 □□□로 나오는 부분은 스타2에서 몇몇 곳에서 한자를 표현하지 못하더군요.

어서 빨리 지원해 주길 바랄뿐입니다.

MS 인터넷 익스플로러 9 드디어 공개

2010-03-17T13:40:00.000+09:00

마이크로 소프트가 MIX10(라스베가스에서 열리는 개발자 행사)에서 자사의 차기 웹브라우저인 인터넷 익스플로러9(이하 IE9)를 공개했습니다. IE9에서는 차세대 웹표준으로 관심을 모으고 있는 HTML5를 구현해 내어 많은 개발자들에게 기대를 모으게도 했습니다만...

아직 웹표준 테스트 중 하나인 ACID테스트 점수가 55점 정도 밖에 나오지 않는다고 합니다.(사실 이부분도 참 중요하긴 하지만...) 뭐 앞으로 DOM과 CSS3등을 지원하게 하면서 점수를 올리게 하겠다고 하니 기다려 봐야 할듯합니다.

자바스크립트 엔진으로 코드명 'Chakra(챠크라)'를 채용하고 다이렉트2D기술과 멀티코어까지 지원하여 이전보다 빠른 웹서핑이 가능하다고 합니다.

현재 IE는 개발자들을 위해 테스트버전을 공개하였는데 XP에는 설치를 못하는 듯 합니다.

윈도우7 이나 비스타를 사용하시는 개발자 분들은 한번 테스트 해보시는것도 좋을 듯합니다.

IE9 테스트 사이트 : http://ie.microsoft.com/testdrive/Default.html

[잡담] 이래저래 정신이 없다보니...

2010-03-06T23:07:00.000+09:00

프로그램질도 쉬고 있고...

블로그에도 글을 안올리고 있었네...

으허허허허...

스타크래프트2 클로즈 베타 출시.

2010-02-18T17:23:00.000+09:00

스타크래프트 2가 드디어 공개되었네요.

클로즈베타 신청은 하지도 않았기 떄문에

해외 실시간 방송이나 아프리카를 통해 관람을 해본결과.

"블리자드는 역시 게이머를 실망시키지 않는구나..." 라는걸 느꼈습니다.

한글화 수준도 아주 수준급이어서 전혀 어색함이 없이 게임을 즐길 수 있는 수준이었습니다.

어서 일반 유저들도 즐길 수 있는 데모 버전이나 게임 출시가 되었으면 하는 바램.

개인적으로는 배틀넷 보다 시나리오(캠페인)모드를 더 기대하고 있습니다.

부산 광안리를 다녀오다...

2010-02-07T23:10:00.000+09:00

개인사이트 정모차 부산 광안리에 다녀왔습니다.

계획에 없던 스케쥴이라 너무 갑작스럽지만 회원 분들과 재밌게 놀아서

후회없는 시간이었네요.

나중에 기회가 되면 다시 한번 가보고 싶습니다.

자금문제상 버스로 다녀왔지만 나중에는 돈좀 들더라도 KTX를 이용하고 싶네요.

용사30 100% 클리어...

2010-01-27T20:52:00.000+09:00

아아... 드디어 미루고 있던 용사30의 100% 클리어를 완료...

정말 오랜만에 특전까지 100% 완료해본 게임인듯 하다.

이런 게임을 생각해 내다니 일본이란 나라의 창의력이란 참 굉장도 하구나...

이런 대작을 한글화 해준 CFK에게 감사를...

100% 특전 일러스트... 굉장한 포스다...

이외의 좋은 일러스트도 많다.

한글화 번역 센스도 일품.

아아 이제는 뭘 하지...

PHP 함수 - json_encode, json_decode

2010-01-25T14:35:00.000+09:00

PHP에서 특정 변수나 배열을 받아와 JSON 인코드 문자열로 변환하는 함수인 json_encode와 JSON 인코드 문자열을 받아서 PHP 변수로 변환하는 json_decode 입니다.

이 함수는 PHP5 에서만 존재하기 때문에 PHP4를 사용하시는 분들은 아래의 함수를 이용하시면 됩니다. function_exists를 사용한 이유는 나중에라도 PHP5로 업데이트할 경우 함수 충돌을 방지하기 위함입니다.

1. json_encode

[code] $v) $result[] = json_encode($k).':'.json_encode($v); return '{' . join(',', $result) . '}'; } } } ?>[/code]

2. json_decode

[code]'; else $out .= $json[$i]; } else $out .= $json[$i]; if ($json[$i] == '"') $comment = !$comment; } eval($out . ';'); return $x; } } ?>[/code]

jQuery 1.4 추가사항 - .first(), last()

2010-01-22T22:05:00.000+09:00

1.4버전에 추가된 jQuery의 새로운 기능인 .first() 와 .last() 입니다. 지정한 요소의 첫번째 요소와 마지막 요소를 선택하는 기능인데 사실 셀렉트 요소에 있는 기능과 같은 역할을 하는 것 같은데 따로 만든 이유는 잘 모르겠습니다.

기본적인 사용법은 아래와 같습니다.

$('li').first().css('background-color', 'red');
$('li').last().css('background-color', 'blue');

위 코드를 간단하세 설명하면 페이지 내에 있는 li 요소 중 가장 첫번째 요소에만 배경색을 빨간색으로 지정하는 것이고 가장 마지막 li 요소의 배경색을 파란색으로 지정하는 것입니다.

뭐 어려운 기능은 아니니 예제는 따로 없습니다.

jQuery 1.4 추가사항 - .focusin(), .focusout()

2010-01-19T15:01:00.000+09:00

jQuery 1.3.2 버전에서 존재하던 .focus() 이벤트를 업그레이드 한 것으로 해당 input 요소에 focus가 들어갔을때 와 나왔을때에 이벤트가 발쌩하는 기능입니다.

기본적인 사용법

.focusin( handler(eventObject) )
.focusout( handler(eventObject) )

handler(eventObject)는 이벤트가 발생할 때 마다 수행할 이벤트 오프젝트나 함수를 지정해 주시면됩니다.

예제를 보시면 쉽게 이해할 수 있으실듯 합니다.

예제 : http://coterie.hosting.paran.com/focus/

예제 소스

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>테스트</title>
<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name=test1]").focusin(function(){
$("span:first").text('포커스인').show().fadeOut('slow');
}).focusout(function(){
$("span:first").text('포커스아웃').show().fadeOut('slow');
});
$("input[name=test2]").focusin(function(){
$("span:last").text('포커스인').show().fadeOut('slow');
}).focusout(function(){
$("span:last").text('포커스아웃').show().fadeOut('slow');
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<input name="test1" value="" /><span></span><br />
<input name="test2" value="" /><span></span>
</body>
</html>[/code]

jQuery 1.4 추가사항 - Delay

2010-01-16T14:19:00.000+09:00

.delay()

1.4에서 추가된 딜레이기능입니다. 사실 이기능은 플러그인으로 존재했었는데 정식기능으로 추가된 듯 합니다.

기본적인 사용법

.delay( duration, [ queueName ] )

duration : 딜레이시간을 숫자로 지정. (1초가 1000)

queueName : 대기열 이름을 포함하는 문자열. 기본값으로 표준효과를 fx함.

지정한 시간만큼 딜레이를 주는 기능입니다.

예제 : http://coterie.hosting.paran.com/delay/

■ 예제 소스

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>테스트</title>
<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function () {
$("#test").attr('disabled','disabled').text('2초 후 사라집니다.').delay(2000).hide(400);
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<button id="test">버튼없애기</button>
</body>
</html>
[/code]

jQuery 1.4 정식버전 공개.

2010-01-15T12:23:00.000+09:00

지난 14일 jQuery의 1.4 버전이 공개되었습니다.

jQuery가 버전업을 통해 추가된 기능들이 많기 때문에 나중에 따로 포스팅 해야할 듯 합니다.

jQuery 1.4에서 추가되거나 수정된 점은 다음 링크를 통해 확인 할 수 있습니다.

http://api.jquery.com/category/version/1.4/

이번 버전업을 통해 좀 더 강력한 jQuery를 만날 수 있게 되어 기쁘네요.

알툴즈를 대체할 프리웨어 모음.

2010-01-12T14:49:00.000+09:00

※ 먼저 이 포스팅은 지극히 개인적인 측면에서 제 자신이 사용하기 편한 프로그램을 소개하고 있습니다.

이스트소프트에서 제작한 알시리즈는 아주 유용하며 사용이 간편하기 때문에 다수의 국내 이용자들이 사용하고 있는 프로그램이지만 안정성이나 2% 아쉬운 기능들 덕분에 저같은 경우는 대체할 수 있는 프로그램들을 사용하고 있습니다.

1. 알집

알집은 1999년 한글을 지원하지 않는 Winzip이 많이 사용되던 시절 국내 사용자들을 위해 한글인터페이스의 압축프로그램으로 등장해 많은 사랑을 받았지만 알집 4.9에서 ALZ포멧이 공개되면서 독점성 논란 및 안정성 논란등이 있었습니다.

저 같은 경우는 7-ZIP과 키플러님이 공개하신 트집(ALZ포멧 전용 해제프로그램)을 조합하여 ALZ포멧을 풀일 이 있을 경우에만 트집을 사용하고 있습니다.

그외에 대체 할 수 있는 프로그램으로는 유료소프트도 괜찮다면 세계적으로 인정받은 압축유틸리티인 Winrar와 트집 조합을 추천드리며, 프리웨어를 원하신다면 키플러님께서 제작하신 압축시대(술집)를 이용하시는 것도 추천드립니다. 그리고 안철수연구소에서 공개한 V3zip도 아직은 많이 부족하지만 좀 더 업데이트한다면 좋은 프로그램이 될 것이라 생각합니다.

그 외의 압축 프로그램은 다음과 같습니다.

빵집 : http://www.bkyang.com/

밤토리 : http://www.bamtory.com/new/solution/bamtory01.asp

다집 : http://datools.kr/datools5.htm

2. 알씨

이스트 소프트에서 이미지 뷰어 프로그램으로서 윈도우즈 컨텍스트메뉴를 통한 미리보기 기능 및 다양한 이미지 포멧지원 그리고 쉬운 인터페이스 등으로 많은 유저분들이 사용하고 있는 프로그램입니다.

하지만 현재는 사요하지 않아 수정되었는지 모르겠지만 이미지 변환을 사용하 gif포멧에서 발생하는 픽셀버그나 업데이트가 되어가면서 비교적 무거운 프로그램 리소스때문에 대체프로그램을 찾게 되었습니다.

제가 사용하는 대체 이미지 뷰어 프로그램은 프리웨어 XNview입니다. 한글도 지원하고 다양한 포멧 강력한 부가 기능 및 ACDSEE나 알씨에서 지원하는 컨텍스트 메뉴를 통한 미리보기 기능도 지원합니다. 또한 다양한 플러그인을 지원하고 다양한 옵션 설정을 통해 개인의 손에 맞춘 프로그램을 만들수 있다는게 강점입니다. 하지만 단점도 존재하는데 이미지를 압축해서 보관하시는 분들이 사용하기에는 조금 불편한 감이 있습니다.

이미지를 압축파일로서 보관하시는 분들은 키플러님께서 제작한 꿀뷰3를 이용하시는 편을 추천해 드리며 FastStone 역시 많은 사용자들이 사용하고 있는 강력한 프로그램입니다.

그 외의 뷰어 프로그램은 다음과 같습니다.

다씨 : http://datools.kr/Down4_1.htm

피카사 : http://picasa.google.com/intl/ko/

3. 알약

'전국민 보안 업그레이드'라는 기치 아래 개발한 바이러스 검사 소프트웨어인 알약은 실시간 감시 기능을 갖춘 유용한 보안 프로그램입니다. 해외에서 각종 인증이나 테스트에서도 상위권에 랭크되는 비트디펜더 최신 버전 엔진을 사용하여 높은 탐지율을 자랑하며 또한 자체 악성코드 DB 및 탐지 엔진 보유로 국내 환경에서 제작되고 유통되는 악성코드를 빠르게 대응하고 있기때문에 많은 국내 사용자들이 사용하고 있습니다.

제가 사용하는 프리웨어 보안프로그램은 AVG 안티 바이러스입니다. 사실 전에는 어베스트(아바스트)를 사용하였지만 얼마전 있은 대규모 오진오류로 인해 AVG로 갈아타게 되었습니다.

사실 보안 프로그램들은 각각의 장단점이 있기때문에 다른것을 추천한다기 보다 자신이 사용하기 편한 프로그램을 사용하시는 편이 좋습니다.

그 외의 무료 백신은 다음과 같습니다.

네이버 PC그린 : http://security.naver.com/index.nhn

V3 라이트 : http://v3lite.com/main.do

antiVir : http://www.free-av.com/

노턴 시큐리티 스캔 : http://security.symantec.com/sscv6/WelcomePage.asp

4. 알FTP

이스트소프트에서 제작한 FTP 클라이언트 및 FTP 서버 프로그램입니다. 사실 사용하지 않은지 꽤 오래되었기 때문에 어떤 프로그램인지는 말씀드리기 뭐 하지만 국내에서는 많은 유저분들이 사용하고 있는 FTP프로그램입니다.

FTP프로그램은 많은 분들도 알고 있고 세계적으로 인정받으면서 FTP프로그램 중 최고라고 불리는 파일질라를 추천해드립니다. 빠른 업데이트와 강력한 FTP 기능, 탭 형식을 통한 멀티접속 등이 강점입니다. 다양한 국가의 언어를 지원하며 한글도 역시 지원하고 있기 떄문에 파일질라를 한번 사용하시면 다른 FTP프로그램은 사용하지 못하게 될지도...

5. 알쇼

이스트소프트에서 제작한 동영상 재생 프로그램으로 시스템 리소스사용이 적은 편이며 기본적인 플수 코덱들은 플레이어에 내장되어 있어 특별히 코덱을 설치하지 않아도 왠만한 동영상을 재생하는데 무리는 없습니다.

제가 사용하고 있는 재생 프로그램은 다음 팟플레이어 입니다. 판도라 TV에서 인수한 KMP를 제작하신 강용희님께서 개발하여 KMP와 유사한 면이 있기도 하여 KMP를 사용하시던 유저분들도 불편함 없이 사용할 수 있습니다.

이 외에도 곰플레이어가 많이 사용되고 있습니다.

6. 알송

제가 유일하게 사용하고 있는 이스트소프트의 프로그램으로 가벼운 인터페이스와 대체하기 어려운 방대한 가사자료덕분에 알송을 사용하고 있습니다만 알송이외에도 유용한 프로그램이 많이 있습니다.

다른 프로그램으로는 다음과 같은 프로그램이 있습니다.

곰 오디오 : http://gom.gomtv.com/audioMain.html

Winamp : http://www.winamp.com/

aimp : http://aimp.ru/

foobar2000 : http://www.foobar2000.org/

이 외의 알툴즈의 프로그램은 사용해 본적이 없기 때문에 따로 추천해드리지는 않겠습니다. 이 글은 알툴즈 사용이 불편하시거나 다른 프로그램을 찾으시는 분들을 위한 글입니다.

마지막으로 유틸리티 프로그램에 최고라는 것은 없습니다. 그냥 자기 자신의 손에 맞는 프로그램을 사용하는것이 최고이니 자신에게 맞는 유틸리티를 선택하여 사용하시는 것이 제일 좋습니다.

CKEditor 설치 및 설정.

2010-01-03T20:30:00.000+09:00

블로그 통계를 확인하던 중 ckeditor를 검색해 들어오시는 분들 가운데

ckeditor 사용법을 검색해서 들어오시는 분들이 상당수 계시더군요.

혹시나 싶어서 포스팅 해둡니다.

A. 설치법.

먼저 http://ckeditor.com/ 에서 CK에디터를 다운로드 받습니다.

FTP를 이용해 자신의 계정에 ckeditor 폴더를 업로드 합니다.

사용할 페이지의 <head>와 </head> 사이에 아래 소스코드를 추가합니다.

[code]<script type="text/javascript" src="/업로드폴더/ckeditor.js"></script>[/code]

에디터를 사용할 텍스트에리어에 ID나 CLASS 어트리뷰트 값을 이용해 아래와 같이 적용할 수 있습니다.

1. ID를 이용한 방법.

[code]<textarea id="editor1" name="editor1" style="width:100%;height:200px;"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1' );
//]]>
</script>[/code]

2. CLASS를 이용한 방법.

[code]<textarea name="editor2" class="ckeditor" style="width:100%;height:200px;"></textarea>[/code]

예제 : http://coterie.hosting.paran.com/ckeditor/

B. 기본 설정법.

1. 스킨

[code]<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
skin:'스킨폴더명'
});
//]]>
</script>[/code]

※ CKeditor 에서는 3가지 스킨을 기본적으로 포함하고 있습니다. (kama,office2003,v2)

예제 : http://coterie.hosting.paran.com/ckeditor/index2.html

2. 인터페이스 컬러

CKEditor 기본스킨을 사용할 시 위지윅 에디터의 인터페이스 UI 컬러를 설정할 수 있습니다.

[code]<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
uiColor: '#14B8C4'
});
//]]>
</script>[/code]

예제 : http://coterie.hosting.paran.com/ckeditor/index3.html

3. 언어

ckeditor는 기본적으로 페이지의 언어에 맞춰 설정해 주지만 그렇지 않은경우 아래와 같이 가능합니다.

[code]<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor2',{
language : 'english'
});
//]]>
</script>[/code]

예제 : http://coterie.hosting.paran.com/ckeditor/index4.html

4. 엔터 모드

엔터나 시프트+엔터를 누를때의 입력되는 소스를 결정합니다.

1 = <p></p>

2 = <br />

3 = <div></div>

[code]<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
enterMode:'2'
shiftEnterMode:'3'
});
//]]>
</script>[/code]

예제 : http://coterie.hosting.paran.com/ckeditor/index5.html

5. 툴바

툴바에 출력할 아이콘을 설정할 수 있습니다.

[code]<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
toolbar:
[
['Bold','-', 'Italic'],
['NumberedList']
]
});
//]]>
</script>[/code]

예제 : http://coterie.hosting.paran.com/ckeditor/index6.html

기본 툴바는 아래와 같습니다. 원하는 것만 선택해서 사용하시면 됩니다.

['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']

C. 커스텀컨피그 파일 사용법.

자신이 설정한 config 파일을 통해 ckeditor를 커스터마이징 할 수 있습니다.

[code]<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',{
   customConfig : '커스텀설정js파일위치',
   width: '100%',
   height: 300
});
//]]>[/code]

아래는 전에 제가 사용하던 커스텀 설정입니다.

[code]CKEDITOR.editorConfig = function( config )
{
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
config.font_defaultLabel = 'Gulim';
config.font_names = 'Gulim/Gulim;Dotum/Dotum;Batang/Batang;Gungsuh/Gungsuh;Arial/Arial;Tahoma/Tahoma;Verdana/Verdana';
config.fontSize_defaultLabel = '12px';
config.fontSize_sizes = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;';
config.language = "ko";
config.resize_enabled = false;
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
config.startupFocus = true;
config.uiColor = '#EEEEEE';
config.toolbarCanCollapse = false;
config.menu_subMenuDelay = 0;
config.toolbar = [['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','-','Find','Replace','SelectAll','RemoveFormat','-','Image','Flash','Table','SpecialChar'],'/',['Source','-','ShowBlocks','-','Font','FontSize','Undo','Redo','-','About']];
};[/code]

예제 : http://coterie.hosting.paran.com/ckeditor/index7.html

2010년이 시작 되었네요.

2010-01-01T00:02:00.000+09:00

모두들 올 한해 행복하시고 새해 복 많이 받으시기 바랍니다.

jQuery를 이용한 유동적인 사이즈의 iframe 만들기

2009-12-27T17:13:00.000+09:00

iframe을 이용하여 페이지 이동없이 유동적인 페이지 사이징을 하거나 배경음악을

깔기위해(카페나 블로그) iframe을 이용해야할 때가 있을때 여러가지 방법으로 가능한

자바스크립트들이 있지만 이 방법은 jQuery를 이용한 방법입니다.

출처 : http://sonspring.com/journal/jquery-iframe-sizing

데모 : http://host.sonspring.com/iframe/

[code]$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName('iframe'); // Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the body height of the iframed content.
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
}
} // Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iResize, 0);
}
); // Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
// Set inline style to equal the body height of the iframed content.
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
}
);
}
}
);[/code]

jQuery 플러그인 - jQuery Cookie

2009-12-25T19:58:00.000+09:00

자바스크립트를 이용해 쿠키를 이용해야 할 때 PHP와는 다르게 자바스크립트는 따로 함수를 만들어 사용해야 합니다.

jQuery를 이용하면 보다 쉽게 쿠키를 만들고 사용할 수 있습니다.

간단한 사용방법

기본 구조 - $.cookie(키, 값, 옵션);

욥션값 - {expires:'',domain:'', path:'', secure:''}

-예제-

$.cookie('key', 'ok', {expires:7,domain:'textcube.com', path:'/', secure:0});
※ expires는 일[日]단위입니다.

출력 : alert($.cookie('happy_new_expire'));

출처 : http://plugins.jquery.com/node/5774

[code]jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};[/code]

요즘 들어...

2009-12-23T22:05:00.000+09:00

사이트 리뉴얼이다 뭐다...

이런저런 일 덕분에 블로그에 글올릴 겨를도 없구먼...

허허허...

2009년도 얼마 안남았고...

으허허헝

CSS를 이용한 레이어 고정

2009-12-21T17:41:00.000+09:00

CSS의 포지션 값인 fixed를 이용한면 레이어를 화면에 고정하여. 따라다니는 메뉴나 고정된 배너등을 쉽게 제작할 수 있습니다.

하지만 fixed는 IE6에서는 지원하지 않기 때문에 IE의 경우 오류가 발생하여 IE 조건부 주석을 이용하여 position 속성에 absolute를 주어 스크립트와 함께 조합해 화면을 따라다니는 레이어를 제작하였습니다.

아래 사용한 스타일의 자식셀렉터부분 body > .fixed_layer 은 IE6 자체가 자식셀렉트 개념을 이해하지 못해 캔슬하게 되어 조건부 주석에 있는 스타일을 적용하게 됩니다.

사실 IE6Hack을 이용해서 CSS를 구성하는 방법도 있지만 그 방법은 CSS 표준을 준수하지 않는 방법 이므로 조건부 주석을 잘 활용한다면 표준을 준수하며 IE6와의 크로스브라우징을 할 수 있습니다.

예제 : http://coterie.hosting.paran.com/fixed/

소스코드

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>테스트</title>
<style type="text/css">
* {
font-family:Gulim;
font-size:12px;
margin:0;
padding:0;
}
body > .fixed_layer {
background-color:#aaa;
width:100%;
position:fixed;
bottom:0;
left:0;
height:40px;
text-align:center;
z-index:10000;
}
</style>
<!--[if IE 6]>
<script type="text/javascript">
if (typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat') {
cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";
}
else {
cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";
}

var cot_tl_fixedCSS='.fixed_layer{background-color:#aaa;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'z-index:10000;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'width:100%;height:40px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'text-align:center;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'bottom:0;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'right:0;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;

document.write('<style type="text/css">'+ cot_tl_fixedCSS +'</style>');
</script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<? for($i=0;$i<200;$i++) { ?>
고정된 레이어 테스트<br />
<? } ?>
<div class="fixed_layer">고정된 레이어. 이부분에 고정된 내용을 입력하시면됩니다.</div>
</body>
</html>
[/code]

jQuery Plugin - jQuery Datepicker

2009-12-17T17:12:00.000+09:00

생일이라던가 특정날짜를 입력받아야 할 때 쉽고 간단하게 입력받을 수 있도록

도와주는 jQuery 플러그인입니다.

input 요소에 붙여 사용할 수있거나 달력을 따로 꺼내어 사용할 수도 있습니다.

한국어로되어있는 플러그인을 제공하고 있기때문에 사용하는데 문제도 없습니다.

출처 및 다운로드 : http://keith-wood.name/datepick.html

CSS Box Model - Margin, Padding

2009-12-16T17:54:00.000+09:00

Margin

1. margin

지정한 요소의 테두리 밖 공간의 길이를 정의합니다.

margin-top : 테두리 윗 공간의 길이를 정의합니다. (px, pt, cm, em 등)
margin-right : 테두리 오른쪽 공간의 길이를 정의합니다. (px, pt, cm, em 등)
margin-bottom : 테두리 아래 공간의 길이를 정의합니다. (px, pt, cm, em 등)
margin-left : 테두리 왼쪽 공간의 길이를 정의합니다. (px, pt, cm, em 등)

기본값 : 0
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.margin="10px 5px"

CSS 코드

[code]p.ex1 {margin:2px 4px 3px 4px}[/code]

HTML 코드

[code]<p>테스트 문장 1</p>
<p class="ex1">테스트 문장 2</p>
<p>테스트 문장 3</p>[/code]

출력결과

테스트 문장 1

테스트 문장 2

테스트 문장 3

2. margin-top, margin-bottom, margin-left, margin-right

지정한 요소의 위치에 테두리 밖 공간의 길이를 정의합니다.

auto : 해당 위치의 공간을 자동으로 계산하여 맞춥니다.
length : 지정한 값으로 공간의 길이를 정의합니다.
% : 지정한 %값으로 공간의 길이를 정의합니다.

기본값 : 0
상속 : 하지않음.
버전 : CSS1
자바스크립트 문법 : object.style.marginTop="10px"
object.style.marginBottom="10px"
object.style.marginLeft="10px"
object.style.marginRight="10px"

CSS 코드

[code]p.ex1 {
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px;
}[/code]

HTML 코드

[code]<p>테스트 문장 1</p>
<p class="ex1">테스트 문장 2</p>
<p>테스트 문장 3</p>[/code]

출력결과

테스트 문장 1

테스트 문장 2

테스트 문장 3

Padding

1. padding

지정한 요소의 테두리와 내용의 사이에 공간의 길이를 정의합니다.

padding-top : 테두리와 내용의 사이에 윗 공간의 길이를 정의합니다. (px, pt, cm, em 등)
padding-right : 테두리와 내용의 사이에 오른쪽 공간의 길이를 정의합니다. (px, pt, cm, em 등)
padding-bottom : 테두리와 내용의 사이에 아래 공간의 길이를 정의합니다. (px, pt, cm, em 등)
padding-left : 테두리와 내용의 사이에 왼쪽 공간의 길이를 정의합니다. (px, pt, cm, em 등)

기본값 : 0
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.margin="10px 5px"

CSS 코드

[code]p.ex1 {margin:2cm 4cm 3cm 4cm}[/code]

HTML 코드

[code]<p>테스트 문장 1</p>
<p class="ex1">테스트 문장 2</p>
<p>테스트 문장 3</p>[/code]

출력결과

테스트 문장 1

테스트 문장 2

테스트 문장 3

2. padding-top, padding-bottom, padding-left, padding-right

지정한 요소의 위치에 맞는 테두리와 내용의 사이에 길이를 정의합니다.

기본값 : 0
상속 : 하지않음.
버전 : CSS1
자바스크립트 문법 : object.style.paddingTop="10px"
object.style.paddingBottom="10px"
object.style.paddingLeft="10px"
object.style.paddingRight="10px"

CSS 코드

[code]p.ex1 {
padding-top:3pt;
padding-bottom:3pt;
padding-left:3pt;
padding-right:3pt;
}[/code]

HTML 코드

[code]<p>테스트 문장 1</p>
<p class="ex1">테스트 문장 2</p>
<p>테스트 문장 3</p>[/code]

출력결과

테스트 문장 1

테스트 문장 2

테스트 문장 3

CSS Box Model - Outlines

2009-12-15T12:40:00.000+09:00

outline

※ 이 속성은 IE의 경우 8에서만 지원합니다. 출력 결과를 IE8과 그 이외의 브라우저에서만 확인할 수 있습니다.

1. outline

지정한 요소의 테두리의 가장자리 선의 스타일을 정의합니다.

outline-color : 아웃라인의 색을 정의합니다.
outline-style : 아웃라인의 스타일을 정의합니다.
outline-width : 아웃라인의 두께를 정의합니다.
inherit : 어미요소의 outline 스타일을 상속받습니다.

기본값 : invert none medium
상속 : 없음
버전 : CSS2
자바스크립트 문법 : object.style.outline="#0000FF dotted thin"

CSS 코드

[code]p {
border:1px solid red;
outline:green dotted thick;
}[/code]

HTML 코드

[code]<p>테스트 아웃라인</p>[/code]

출력결과

테스트 아웃라인

2. outline-color

지정한 요소의 아웃라인의 색을 정의합니다.

color_name : 색이름으로 색을 정의합니다.
hex_number : 핵스코드로 색을 정의합니다.
rgb_number : RGB코드로 색을 정의합니다.
invert : 색상을 전환합니다. 배경, 내용의 색상에 상관없이 볼 수 있습니다.
inherit : 어미 요소의 outline-color 스타일을 상속받습니다.

기본값 : invert
상속 : 상속함
버전 : CSS2
자바스크립트 문법 : object.style.outlineColor="#00FF00"

CSS 코드

[code]p {
border:1px solid red;
outline-style:dotted;
outline-color:#00f;
}[/code]

HTML 코드

[code]<p>테스트 아웃라인</p>[/code]

출력결과

테스트 아웃라인

3. outline-style

지정한 요소의 아웃라인 스타일을 정의합니다.

none : 아웃라인을 정의하지 않습니다.

dotted : 아웃라인의 스타일을 dotted 로 정의합니다.

dashed : 아웃라인의 스타일을 dashed 로 정의합니다.

solid : 아웃라인의 스타일을 solid 로 정의합니다.

ridge : 아웃라인의 스타일을 ridge 로 정의합니다.

double : 아웃라인의 스타일을 double 로 정의합니다.

groove : 아웃라인의 스타일을 groove 로 정의합니다.

inset : 아웃라인의 스타일을 inset 로 정의합니다.

outset : 아웃라인의 스타일을 outset 로 정의합니다.

기본값 : none
상속 : 하지 않음
버전 : CSS2
자바스크립트 문법 : object.style.outlineStyle="dotted"

CSS 코드

[code]p {
border:1px solid red;
outline-color:#00ff00;
outline-style:dotted;
}[/code]

HTML 코드

[code]<p>테스트 아웃라인</p>[/code]

출력결과

테스트 아웃라인

4. outline-width

지정한 요소의 아웃라인 두께를 정의합니다.

thin : 아웃라인 두께를 thin 으로 설정합니다.
medium : 아웃라인 두께를 medium 으로 설정합니다.
thick : 아웃라인 두께를 thick 으로 설정합니다.
length : 아웃라인 두께를 지정한 값으로 설정합니다.
inherit : 어미 요소의 ouline-width 스타일을 상속받습니다.

기본값 : medium
상속 : 하지않음
버전 : CSS2
자바스크립트 문법 : object.style.outlineWidth="thin"

CSS 코드

[code]p.one {
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
p.two {
border:1px solid red;
outline-style:dotted;
outline-width:3px;
}[/code]

HTML 코드

[code]<p class="one">테스트 아웃라인</p><br /><p class="two">테스트 아웃라인</p>[/code]

출력결과

테스트 아웃라인

CSS Styling - Fonts

2009-12-14T14:12:00.000+09:00

Fonts

1. font

지정한 요소의 폰트설정을 합니다.

font-style : 폰트의 스타일을 정의합니다.
font-variant : 폰트의 소문자를 작은대문자로 설정합니다.
font-weight : 폰트의 두께를 정의합니다.
font-size : 폰트의 사이즈를 정의합니다.
line-height : 글자간 높이를 정의합니다.
font-family : 폰트를 지정합니다.
caption : 폰트를 컨트롤 자막 스타일로 정의합니다.
icon : 폰트를 아이콘 라벨 스타일로 정의합니다.
menu : 폰트를 드롭다운 메뉴 스타일로 정의합니다.
message-box : 폰트를 다이얼로그 박스 스타일로 정의합니다.
small-caption : 폰트를 작은 자막 스타일로 정의합니다.
status-bar : 폰트를 스테이터스바 스타일로 정의합니다.
inherit : 어미요소의 font 속성을 상속받습니다.
※ 일부 속성들은 브라우저마다 표현의 차이가 있습니다.

기본값 : 없음
상속 : 상속함.
버전 : CSS1
자바스크립트 문법 : object.style.font="italic small-caps bold 12px arial,sans-serif"

CSS 코드

p {
font:italic small-caps bold 24px arial,sans-seri;
}

HTML 코드

출력결과

테스트

2. font-family

지정한 요소의 글씨체를 정의합니다.

family-name : 폰트 종류 및 그룹을 지정합니다.
generic-family : 폰트 종류 및 그룹을 지정합니다.
inherit : 어미 요소의 font-family를 상속 받습니다.

기본값 : 없음
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontFamily="arial,sans-serif"

CSS 코드

p {
font-family:Gungsuh, Dotum, Gulim, arial;
}

HTML 코드

출력결과

테스트

3. font-size

지정한 요소의 폰트 사이즈를 정의합니다.

xx-small : 폰트의 사이즈를 xx-small로 설정합니다.
x-small : 폰트의 사이즈를 x-small로 설정합니다.
small : 폰트의 사이즈를 small로 설정합니다.
medium : 폰트의 사이즈를 medium로 설정합니다.
large : 폰트의 사이즈를 large로 설정합니다.
x-large : 폰트의 사이즈를 x-large로 설정합니다.
xx-large : 폰트의 사이즈를 xx-large로 설정합니다.
smaller : 폰트의 사이즈를 smaller로 설정합니다.
larger : 폰트의 사이즈를 larger로 설정합니다.
length : 폰트의 사이즈를 지정한 값으로 설정합니다. (px, em, cm 등)
% : 폰트의 사이즈를 %값으로 설정합니다.
inherit : 어미 요소의 font-size 속성을 상속받습니다.

기본값 : medium
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontSize="larger"

CSS 코드

p.test1 {
font-size:xx-small;
}
p.test2 {
font-size:xx-large;
}

HTML 코드

출력결과

테스트

4. font-style

지정한 요소의 폰트 스타일을 정의합니다.

normal : 폰트를 기본 설정합니다.
italic : 폰트에 italic효과를 줍니다.
oblique : 폰트에 oblique효과를 줍니다.
inherit : 어미 요소의 font-style을 상속받습니다.

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontStyle="italic"

CSS 코드

p.test1 {
font-style:italic;
}
p.test2 {
font-style:oblique;
}

HTML 코드

출력결과

테스트

5. font-variant

지정한 요소에 폰트의 소문자를 작은 대문자로 변환합니다.

normal : 폰트를 기본 설정합니다.
small-caps : 폰트의 소문자를 작은 대문자로 변환합니다.
inherit : 어미 요소의 font-variant를 상속받습니다.

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontVariant="small-caps"

CSS 코드

p {
font-variant:small-caps;
}

HTML 코드

<p>SHOW ME THE MONEY</p>
<p>Show Me The Money</p>

출력결과

6. font-weight

지정한 요소의 폰트 두께를 설정합니다.

normal : 폰트 두께를 기본으로 설정합니다.
bold : 폰트 두께를 thick 설정합니다.
bolder : 폰트 두께를 thicker 설정합니다.
lighter : 폰트 두께를 lighter 설정합니다.
100 : 폰트의 두께를 수치에 맞춰 설정합니다.
200 : 폰트의 두께를 수치에 맞춰 설정합니다.
300 : 폰트의 두께를 수치에 맞춰 설정합니다.
400 : 폰트의 두께를 수치에 맞춰 설정합니다.
500 : 폰트의 두께를 수치에 맞춰 설정합니다.
600 : 폰트의 두께를 수치에 맞춰 설정합니다.
700 : 폰트의 두께를 수치에 맞춰 설정합니다.
800 : 폰트의 두께를 수치에 맞춰 설정합니다.
900 : 폰트의 두께를 수치에 맞춰 설정합니다.
inherit : 어미 요소의 font-weight를 상속받습니다.

기본값 : normal
상속 : 상속합
버전 : CSS1
자바스크립트 문법 : object.style.fontWeight="900"

CSS 코드

p { font-size:24pt; }
p.test1 { font-weight:bold; }
p.test1 { font-weight:bolder; }
p.test1 { font-weight:lighter; }
p.test1 { font-weight:400; }
p.test1 { font-weight:800; }

HTML 코드

출력결과

테스트

CSS Box Model - Border (2)

2009-12-13T14:53:00.000+09:00

1. border

지정한 박스요소에 테두리를 정의합니다.

border-width : 테두리의 두께를 정의합니다.
border-style : 테두리의 스타일을 정의합니다.
border-color : 테두리의 색을 정의합니다.

기본값 : 없음
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.border="3px solid blue"

CSS 코드

p {
border:3px solid #f00;
}

HTML 코드

<p>border:3px solid #f00;</p>

출력결과

border:3px solid #f00;

2. border-top, border-bottom, border-left, border-right

지정한 박스요소에 지정한 위치의 테두리를 정의합니다.

border-위치-width : 지정한 위치에 테두리의 두께를 정의합니다.
border-위치-style : 지정한 위치에 테두리의 스타일을 정의합니다.
border-위치-color :지정한 위치에 테두리의 색을 정의합니다.
inherit : 어미 요소의 border-위치-width 스타일을 상속받습니다.
※ 위치값 : top, bottom, left, right

기본값 : 없음
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.borderTop="3px solid blue"
object.style.borderBottom="3px solid blue"
object.style.borderLeft="3px solid blue"
object.style.borderRight="3px solid blue"

CSS 코드

p {
border-top:3px solid #f00;
border-bottom:3px dotted #0f0;
border-left:3px dashed #00f;
border-right:3px double #f0f;
}

HTML 코드

<p>border-top:3px solid #f00;border-bottom:3px dotted #0f0;border-left:3px dashed #00f;border-right:3px double #f0f;</p>

출력코드

border-top:3px solid #f00;border-bottom:3px dotted #0f0;border-left:3px dashed #00f;border-right:3px double #f0f;

3. border-top-style, border-bottom-style, border-left-style, border-right-style

지정한 박스요소에 테두리 지정한 위치의 스타일을 정의합니다.

none : 테두리를 정의하지 않습니다.

dotted: 테두리를 점으로 정의합니다.

dashed: 테두리를 점선으로 정의합니다.

solid: 테두리를 선으로 정의합니다.

double: 테두리를 두개의 선으로 정의합니다.

groove: 테두리를 3D형태의 groove로 정의합니다.

ridge: 테두리를 3D형태의 ridge로 정의합니다.

inset: 테두리를 3D형태의 inset으로 정의합니다.

outset: 테두리를 3D형태의 outset으로 정의합니다.

hidden : 테두리를 숨깁니다.

기본값 : 없음
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.borderTopStyle="solid"
object.style.borderBottomStyle="solid"
object.style.borderLeftStyle="solid"
object.style.borderRightStyle="solid"

CSS 코드

p {
border-top-style:solid;
border-bottom-style:dotted;
border-left-style:dashed;
border-right-style:double;
}

HTML 코드

<p>border-top-style:solid;border-bottom-style:dotted;border-left-style:dashed;border-right-style:double;</p>

출력 결과

4. border-top-width, border-bottom-width, border-left-width, border-right-width

thin : 테두리를 가는선으로 지정합니다.
medium : 테두리를 적당히 두꺼운 선으로 지정합니다.
thick : 테두리를 아주 두꺼운 선으로 지정합니다.
length : 테두리를 길이값으로 지정합니다.
inherit : 어미 요소의 border-width의 스타일값을 상속받습니다.

기본값 : medium
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.borderTopWidth="thick"
object.style.borderBottomWidth="thick"
object.style.borderLeftWidth="thick"
object.style.borderRightWidth="thick"

CSS 코드

p {
border-top-style:solid;
border-top-width:thick;
border-bottom-style:dotted;
border-bottom-width:medium;
border-left-style:dashed;
border-left-width:thick;
border-right-style:double;
border-right-width:10px;
}

HTML 코드

<p>border-top-style:solid;border-top-width:thick;border-bottom-style:dotted;border-bottom-width:medium;border-left-style:dashed;border-left-width:thick;border-right-style:double;border-right-width:10px;</p>

출력 결과

5. border-top-color, border-bottom-color, border-left-color, border-right-color

color_name : 테두리의 색을 색이름으로 정의합니다.
hex_number : 테두리의 색을 Hex값으로 정의합니다.
rgb_number : 테두리의 색을 RGB값으로 정의합니다.
transparent : 테두리의 색을 투명으로 정의합니다.
inherit : 어미 요소의 border-color 요소를 상속받습니다.

기본값 : 없음
상속 : 하지않음.
버전 : CSS1
자바스크립트 문법 : object.style.borderTopColor="blue"
object.style.borderBottomColor="blue"
object.style.borderLeftColor="blue"
object.style.borderRightColor="blue"

CSS 코드

p {
border-top-style:solid;
border-top-color:blue;
border-bottom-style:dotted;
border-bottom-color:transparent;
border-left-style:dashed;
border-left-color:#f00;
border-right-style:double;
border-right-color:rgb(0,100,0);
}

HTML 코드

<p>border-top-style:solid;border-top-color:blue;border-bottom-style:dotted;border-bottom-color:transparent;border-left-style:dashed;border-left-color:#f00;border-right-style:double;border-right-color:rgb(0,100,0);<p>

출력 결과

CSS Box Model - Border (1)

2009-12-13T00:30:00.000+09:00

Box MoDel

1. border-style

지정한 박스요소의 테두리의 스타일을 정의합니다.

none : 테두리를 정의하지 않습니다.

dotted: 테두리를 점으로 정의합니다.

dashed: 테두리를 점선으로 정의합니다.

solid: 테두리를 선으로 정의합니다.

double: 테두리를 두개의 선으로 정의합니다.

groove: 테두리를 3D형태의 groove로 정의합니다.

ridge: 테두리를 3D형태의 ridge로 정의합니다.

inset: 테두리를 3D형태의 inset으로 정의합니다.

outset: 테두리를 3D형태의 outset으로 정의합니다.

hidden : 테두리를 숨깁니다.

기본값 : 없음
상속 : 하지 않음.
버전 : CSS1
자바스크리트 문법 : object.style.borderStyle="dotted double"

CSS 코드

p.test1 { border-style:dotted; }
p.test2 { border-style:dashed solid; }
p.test3 { border-style:dashed double solid; }
p.test4 { border-style:dashed double solid hidden; }

HTML 코드

<p class="test1">border-style:dotted;</p>
<p class="test2">border-style:dashed solid;</p>
<p class="test3">border-style:dashed double solid;</p>
<p class="test4">border-style:dashed double solid hidden;</p>

출력결과

2. border-width

지정한 박스요소의 테두리 두깨를 지정합니다.

기본값 : medium
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.borderWidth="thin thick"

CSS 코드

p.test1 {
border-style:solid;
border-width:10px;
}
p.test2 {
border-style:solid;
border-width:10px thin;
}
p.test3 {
border-style:solid;
border-width:10px medium thin;
}
p.test4 {
border-style:solid;
border-width:10px medium thin thick;
}

HTML 코드

<p class="test1">border-style:solid;border-width:10px;</p>
<p class="test2">border-style:solid;border-width:10px thin;</p>
<p class="test3">border-style:solid;border-width:10px medium thin;</p>
<p class="test4">border-style:solid;border-width:10px medium thin thick;</p>

출력결과

3. border-color

지정한 박스요소의 테두리의 색을 정의합니다.

기본값 : 없음
상속 : 하지않음.
버전 : CSS1
자바스크립트 문법 : object.style.borderColor="#FF0000 blue"

CSS 코드

p.test1 {
border-style:double;
border-color:red;
}
p.test2 {
border-style:solid;
border-color:red transparent;
}
p.test3 {
border-style:double;
border-color:red transparent #00f;
}
p.test4 {
border-style:double;
border-color:red #00f transparent rgb(0,255,0);
}

HTML 코드

<p class="test1">border-style:solid;border-color:red;</p>
<p class="test2">border-style:solid;border-color:red transparent;</p>
<p class="test3">border-style:solid;border-color:red transparent #00f;</p>
<p class="test4">border-style:solid;border-color:red #00f transparent rgb(0,255,0);</p>

출력화면

CSS Styling - Tables

2009-12-10T10:01:00.000+09:00

Tables

1. Table Borders

CSS 코드

table, th, td {
border: 1px solid black;
}

HTML 코드

출력내용

테스트1	테스트2
내용1	내용2
내용3	내용4

2. Table Borders

CSS 코드

table {
border-collapse:collapse;
}
table,th, td {
border: 1px solid black;
}

HTML 코드

출력내용

3. Table Width and Height

CSS 코드

table,td,th {
border:1px solid black;
}
table {
width:100%;
}
th {
height:50px;
}

HTML 코드

출력내용

테스트1	테스트2
내용1	내용2
내용3	내용4

4. Table Text Alignment

CSS 코드

table, th, td {
border: 1px solid black;
}
td {
height:50px;
vertical-align:bottom;
text-align:right;
}

HTML 코드

출력내용

테스트1	테스트2
내용1	내용2
내용3	내용4

5. Table Padding

CSS 코드

td {
padding:15px;
}

HTML 코드

출력코드

테스트1	테스트2
내용1	내용2
내용3	내용4

6. Table Color

CSS 코드

table, td, th {
border:1px solid green;
}
th {
background-color:green;
color:white;
}

HTML 코드

출력코드

테스트1	테스트2
내용1	내용2
내용3	내용4

CSS Styling - Lists

2009-12-09T10:21:00.000+09:00

Lists

1. list-style

지정한 요소의 리스트의 스타일을 지정합니다.

inherit : 어미 요소의 리스트 스타일을 상속받습니다.

기본값 : disc outside none
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.listStyle="decimal inside"

2. list-style-image

지정한 요소의 리스트 마커를 이미지로 지정합니다.

URL : 리스트 마커를 이미지 URL로 지정합니다.
none : 리스트 마커를 이미지로 지정하지 않습니다.
inherit : 어미 요소의 list-style-image을 상속받습니다.

기본값 : none
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.listStyleImage="url('/images/blueball.gif')"

CSS 코드

ul {
list-style-image:url(test.gif');
}

HTML 코드

출력결과

리스트1
리스트2
리스트3

3. list-style-position

지정한 요소의 리스트 마커의 포지션을 지정합니다.

inside : 리스트 마커를 안에 표시합니다.
outside : 리스트 마커를 밖에 표시합니다.
inherit : 어미 요소의 list-style-position을 상속받습니다.

기본값 : outside
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.listStylePosition="inside"

CSS 코드

ul1 {
list-style-position:outside;
}
ul2 {
list-style-position:inside;
}
li {
border:1px solid #000;
}

HTML 코드

출력결과

리스트1
리스트2
리스트3

리스트1
리스트2
리스트3

4. list-style-type

지정한 요소의 리스트 스타일 타입을 지정합니다.

none : 리스트 마커를 나타내지 않습니다.
disc : 리스트 마커를 검은 원형으로 나타냅니다.
circle : 리스트 마커를 원형으로 나타냅니다.
square : 리스트 마커를 사각형으로 나타냅니다.
decimal : 리스트 마커를 숫자로 나타냅니다.
decimal-leading-zero : 리스트 마커를 숫자로 나타냅니다. (01,02,03...) [IE미지원]
armenian : 리스트 마커를 아르메니아어로 나타냅니다. [IE미지원]
georgian : 리스트 마커를 그루지야어로 나타냅니다. [IE미지원]
lower-alpha : 리스트 마커를 영문 소문자로 나타냅니다.
upper-alpha : 리스트 마커를 영문 대문자로 나타냅니다.
lower-greek : 리스트 마커를 그리스어 소문자로 나타냅니다. [IE미지원]
lower-latin : 리스트 마커를 라틴어 소문자로 나타냅니다. [IE미지원]
upper-latin : 리스트 마커를 라틴어 대문자로 나타냅니다. [IE미지원]
lower-roman : 리스트 마커를 로마식 소문자로 나타냅니다. (i,ii,iii...)
upper-roman : 리스트 마커를 로마식 대문자로 나타냅니다. (I,II,III...)
inherit : 어미 요소의 list-style-type을 상속받습니다.

기본값 : disc
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.listStyleType="square"

CSS 코드

.list1 {list-style-type:none;}
.list2 {list-style-type:circle;}
.list3 {list-style-type:disc;}
.list4 {list-style-type:square;}
.list5 {list-style-type:armenian;}
.list6 {list-style-type:decimal;}
.list7 {list-style-type:decimal-leading-zero;}
.list8 {list-style-type:georgian;}
.list9 {list-style-type:lower-alpha;}
.list10 {list-style-type:lower-greek;}
.list11 {list-style-type:lower-latin;}
.list12 {list-style-type:lower-roman;}
.list13 {list-style-type:upper-alpha;}
.list14 {list-style-type:upper-latin;}
.list15 {list-style-type:upper-roman;}
p { border:1px solid #000; }

HTML 코드

예제 : http://coterie.hosting.paran.com/style/lists.html

IE의 경우 일부 타입을 지원하지 않습니다. 제대로된 결과를 보려면 파이어폭스,크롬,오페라로 접속해보세요.

CSS Styling - Links

2009-12-09T09:30:00.000+09:00

Links

링크를 자신이 원하는 방식으로 꾸밀 수 있습니다.

a:link - 방문하지않은 링크의 스타일입니다.
a:visited - 방문한 링크의 스타일입니다.
a:hover - 마우스를 올려놓았을때의 스타일입니다.
a:active - 링크를 클릭하는 순간의 스타일입니다.

CSS 코드

a:link {text-decoration:none;background-color:#B2FF99;}
a:visited {text-decoration:none;background-color:#FFFF85;}
a:hover {text-decoration:underline;background-color:#FF704D}
a:active {text-decoration:underline;background-color:#FF704D;}

HTML 코드

출력결과

구글

CSS Styling - Text

2009-12-08T15:03:00.000+09:00

Text

1. color

지정한 요소의 TEXT색상을 지정합니다.

color-rgb : RGB값으로 TEXT의 색상을 지정합니다. [예: rgb(255,255,0), rgb(150,222,324) 등]
color-hex : Hex값으로 TEXT의 색상을 지정합니다. [예: #000, #fff, #373737 등]
color-name : 색이름으로 TEXT의 색상을 지정합니다. [예: red, blue, yellow 등]

기본값 : 없음
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.color="#FF0000"

CSS 코드

.font1 {
color:#00f;
}
.font2 {
color:rgb(255,0,0);
}
.font3 {
color:darkgray;
}

HTML 코드

출력결과

테스트
테스트
테스트

2. direction

지정한 요소의 내용에 텍스트위치를 지정합니다.

ltr : 내용의 텍스트를 왼쪽에 위치합니다.
rtl : 내용의 텍스트를 오른쪽에 위치합니다.

기본값 : ltr
상속 : 상속함
버전 : CSS2
자바스크립트 문법 : object.style.direction="rtl"

CSS 코드

div {
border:1px solid #000;
}
.ltr {
direction:ltr;
}
.rtl {
direction:rtl;
}

HTML 코드

출력결과

ltr 텍스트

rtl 텍스트

3. line-height

지정한 요소의 줄간격을 지정합니다.

normal : 줄간격을 기본값으로 지정합니다.
number : 지정한 숫자값 만큼의 크기 만큼 줄간격을 지정합니다.
length : 지정한 길이값 만큼 줄간격을 지정합니다.
% : 지정한 %값 만큼의 줄간격을 지정합니다.

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.lineHeight="2"

CSS 코드

div {
border:1px solid #000;
}
.line1 {
line-height:normal;
}
.line2 {
line-height:3;
}
.line3 {
line-height:15px;
}
.line4 {
line-height:50%;
}

HTML 코드

출력결과

줄
간
격

4. letter-spacing

지정한 요소의 글간격을 지정합니다.

normal : 글간격을 기본값으로 지정합니다.
length : 지정한 값만큼 글간격을 지정합니다.

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.letterSpacing="3px"

CSS 코드

div {
border:1px solid #000;
}
.spacing1 {
letter-spacing:5px;
}

HTML 코드

출력결과

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세

5. text-align

지정한 요소의 텍스트 정렬기준을 지정합니다.

left : 텍스트를 왼쪽에서 오른쪽으로 정렬합니다.
right : 텍스트를 오른쪽에서 왼쪽으로 정렬합니다.
center : 텍스트를 중앙으로 정렬합니다.
justify : 텍스트를 양쪽에 맞춰 정렬합니다.

기본값 : direction 값이 ltr 일 경우 left, rtl 일 경우 right
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.textAlign="right"

CSS 코드

div {
border:1px solid #000;
}
.align1 {
text-align:left;
}
.align2 {
text-align:right;
}
.align3 {
text-align:center;
}
.align4 {
text-align:justify;
}

HTML 코드

출력결과

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세

6. text-decoration

지정한 요소의 텍스트에 꾸밈세를 추가합니다.

none : 텍스트를 꾸미지 않습니다.
underline : 텍스트에 밑줄효과를 줍니다.
overline : 텍스트에 윗줄효과를 줍니다.
line-through : 텍스트에 취소선효과를 줍니다.
blink : 텍스트에 깜박임효과를 줍니다. [IE,Chrome,safari 미지원]

기본값 : none
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.textDecoration="overline"

CSS 코드

.decoration1 {
text-decoration:underline;
}
.decoration2 {
text-decoration:overline;
}
.decoration3 {
text-decoration:line-through;
}
.decoration4 {
text-decoration:blink;
}

HTML 코드

<span class="decoration1">테스트 문장입니다.</span>
<span class="decoration2">테스트 문장입니다.</span>
<span class="decoration3">테스트 문장입니다.</span>
<span class="decoration4">테스트 문장입니다.</span>

출력결과

테스트 문장입니다.

테스트 문장입니다. [IE나 크롬, 사파리는 깜박이지 않습니다.]

7. text-indent

지정한 요소의 첫번째 줄의 들여쓰기를 지정합니다.

length : 지정한 수치만큼 들여쓰기합니다.
% : 지정한 %값 만큼 들여쓰기합니다.

기본값 : 없음
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.textIndent="50px"

CSS 코드

div {
border:1px solid #000;
}
.indent1 {
text-indent:15px;
}
.indent2 {
text-indent:20%;
}

HTML 코드

출력결과

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세

8. text-transform

지정한 요소의 영문문자를 지정합니다.

none : 문자를 기본값으로 변환합니다.
capitalize : 문자의 첫번째 문자를 대문자로 변환합니다.
uppercase : 문자의 모든 문자를 대문자로 변환합니다.
lowercase : 문자의 모든 문자를 소문자로 변환합니다.

기본값 : none
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.textTransform="uppercase"

CSS 코드

.transform1 {
text-transform:capitalize;
}
.transform2 {
text-transform:uppercase;
}
.transform3 {
text-transform:lowercase;
}

HTML 코드

<div class="transform1">테스트 문장입니다. This is some text.</div>
<div class="transform2">테스트 문장입니다. This is some text.</div>
<div class="transform3">테스트 문장입니다. This is some text.</div>

출력결과

테스트 문장입니다. This is some text.

9. vertical-align

지정한 요소의 수직정렬을 지정합니다.

baseline : 부모요소를 기준으로 기본정렬합니다.
sub : 같은줄에 있는 텍스트에 위 첨자 효과를 줍니다.
super : 같은줄에 있는 텍스트에 아래 첨자 효과를 줍니다.
top : 같은줄에 있는 텍스트를 가장 위에있는 요소에 맞춰 정렬합니다.
text-top : 요소의 아래쪽에 부모 요소 글꼴의 상단과 일치시켜 지정합니다.
middle : 같은줄에 있는 텍스트를 중앙으로 정렬합니다.
bottom : 같은줄에 있는 텍스트를 가장 아래있는 요소에 맞춰 정렬합니다. 브라우저간 차이가 있습니다.
text-bottom : 요소의 아래쪽에 부모 요소 글꼴의 하단과 일치시켜 지정합니다.
length : 같은줄에 있는 텍스트를 지정한 값만큼 수직정렬합니다. 음수값은 허용하지 않습니다.
% : 같은줄에 있는 텍스트를 지정한 %값만큼 수직정렬합니다. 음수값은 허용하지 않습니다.

기본값 : baseline
상속 : 상속안함.
버전 : CSS1
자바스크립트 문법 : object.style.verticalAlign="bottom"

CSS 코드

p {
padding:10px;
border:1px solid #000;
}
.test0 {
vertical-align:baseline;
}
.test1 {
vertical-align:sub;
}
.test2 {
vertical-align:super;
}
.test3 {
vertical-align:top;
}
.test4 {
vertical-align:text-top;
}
.test5 {
vertical-align:middle;
}
.test6 {
vertical-align:bottom;
}
.test7 {
vertical-align:text-bottom;
}
.test8 {
vertical-align:15px;
}
.test9 {
vertical-align:120%;
}

HTML 코드

<p>baseline<img src="korea.jpg" border="0" alt="" class="test0" />테스트문장</p>
<p>sub<img src="korea.jpg" border="0" alt="" class="test1" />테스트문장</p>
<p>super<img src="korea.jpg" border="0" alt="" class="test2" />테스트문장</p>
<p>top<img src="korea.jpg" border="0" alt="" class="test3" />테스트문장</p>
<p>text-top<img src="korea.jpg" border="0" alt="" class="test4" />테스트문장</p>
<p>middle<img src="korea.jpg" border="0" alt="" class="test5" />테스트문장</p>
<p>bottom<img src="korea.jpg" border="0" alt="" class="test6" />테스트문장</p>
<p>text-bottom<img src="korea.jpg" border="0" alt="" class="test7" />테스트문장</p>
<p>15px<img src="korea.jpg" border="0" alt="" class="test8" />테스트문장</p>
<p>120%<img src="korea.jpg" border="0" alt="" class="test9" />테스트문장</p>

출력예제 : http://coterie.hosting.paran.com/style/vertical-align.html

※ 해당 예제는 브라우저간 출력에 약간의 차이가 있습니다.

10. white-space

지정한 요소의 문자 사이의 공백(space)처리를 지정합니다. IE와 다른브라우저간의 차이가 있습니다.

normal : 공백 처리를 기본값으로 지정합니다.
pre : 문장이 가로길이보다 길경우 줄바꿈하지 않고  (non-breaking space)를 사용하지 않아도 스페이스로 글을 띄울수 있습니다.
nowrap : 문장이 가로길이보다 길경우 줄바꿈하지 않고  를 이용해 글을 띄울수 있습니다.
pre-line : 글을 가로길이보다 길경우 줄바꿈하고  를 이용해 글을 띄울수 있습니다.
pre-wrap : 글을 가로길이보다 길경우 줄바꿈하고  를 사용하지 않아도 스페이스로 글을 띄울수 있습니다. [IE미지원]

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.whiteSpace="pre"

CSS 코드

table {
width:200px;
table-layout:fixed;
}
.test1 {
white-space:pre;
}
.test2 {
white-space:nowrap;
}
.test3 {
white-space:pre-line;
}
.test4 {
white-space:pre-wrap;
}

HTML 코드

<table border="1">
<tr>
<td class="test1">가나다 라마바사아자차카파타하가나다라마바사아자차카파타하</td>
</tr>
<tr>
<td class="test2">가나다 라마바사아자차카파타하가나다라마바사아자차카파타하</td>
</tr>
<tr>
<td class="test3">가나다 라마바사아자차카파타하가나다라마바사아자차카파타하</td>
</tr>
<tr>
<td class="test4">가나다 라마바사아자차카파타하가나다라마바사아자차카파타하</td>
</tr>
</table>

출력결과

상단의 결과가 IE의 결과 이고 하단의 결과가 다른 브라우저의 결과입니다.

브라우저간 처리방식의 차이가 있습니다.

11. word-spacing

지정한 요소의 띄어쓰기 간격을 지정합니다.

normal : 띄어쓰기 간격을 기본값으로 지정합니다.
length : 띄어쓰기 간격을 지정한 값으로 지정합니다.

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.wordSpacing="10px"

CSS 코드

div {
border:1px solid #000;
}
.wordspacing {
word-spacing:15px;
}

HTML 코드

출력화면

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세

CSS Styling - Background

2009-12-07T15:28:00.000+09:00

Background

1. backgound 속성

선택한 요소의 배경에 다한 스타일을 다룹니다.

background-color : 배경의 색을 정의합니다.
background-image : 배경을 이미지로 설정합니다.
background-repeat : 배경의 반복설정을 정의합니다.
background-attachment : 배경이 스크롤에 따라 어떤반응을 할지 설정합니다.
background-position : 배경의 위치를 설정합니다.
inherit : 어미요소의 Background 스타일을 상속받습니다. [IE미지원]

기본값 : 없음
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.background="white url(paper.gif) repeat-y"

CSS 코드

.test1 {
width:200px;
height:200px;
border:1px solid #f00;
background:#fff url(test.jpg) no-repeat scroll top left;
}
.test2 {
width:100px;
height:100px;
border:1px solid #0f0;
background:inherit;
margin:0 auto;
}
.test3 {
width:100px;
height:100px;
border:1px solid #00f;
background:inherit;
}

HTML 코드

출력결과

좌측이 IE의 경우이고 우측이 파이어폭스, 크롬, 오페라의 경우입니다.

IE의 경우 이 속성을 제대로 지원하지 못합니다.

2. background-attachment

선택한 요소의 배경이미지를 고정하거나 스크롤에 따라다니게 만듭니다.

fixed : 스크롤 하더라도 배경이미지를 고정합니다.
scroll : 스크롤에 맞춰 배경이미지가 스크롤됩니다.
inherit : 어미요소의 background-attachment 스타일을 상속받습니다. [IE미지원]

기본값 : scroll
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.backgroundAttachment="fixed"

CSS 코드

div {
width:100px;
height:2000px;
background-image:url(test.jpg);
}
.test1 {
background-attachment:fixed;
float:left;
}
.test2 {
background-attachment:scroll;
float:left;
}
.test3 {
background-attachment:inherit;
position:absolute;
left:200px;
}

HTML 코드

예제 : http://coterie.hosting.paran.com/style/background01.html

※ 페이지가 보이지 않을경우 문자 인코딩을 UTF-8로 하셔야 제대로 보입니다.

3. background-color

선택한 요소의 배경색을 지정합니다.

color-rgb : RGB값으로 배경색을 지정합니다. [예: rgb(255,255,0), rgb(150,222,324) 등]
color-hex : Hex값으로 배경색을 지정합니다. [예: #000, #fff, #373737 등]
color-name : 색이름으로 배경색을 지정합니다. [예: red, blue, yellow 등]
transparent : 배경을 투명으로 지정합니다.
inherit : 어미요소의 background-color 스타일을 상속받습니다. [IE미지원]

기본값 : transparent
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.backgroundColor="#00FF00"

CSS 코드

body {
background-color:rgb(0,100,0);
}
div {
border:1px solid #000;
width:100px;
height:100px;
}
.test1 {
background-color:#ff0000;
}
.test2 {
background-color:skyblue;
}
.test3 {
width:50px;
height:50px;
background-color:inherit;
position:absolute;
left:100px;
}
.test4 {
background-color:transparent;
position:absolute;
left:100px;
}

HTML 코드

출력결과

역시 좌측이 IE 결과이고 우측은 타브라우저의 결과입니다.

IE에서는 어미요소를 제대로 상속받아 오지 못합니다.

4. background-image

선택한 요소의 배경이미지를 지정합니다.

url(URL) : 지정한 URL주소의 이미지를 배경으로 지정합니다.
none : 배경이미지를 지정하지 않습니다.
inherit : 어미요소의 background-image 스타일을 상속받습니다. [IE미지원]

기본값 : none
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.backgroundImage="url(stars.gif)"

CSS 코드

div {
border:1px solid #000;
width:100px;
height:100px;
}
.test1 {
background-image:url(test.jpg);
}
.test2 {
background-image:none;
position:absolute;
left:100px;
}
.test3 {
background-image:inherit;
position:absolute;
left:100px;
}

HTML 코드

출력결과

좌측은 IE, 우측은 나머지 브라우저의 출력 결과입니다.

IE의 경우 어미요소의 값을 상속받아오지 않습니다.

5. background-position

선택한 요소의 배경의 위치를 지정합니다.

top left : 좌상단에 맞춰 배경이미지를 출력합니다.
top center : 중상단에 맞춰 배경이미지를 출력합니다.
top right : 우상단에 맞춰 배경이미지를 출력합니다.
center left : 좌중단에 맞춰 배경이미지를 출력합니다.
center center : 중단에 맞춰 배경이미지를 출력합니다.
center right : 우중단에 맞춰 배경이미지를 출력합니다.
bottom left : 좌하단에 맞춰 배경이미지를 출력합니다.
bottom center : 중하단에 맞춰 배경이미지를 출력합니다.
bottom right : 우하단에 맞춰 배경이미지를 출력합니다.
x% y% : 가로와 세로 위치를 %값으로 지정합니다.
xpos ypos : 가로와 세로 위치를 픽셀값으로 지정합니다.
inherit : 어미요소의 background-position 스타일을 상속받습니다. [IE미지원]

기본값 : 0% 0%
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.backgroundPosition="center"

CSS 코드

div {
border:1px solid #000;
width:100px;
height:100px;
background-image:url(test.jpg);
margin:10px;
float:left;
}
.test1 {
background-position:top left;
}
.test2 {
background-position:top center;
}
.test3 {
background-position:top right;
}
.test4 {
background-position:center left;
}
.test5 {
background-position:center center;
}
.test6 {
background-position:center right;
}
.test7 {
background-position:bottom left;
}
.test8 {
background-position:bottom center;
}
.test9 {
background-position:bottom right;
}
.test10 {
background-position:50% 50%;
}
.test11 {
background-position:150px 150px;
}
.test12 {
position:absolute;
background-position:0 150px;
}
.test13 {
position:absolute;
left:120px;
top:0;
margin:-1px;
background-position:inherit;
}

HTML 코드

예제 : http://coterie.hosting.paran.com/style/background02.html

IE의 경우 어미값을 상속받지 못하므로 test13 요소의 값이 브라우저마다 차이가 있습니다.

※ 페이지가 보이지 않을경우 문자 인코딩을 UTF-8로 하셔야 제대로 보입니다.

6. background-repeat

지정한 요소의 배경이미지 반복패턴을 지정합니다.

repeat : 배경이미지를 반복합니다.
repeat-x : 배경이미지를 가로로 반복합니다.
repeat-y : 배경이미지를 세로로 반복합니다.
no-repea : 배경이미지를 반복하지 않습니다.
inherit : 어미요소의 background-repeat 스타일을 상속받습니다. [IE미지원]

기본값 : repeat
상속 : 하지않음
버전 : CSS1
자바스크립트 문법 : object.style.backgroundRepeat="repeat-y"

CSS 코드

div {
border:1px solid #000;
width:100px;
height:100px;
background-image:url(test.gif);
}
.test1 {
background-repeat:repeat;
}
.test2 {
background-repeat:repeat-x;
}
.test3 {
background-repeat:repeat-y;
}
.test4 {
background-repeat:no-repeat;
}
.test5 {
position:absolute;
left:120px;
background-repeat:inherit;
}

HTML 코드

출력결과

좌측이 IE, 우측이 나머지 브라우저입니다.

IE의 경우 어미요소의 값을 제대로 상속받아오지 못합니다.

CSS 기본 - CSS 구문법, 셀렉터, 사용법

2009-12-06T12:00:00.000+09:00

스타일 시트의 기본적인 사용법은 다음과 같습니다.

1. CSS 구문법

기본 : 셀렉터 {속성:벨류값;속성:벨류값;}

예제 : div {width:100px;height:100px;} .style {text-align:center;border:1px solid #eee;}

2. CSS 셀렉터

(1) 요소 셀렉터 : 지정한 요소에 스타일 시트를 적용합니다.

div {width:100px;height:100px;background-color:#eee;}

출력결과

테스트

(2) ID 셀렉터

#test {width:300px;height:50px;color:fff;background-color:#000;}

출력결과

테스트2

(3) CLASS 셀렉터

.test {width:200px;height:150px;border:3px solid #f00;}

출력결과

테스트3

(4) 자식 셀렉터

기본 : 어미셀렉터 자식셀렉터 {속성:벨류값;속성:벨류값;}

예제 : #test span { color:#ff0; }

3. 기본적인 사용법.

(1) CSS파일을 이용한 방법. <head></head> 사이에 아래의 문장을 넣습니다.

(2) <style>태그를 이용한 방법. <head></head> 사이에 아래의 문장을 넣습니다.

(3) style 속성을 이용한 방법.

jQuery 기본 Events - Event Helpers

2009-12-05T15:19:00.000+09:00

1. blur( fn )

일치하는 각 요소에 blur 이벤트를 발생시키거나 발생시 지정한 함수를 수행합니다.

$("input").blur(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});

예제 : http://coterie.hosting.paran.com/event/blur.html

2. change( fn )

일치하는 각 요소에 change 이벤트를 발생시키거나 발생시 지정한 함수를 수행합니다.

$("select").change(function () {
   var str = "";
   $("select option:selected").each(function () {
   str += $(this).text() + " ";
   });
$("div").text(str);
}) .change();

예제 : http://coterie.hosting.paran.com/event/change.html

3. click( fn )

일치하는 각 요소를 클릭 이벤트를 발생시키거나 지정한 함수를 수행합니다.

$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});

예제 : http://coterie.hosting.paran.com/event/click.html

4. dblclick( fn )

일치하는 각 요소에 더블클릭 이벤트를 발생시키거나 지정한 함수를 수행합니다.

$("p").dblclick(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});

예제 : http://coterie.hosting.paran.com/event/dblclick.html

5. focus( fn )

일치하는 각 요소에 focus 이벤트를 발생시키거나 발생시 지정한 함수를 수행합니다.

$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
$("button").click(function(){
$("input[name=test1]").focus();
});

예제 : http://coterie.hosting.paran.com/event/focus.html

6. keydown( fn ), keyup( fn ), keypress( fn )

일치하는 각 요소에 해당하는 키보드 이벤트를 발생시키거나 발생시 지정한 함수를 수행합니다.

$("#test1").keydown(function(event){
alert(event.keyCode);
});
$("#test2").keyup(function(event){
alert(event.keyCode);
});
$("#test3").keypress(function(event){
alert(event.keyCode);
});

예제 : http://coterie.hosting.paran.com/event/keyboard.html

7. mousedown( fn ), mouseup( fn )

일치하는 각 요소에 마우스누름(mousedown)과 마우스땜(mouseup) 이벤트 발생시 지정한 함수를 수행합니다.

$("p").mouseup(function(){
$(this).append('<span style="color:#F00;">Mouse up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Mouse down.</span>');
});

예제 : http://coterie.hosting.paran.com/event/mouse1.html

8. mouseover( fn ), mouseout( fn ), mouseenter( fn ), mouseleave( fn )

일치하는 각 요소에 마우스가 올라와 있는 동안(mouseover)과 마우스가 벗어났을때(mouseout) 그리고 마우스가 올라간 순간(mouseenter) 과 마우스가 벗어난 순간(mouseleave) 이벤트 발생시 지정한 함수를 수행합니다.

예제 : http://coterie.hosting.paran.com/event/mouse2.html

9. resize( fn )

일치하는 각 요소의 크기를 조정할 때 지정한 함수를 수행합니다.

$(window).resize(function(){
alert("그만!");
});

예제 : http://coterie.hosting.paran.com/event/resize.html

10. scroll( fn )

일치하는 각 요소의 스크롤 이동시 지정한 함수를 수행합니다.

$(window).scroll(function(){
$("p").text($(document).scrollTop());
});

예제 : http://coterie.hosting.paran.com/event/scroll.html

11. select( fn )

일치하는 각 요소에 셀렉트를 발생시키거나 이벤트 발생시 지정한 함수를 수행합니다.

$("input:first").select( function () {
$("div").text("셀렉트 이벤트 발생!").show().fadeOut(1000);
});
$("input:last").click(function(){
$(this).select();
});

예제 : http://coterie.hosting.paran.com/event/select.html

12. submit( fn )

일치하는 각 요소의 서브밋 이벤트를 발생 시키거나 발생시 지정한 함수를 수행합니다.

$("form").submit(function() {
if ($("input:first").val() == "6") {
$("span").text("정답입니다!").show();
return true;
}
$("span").text("오답입니다!").show().fadeOut(1000);
return false;
});
$("input[type=button]").click(function(){
$("form").submit();
});

예제 : http://coterie.hosting.paran.com/event/submit.html

13. unload( fn )

일치하는 각 요소에 이벤트를 언로드시 지정한 함수를 발생합니다.

$(window).unload( function () { alert("안녕히가세요!"); } );

예제 : http://coterie.hosting.paran.com/event/unload.html

jQuery를 이용한 검색어 자동완성

2009-12-04T17:26:00.000+09:00

jQuery와 PHP mysql을 이용해 간단한 검색어 자동완성기능을 만들어 봤습니다.

여기서는 db를 이용해서 검색어를 알아오게 해놓았지만 소스를 조금만 수정하면 배열이나 다른것으로도

검색어를 뽑아와 출력할 수 있습니다.

파이어폭스와 오페라에서는 onkeyup 스크립트에서 문제가 있기 때문에 트릭을 사용했습니다.

일단 많이들 사용하는 레이아웃 구성을 먼저 짜놓고 소스를 만들었습니다.

keyup 이벤트시 마다 쿼리를 받아오므로 검색어는 부하를 줄이기 위해 상위 20개만 검색되게 해놓았습니다.

예제 : http://coterie.hosting.paran.com/search/

※ 예제 페이지가 보이지 않을시 페이지 인코딩을 자동선택을 해제하고 UTF-8로 맞춰보세요.

1. 테스트 브라우저

IE6, IE7, IE8, 파이어폭스3, 오페라10, 구글 크롬

2. index.html 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>테스트</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/*파이어폭스 트릭*/
var db = "";
function trick() {
if (db != $('input[name=search]').val()) {
db = $('input[name=search]').val();
search_script(db);
} else {
}
setTimeout("trick()", 100);
}
/*파이어폭스 트릭 끝*/

$(document).ready(function(){
if($.browser.opera==true || $.browser.mozilla==true ) {
$('input[name=search]').keypress(function(event){
trick();
});
} else {
$('input[name=search]').keyup(function(event){
if(event.keyCode!=27){
search_script($(this).val());
} else {
$('#text_div').hide();
}
});
}
});

function search_script(keyword) {
$.post("search.php",{
key : keyword
},function(data){
$('#text_div').show();
$('#search_text').html('<ul><\/ul>');
$('#search_text > ul').html(data);
$('.stext').mouseenter(function(){
$(this).css({'background-color':'#eee'});
}).mouseleave(function(){
$(this).css({'background-color':'#fff'});
}).mouseup(function(){
$('#text_div').hide();
$('input[name=search]').val($(this).text());
db = $(this).text();
});
});
}
</script>
<style type="text/css">
body {
margin:0;
padding:0;
}
ul {
margin:0;
padding:0;
}
.stext {
list-style-type:none;
margin:0;
padding:0;
font-size:12px;
line-height:160%;
}
#test_body {
width:990px;
border:1px solid #000;
margin:0 auto;
}
#top_div {
border:1px solid #000;
height:100px;
}
#search_div {
width:790px;
margin:30px auto;
position:relative;
}
#menu_div {
width:200px;
border:1px solid #000;
float:left;
}
#main_div {
width:784px;
border:1px solid #000;
float:right;
}
#search_text {
width:790px;
border:1px solid #eee;
position:absolute;
left:0px;
background-color:#fff;
}
#text_div {
width:790px;
border:1px solid #000;
left:0px;
display:none;
}
#bottom_div {
width:990px;
height:50px;
border:1px solid #000;
clear:both;
}
.input {
border:1px solid #eee;
width:790px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="test_body">
<div id="top_div">
<div id="search_div">
<input type="text" name="search" value="" class="input" />
<div id="text_div">
<div id="search_text">
</div>
</div>
</div>
</div>
<div id="menu_div">
홈페이지 메뉴<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
</div>
<div id="main_div">
홈페이지 내용<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
</div>
<div id="bottom_div">
홈페이지 하단
</div>
</div>
</body>
</html>

3. search.php 소스

<?php
$db_connect = mysql_connect("호스트주소", "계정명" ,"계정암호"); //DB접속
mysql_select_db("DB명",$db_connect); //DB선택
mysql_query("set names utf8"); //DB가 euc-kr 이므로 utf-8로 변환 utf-8 DB는 주석처리해야함

if(!eregi($HTTP_HOST,$HTTP_REFERER)) {
exit;
}

if(preg_match("/^(ㄱ)$/",$key)) {
$pattern = "text REGEXP '^(ㄱ)' OR ( text >= '가' AND text < '까' )";
} elseif(preg_match("/^(ㄲ)$/",$key)) {
$pattern = "text REGEXP '^(ㄲ)' OR ( text >= '까' AND text < '나' )";
} elseif(preg_match("/^(ㄴ)$/",$key)) {
$pattern = "text REGEXP '^(ㄴ)' OR ( text >= '나' AND text < '다' )";
} elseif(preg_match("/^(ㄷ)$/",$key)) {
$pattern = "text REGEXP '^(ㄷ)' OR ( text >= '다' AND text < '따' )";
} elseif(preg_match("/^(ㄸ)$/",$key)) {
$pattern = "text REGEXP '^(ㄸ)' OR ( text >= '따' AND text < '라' )";
} elseif(preg_match("/^(ㄹ)$/",$key)) {
$pattern = "text REGEXP '^(ㄹ)' OR ( text >= '라' AND text < '마' )";
} elseif(preg_match("/^(ㅁ)$/",$key)) {
$pattern = "text REGEXP '^(ㅁ)' OR ( text >= '마' AND text < '바' )";
} elseif(preg_match("/^(ㅂ)$/",$key)) {
$pattern = "text REGEXP '^(ㅂ)' OR ( text >= '바' AND text < '빠' )";
} elseif(preg_match("/^(ㅃ)$/",$key)) {
$pattern = "text REGEXP '^(ㅃ)' OR ( text >= '빠' AND text < '사' )";
} elseif(preg_match("/^(ㅅ)$/",$key)) {
$pattern = "text REGEXP '^(ㅅ)' OR ( text >= '사' AND text < '싸' )";
} elseif(preg_match("/^(ㅆ)$/",$key)) {
$pattern = "text REGEXP '^(ㅆ)' OR ( text >= '싸' AND text < '아' )";
} elseif(preg_match("/^(ㅇ)$/",$key)) {
$pattern = "text REGEXP '^(ㅇ)' OR ( text >= '아' AND text < '자' )";
} elseif(preg_match("/^(ㅈ)$/",$key)) {
$pattern = "text REGEXP '^(ㅈ)' OR ( text >= '자' AND text < '짜' )";
} elseif(preg_match("/^(ㅉ)$/",$key)) {
$pattern = "text REGEXP '^(ㅉ)' OR ( text >= '짜' AND text < '차' )";
} elseif(preg_match("/^(ㅊ)$/",$key)) {
$pattern = "text REGEXP '^(ㅊ)' OR ( text >= '차' AND text < '카' )";
} elseif(preg_match("/^(ㅋ)$/",$key)) {
$pattern = "text REGEXP '^(ㅋ)' OR ( text >= '카' AND text < '파' )";
} elseif(preg_match("/^(ㅍ)$/",$key)) {
$pattern = "text REGEXP '^(ㅍ)' OR ( text >= '파' AND text < '타' )";
} elseif(preg_match("/^(ㅌ)$/",$key)) {
$pattern = "text REGEXP '^(ㅌ)' OR ( text >= '타' AND text < '하' )";
} elseif(preg_match("/^(ㅎ)$/",$key)) {
$pattern = "text REGEXP '^(ㅎ)' OR ( text >= '하' AND text <= '힣' )";
} elseif(preg_match("/^(가)$/",$key)) {
$pattern = "text >= '가' AND text <= '갛'";
} elseif(preg_match("/^(까)$/",$key)) {
$pattern = "text >= '까' AND text <= '깧'";
} elseif(preg_match("/^(나)$/",$key)) {
$pattern = "text >= '나' AND text <= '낳'";
} elseif(preg_match("/^(다)$/",$key)) {
$pattern = "text >= '다' AND text <= '닿'";
} elseif(preg_match("/^(따)$/",$key)) {
$pattern = "text >= '따' AND text <= '땋'";
} elseif(preg_match("/^(라)$/",$key)) {
$pattern = "text >= '라' AND text <= '랗'";
} elseif(preg_match("/^(마)$/",$key)) {
$pattern = "text >= '마' AND text <= '맣'";
} elseif(preg_match("/^(바)$/",$key)) {
$pattern = "text >= '바' AND text <= '밯'";
} elseif(preg_match("/^(빠)$/",$key)) {
$pattern = "text >= '빠' AND text <= '빻'";
} elseif(preg_match("/^(사)$/",$key)) {
$pattern = "text >= '사' AND text <= '샇'";
} elseif(preg_match("/^(싸)$/",$key)) {
$pattern = "text >= '싸' AND text <= '쌓'";
} elseif(preg_match("/^(아)$/",$key)) {
$pattern = "text >= '아' AND text <= '앟'";
} elseif(preg_match("/^(자)$/",$key)) {
$pattern = "text >= '자' AND text <= '잫'";
} elseif(preg_match("/^(짜)$/",$key)) {
$pattern = "text >= '짜' AND text <= '짷'";
} elseif(preg_match("/^(차)$/",$key)) {
$pattern = "text >= '차' AND text <= '챃'";
} elseif(preg_match("/^(카)$/",$key)) {
$pattern = "text >= '카' AND text <= '캏'";
} elseif(preg_match("/^(파)$/",$key)) {
$pattern = "text >= '파' AND text <= '팧'";
} elseif(preg_match("/^(타)$/",$key)) {
$pattern = "text >= '타' AND text <= '탛'";
} elseif(preg_match("/^(하)$/",$key)) {
$pattern = "text >= '하' AND text <= '핳'";
} else {
$pattern = "text REGEXP '^(".$key.")+'";
}

if($key) {
$search_que = "select text from coterie_test where $pattern order by text asc limit 0,20";
$search_res = mysql_query($search_que);
while(@$search_row = mysql_fetch_array($search_res)) {
echo "<li class=\"stext\">".$search_row[text]."</li>";
}
}

// MySQL 닫기
if($db_connect) mysql_close($db_connect);
?>

jQuery Utilities - jQuery.each()

2009-12-03T15:36:00.000+09:00

jQuery 기능들 중 가장 중요한 기능 중 하나인 each() 입니다.

간단하게 생각해서 PHP와 java스크립트에 존재하는 for문과 같은 형식으로 사용할 수 있는 기능입니다.

배열을 받아와 배열만큼의 같은 스크립트의 반복처리를 하거나 할때 유용하게 사용할 수 있습니다.

var arr = [ "하나", "둘", "셋", "넷", "다섯" ];

$("#button1").click(function () {
$.each(arr,function(i){
alert(arr[i]);
});
});

예제 : http://coterie.hosting.paran.com/each/each.html

반복문의 경우 기능을 제어해 필요할때는 기능을 멈추거나 계속 진행하게 해야하는데 이경우 return을 통해 each를 제어할 수 있습니다.

예제 : http://coterie.hosting.paran.com/each/each2.html

히라노 아야(平野綾) 2nd Album - 저 꽃처럼(あの花のように)

2009-12-03T15:12:00.000+09:00

히라노 아야 2집 중 개인취향의 곡중 하나인 あの花のように입니다.

음반도 도착했겠다 좋아하는 곡들로 몇곡 올려볼까 합니다.

음원이야 구할 마음만 있으면 구하기 쉬우니 다운로드는 닫아둡니다.

================================================================================================

あの花のように(저 꽃처럼)

いい加減な返事に期待膨らませても

　이이 카겐나 헨지니 키타이 후쿠라마세테모

　적당한 대답에 기대를 부풀려도

答えはいつもそう　言い訳だから

　코타에와 이츠모 소우 이이와케다카라

　대답은 언제나 그래 변명이니까

　待つのに慣れてしまうフリは飽きたから

마츠노니 나레테 시마우 후리와 아키타카라

　기다리는거에 익숙해져버린 척하는건 질렸으니까

　思い描いた今に近づくの

오모이에가이타 이마니 치카즈쿠노

　생각했던 지금에 가까워지는거야

甘えたい　頼っちゃいけない

　아마에타이 타욧챠이케나이

응석부리고 싶지만 의지하면 안돼

独りで変えてみたい

　히토리데 카에테 미타이

　혼자서 바꾸고싶어

不安がるのはやめにしよ

　후안가루노와 야메니시요

　불안해하는건 그만하자

※集めて　輝き　負けそうな勇気は

　아츠메테 카가야키 마케소우나 유우키와

　모아줘 빛을, 질거같은 용기는

　いつだって伝わらないことばかり

　이츠닷테 츠타와라나이코토바카리

　언제나 전해지지않는것뿐

　涙は弾けとんでいけばいいから

　나미다와 하지케 톤데이케바이이카라

　눈물은 날려버리면 되니까

　臆病に咲いた　あの花のように

　오쿠뵤우니 사이타 아노 하나노 요우니

겁많은 마음에 피어난 그 꽃처럼

　笑っていたい

　와랏테 이타이

　웃고싶어

　何気なく口すさむ　この歌はなんだろう

　나니게나쿠 쿠치 스사무 코노우타와 난다로우

　아무렇지않게 거칠어지는 이 노래는 뭘까

　あの頃のあなたを思い出したよ

아노코로노 아나타오 오모이다시타요

　그때의 너를 생각했어

　結局何も言わない　それでもいいから

　켓쿄쿠 난모 이와나이 소레데모 이이카라

　결국 아무런말도 안해 그래도 괜찮으니까

　あとほんの少し一緒にいさせて

　아토 혼노 스코시 잇쇼니 이사세테

정말 조금만 같이있게 해줘

　言葉は嘘ばっかり付いて

　코토바와 우소 밧카리 츠이테

　말할때는 거짓말만 하고

　距離まで遠くなったり

쿄리마데 토오쿠 낫타리

　둘 사이의 거리까지 멀어지기도 하고

　強がるのも疲れたよね

　츠요가루노모 츠카레타요네

　강한척하는것도 지쳤어

　見つめて　悲しみ　消えそうな勇気は

　미츠메테 카나시미 키에소우나 유우키와

　바라봐줘 이 슬픔, 사라질거같은 용기는

　いつだって心に息づいてる

　이츠닷테 코코로니 이키즈이테루

　언제나 마음에서 숨쉬고 있어

　明日はこれから決めてけばいいから

　아시타와 코레카라 키메테케바 이이카라

　내일은이제부터 정해나가면 되니까

　ささやかに吹いた　あの風のように

　사사야카니 후이타 아노 카제노 요우니

　작고 조용히 불었던 그 바람처럼

　導きたい

미치비키타이

　이끌어 나가고 싶어

가사출처 : 아야서포터즈 AYASTYLE 네이버 카페 - moe모에님

jQuery Utilities - jQuery.trim()

2009-12-03T14:53:00.000+09:00

PHP 함수 중 문자열의 앞과 뒤에 생기는 공백을 제거해주는 trim() 이라는 내장 함수가 있습니다.

jQuery를 통해서도 이와 같은 효과를 볼수있는 기능이 있습니다.

$("button").click(function () {
var str = " 테스트문장 입니다. ";
alert("'" + str + "'");
str = jQuery.trim(str);
alert("'" + str + "' - trim()으로 공백을 제거");
});

위와 같은 소스가 있을때 버튼을 클릭시 아래 예제와 같은 수행 결과를 얻을 수 있습니다.

예제 : http://coterie.hosting.paran.com/trim/trim.html

다양한 WYSIWYG 에디터

2009-12-02T18:31:00.000+09:00

1. CKEditor, FCKEditor

사이트 : http://ckeditor.com/

데모 : http://ckeditor.com/demo

현존 하는 위지윅 에디터 중 가장 많이 사용되고 있으며 강력한 기능을 가진 CKEditor와 FCKEditor입니다. 이름에서 알 수 있듯이 CKEditor는 FCKEditor의 업데이트 버전으로 웹표준과 접근성향상 그리고 디자인적인 발전등 날로 발전해 나가고 있는 프로그램입니다.

특징 : 툴바, 스킨등 개인에 맞게 설정 가능. 크로스 브라우징 가능.
언어 : 기본 영어, 한글 가능.
라이센스 : 오픈소스 라이센스 및 상업용 라이센스.
최종버전 : ckeditor - 3.0.1, fckeditor - 2.6.5
추천도 : ★★★★★

2. TinyMCE

CKEditor와 함께 가장 많이 사용되고 있는 위지윅 에디터 중 하나로 개인설정과 플러그인 설정으로

아주 강력한 기능을 가진 에디터입니다. jQuery버전도 따로 존재하며 wiki도 존재하여 개인설정과 사용이 아주 간편한 편입니다.

사이트 : http://tinymce.moxiecode.com

데모 : http://tinymce.moxiecode.com/examples/full.php

특징 : 툴바, 스킨,플러그인등 개인에 맞게 설정 가능. jQuery 버전 존재. 크로스 브라우징 가능.
언어 : 기본 영어, 한글 가능.
라이센스 : 오픈소스 라이센스
최종버전 : 3.2.7
추천도 : ★★★★★

3. 다음 오픈 에디터

얼마 전 다음이 구글코드를 통해 공개한 공개용 다음 오픈 에디터입니다. 개발자들에 의하면 시멘틱 정보 웹 에디터라는 개념을 도입하여 사용자가 생산하는 콘텐츠에 데이터간 상호 연결성을 더해주는 웹 정보를 포함시켜 시멘틱 검색 기술과 데이터 연결이라는 데이터 생태계를 구현했다고 합니다. 구글 코드 포럼을 통해 사용자들의 의견을 수렴하여 계속해서 업데이트되고 있어 미래가 기대되는 에디터 중 하나입니다.

사이트 : http://code.google.com/p/daumopeneditor/

데모 : http://uie.daum.net/openeditor/sample/5.2.0/editor.html

특징 : 국내 최대 포탈사이트중 하나인 다음에서 공개한 오픈 에디터. 초보자가 사용하기 용이함.
언어 : 한글
라이센스 : 오픈소스 라이센스
최종버전 : 5.3.0
추천도 : ★★★★☆

4. 스마트 에디터

네이버에서 공개한 위지윅 에디터인 스마트 에디터입니다. 웹폰트 지원, 초보 사용자가 사용하기 용이한 점등이 특징이지만 웹표준 및 브라우저 접근성에서 떨어져 원성을 사고 있기도 합니다.

사이트 : http://dev.naver.com/projects/smarteditor

미리보기 : http://dev.naver.com/projects/smarteditor/wiki/SmartEditorBasicUserInterfacePreview

특징 : 웹폰트 사용가능(IE전용). 초보자가 사용하기 용이함.
언어 : 한글
라이센스 : 오픈소스 라이센스
최종버전 : 0.3.17
추천도 : ★★★☆

5. 알디터

사이트 : http://www.alik.info/

데모 : http://www.alik.info/alditor/sample.html

알릭님께서 제작한 알디터입니다. 간단한 인터페이스와 심플함으로 제로보드 및 그누보스 사용자들이 많이 사용하고 있으며 비표준 및 접근성이 떨어지는 점만 제외하면 쓸만한 에디터입니다. 그러나 따로 소스를 배포하지 않고 업데이트가 끊긴 점을 생각해 볼때 그리 추천하지는 않습니다.

특징 : 심플함.
언어 : 한글
라이센스 : 비영리목적 사용가능. 소스 수정/배포 금지. 상업적 목적 사용시 제작자에 연락.
최종버전 : 06년 9월 23일
추천도 : ★★

6. Xinha

사이트 : http://trac.xinha.org/

데모 : http://xinha.raimundmeyer.de/x_examples/ext_example.html

이번에 위지윅 에디터에 관해 알아보면서 알게된 Xinha 라는 에디터입니다. 한글사용은 안되는듯 보이지만 크로스 브라우징도 지원하며 플러그인도 사용가능한듯 보이며 위지윅 에디터로 사용하기엔 좋은듯 싶습니다.

특징 : 위지윅 에디터 기능에 충실, 플러그인 사용가능.
언어 : 영어
라이센스 : 오픈소스 라이센스
최종버전 : 0.95
추천도 : ★★☆

7. openWYSIWYG

사이트 : http://www.openwebware.com/

데모 : http://www.openwebware.com/wysiwyg/demo.shtml

사용이 간편하면서도 다양한 언어를 지원하는 위지윅 에디터입니다.

특징 : PHP, Perl, ASP, ASP.net, Java 등 다양한 언어 지원. 사용이 간편함.
언어 : 영어
라이센스 : 오프소스 라이센스
최종버전 : 1.4.7
추천도 : ★★☆

8. Richtext Editor

사이트 : http://rtef.info

데모 : http://rtef.info/demo.htm

가볍고 쓸만한 위지윅 에디터입니다. 다양한 브라우저에서 사용가능하다는게 장점입니다.

특징 : 가벼운 인터페이스. 크로스 브라우징 지원.
언어 : 영어
라이센스 : 오픈소스 라이센스(MIT)
최종버전 : 0.007
추천도 : ★★☆

지름품 도착 - 히라노 아야 2집, 오사카만박

2009-12-02T15:54:00.000+09:00

우왕 굳...

네 얼마전 지름질을 했던 물품들이 도착했습니다.

원래는 히라노 아야 2집 발매일에 맞춰 11월 중에 산거지만 일본에 거주중인 지인께서

11월 말쯤 한국에 오신다고 하여 이제야 받았습니다.

뭐 지인분에게 받은덕에 환율 및 배송료를 최소한도내로 막아 두개합쳐 65,000원에 샀으니

제 값주고 산거라 할 수 있지요.

이번엔 단독샷... 히라노 아야 2집 한정판입니다. 브로마이드도 같이 왔지만 바로 소장행 직행.

아직 미개봉입니다. 사실 전 음악은 MP3로 듣고 음반은 미개봉 소장하는게 취미입니다.

이번엔 오사카만박 단독샷입니다. 아즈망가대왕 10주년 기념으로 발매된 화보집입니다.

대충 내용이 뭔가 보자면...

위와 같이 아즈망가 관련 팬시나 상품들에 대한 정보와 설정화보등이 수록되어 있고

또한 정식 작가분들(양지스케치 등)을 섭외하여 뒤쪽에 상당한 양의 만화를 수록하고 있습니다.

소장가치가 꽤나 있는 녀석입지요...

jQuery Utilities - jQuery.browser

2009-12-01T21:00:00.000+09:00

jQuery를 이용해 사용자의 브라우저를 알아올 수 있고 사용자의 브라우저에 따라 호환성있는 스크립트를

실행할 수 있도록 스크립트를 설계할 수 있습니다.

또는 IE6 같은 구버전 브라우저를 사용하는 사용자에게 경고메세지를 표시하는 등 응용하기에 따라 유용히

사용할 수 있는 스크립트라 할 수 있겠습니다.

브라우저 스크립트는 아래와 같이 사용할 수 있습니다.

1. 브라우저 체크

$.browser.msie : 익스플로러인지를 확인. IE라면 true를 반환 아니라면 false를 반환합니다.
$.browser.mozilla : 파이어폭스인지 확인. 반환값은 위와 같습니다.
$.browser.safari : 사파리인지를 확인. 크롬의 경우도 해당합니다. 반환값은 위와 같습니다.
$.browser.opera : 오페라인지를 확인. 반환값은 위와 같습니다.

2. 브라우저 버전 체크

$.browser.version : 각각의 브라우저의 버전을 알아옵니다. 브라우저의 종류는 알아오지 않습니다.

3. 기본적인 사용 예제

$(function(){
if($.browser.msie==true) {
alert('인터넷 익스플로러를 사용 중 입니다. 버전은 '+$.browser.version+'입니다.');
} else {
alert('인터넷 익스플로러를 사용하고 있지 않습니다.');
}
});

jQuery 플러그인 - CLEARFIELD

2009-12-01T13:29:00.000+09:00

이번에 소개해 드릴 플러그인은 input 요소에 텍스트가 있는 상태에서 클릭하면 사라지고 값을 입력받게 하는 스크립트를 쉽게 적용할 수 있는 클리어필드 플러그인 입니다.

보통 로그인폼에 많이 적용하는 효과인데 jQuery 플러그인을 통해 보다 쉽게 적용할 수 있습니다.

적용 방법은 해당 스크립트를 추가한 후 아래와 같이 적용하시면 됩니다.

$(document).ready(function() {
$('.clearField').clearField();
});

데모 및 다운로드 : http://labs.thesedays.com/projects/jquery/clearfield/

jQuery 플러그인 - jQuery SimpleTree

2009-11-30T16:19:00.000+09:00

이번에 소개해드릴 플러그인은 트리구조의 메뉴를 쉽게 생성할 수 있는 심플트리 플러그인 입니다.

텍큐의 분류관리 처럼 드래그 앤 드롭도 지원하고 있고 ajax도 가능해 상당히 유용히 사용할 수 있습니다.

현재 버전은 0.2 버전이며 데모사이트에 가시면 자세한 기능을 알 수 있습니다.

데모 : http://news.kg/wp-content/uploads/tree/d&d/

다운로드 및 홈페이지 : http://news.kg/wp-content/uploads/tree/

PHP 기본 함수 (1)

2009-11-30T14:26:00.000+09:00

텍스트박스는 색깔별로 녹색은 기본적인 예제. 빨간색은 출력결과. 노란색은 설명입니다.

echo : 하나 이상의 문자열을 출력. (PHP 4, PHP 5)

Example #1 echo() 예제

<?php
echo "Hello World";

echo "이것은 여러
줄을 표현합니다. 물론 줄바꿈도
출력합니다.";

echo "이것은 여러\n줄을 표현합니다. 물론 줄바꿈도\n출력합니다.";

echo "문자 이스케이프는 \"이렇게\" 합니다.";

// echo 구문 안에 변수를 사용할 수 있습니다.
$foo = "foobar";
$bar = "barbaz";

echo "foo는 $foo"; // foo는 foobar

// 배열을 사용할 수도 있습니다.
$baz = array("value" => "foo");

echo "이것은 {$baz['value']} !"; // 이것은 foo !

// 작은 따옴표는 변수값이 아닌, 변수명을 출력합니다.
echo 'foo는 $foo'; // foo는 $foo

// 다른 문자를 사용하지 않는다면, 바로 변수를 echo할 수 있습니다.
echo $foo; // foobar
echo $foo,$bar; // foobarbarbaz

// 몇몇 사람들은 결합 echo보다 복수 인수 사용을 선호합니다.
echo 'This ', 'string ', 'was ', 'made ', 'with multiple parameters.', chr(10);
echo 'This ' . 'string ' . 'was ' . 'made ' . 'with concatenation.' . "\n";

echo <<<END
이는 $variable 삽입을 가지는 여러 줄을
출력하는 "here document" 구문을 사용합니다. here
document 종료어는 줄에 세미콜론만을 가지고 있어야
하며, 어떠한 공백도 없어야하는 점에 주의하십시오!
END;

// echo는 함수처럼 작동하지 않기에, 다음 코드는 유효하지 않습니다.
($some_var) ? echo 'true' : echo 'false';

// 그러나, 다음 예제는 작동합니다.
($some_var) ? print 'true' : print 'false'; // print도 구조이지만, 함수처럼
// 작동합니다. 그러므로
// 이 문맥에서 사용할 수 있습니다.
echo $some_var ? 'true': 'false'; // 구문을 변경하여 처리
?>

print : 문자열을 출력한다. (PHP 4, PHP 5)

Example #1 print() 예제

<?php
print("Hello World");

print "print()는 괄호 없이도 작동합니다.";

print "여러 줄로
사용할 수 있습니다. 줄바꿈 문자도
제대로 출력합니다";

print "여러 줄로\n사용할 수 있습니다. 줄바꿈 문자도\n제대로 출력합니다.";

print "이스케이핑 문자는 \"이렇게\" 합니다.";

// print 구문 안에서 변수를 사용할 수 있습니다.
$foo = "foobar";
$bar = "barbaz";

print "foo는 $foo"; // foo는 foobar

// 배열을 사용할 수 있습니다.
$bar = array("value" => "foo");

print "이것은 {$bar['value']} !"; // 이것은 foo !

// 변수값이 아닌, 변수명을 출력하려면 작은 따옴표를 사용하십시오.
print 'foo는 $foo'; // foo는 $foo

// 다른 문자을 사용하지 않는다면, 변수만 출력할 수 있습니다.
print $foo; // foobar

print <<<END
이는 $varialbe을 써넣으면서 여러 줄을 출력하는
"here document"(여기는 문서) 구문의 사용입니다.
문서 종료어는 아무런 공백도 없이 단지 세미콜론
만을 가지는 점에 주의하십시오.
END;
?>

htmlspecialchars : 특수 문자를 HTML 엔터티로 변환 (PHP 4, PHP 5)

어떤 문자들은 HTML에서 특별한 정의를 가지기에, 그 의미를 보존하려면, HTML 엔터티로 표현해야 합니다. 이 함수는 이러한 변환을 수행한 문자열을 반환합니다; 이 번역은 모든 웹 프로그래밍에서 매우 유용합니다.

모든 HTML 문자 엔터티를 번역해야 한다면, 이 함수 대신 htmlentities()를 사용하십시오.

이 함수로 게시판이나 방명록 등의 프로그램에서, HTML을 포함하는 사용자 입력 텍스트를 막을 수 있습니다.

변환이 일어나는 문자는:

1. '&'(앰퍼샌드)는 '&'가 됩니다.

2. '"'(겹따옴표)는 ENT_NOQUOTES를 설정하지 않았을 때 '"'가 됩니다.

3. '''(홑따옴표)는 ENT_QUOTES가 설정되었을 때만 '''가 됩니다.

4.'<'(미만)은 '<'가 됩니다.

5. '>'(이상)은 '>'가 됩니다.

htmlentities : 해당하는 모든 문자를 HTML 엔티티로 변환. (PHP 4, PHP 5)

htmlentities()는 HTML 문자 엔티티에 존재하는 모든 문자를 엔티티로 변환하는 점을 제외하면, htmlspecialchars()와 완전히 동일합니다.

strip_tags : 문자열에서 HTML과 PHP 태그를 제거. (PHP 4, PHP 5)

주어진 str 에서 모든 HTML과 PHP 태그를 제거한 문자열을 반환합니다. 이 함수는 fgetss() 함수와 동일한 태그 제거 방식을 사용합니다.

Example #1 strip_tags() 예제

<?php
$text = '<p>테스트 문단.</p> <a
href="#fragment">다른 텍스트</a>';
echo strip_tags($text);
echo "\n";

// <p>와 <a>를 허용
echo strip_tags($text, '<p><a>');
?>

테스트 문단. 다른 텍스트
<p>테스트 문단.</p> <a href="#fragment">다른 텍스트</a>

htmlspecialchars_decode : HTML 엔티티로된 특수문자를 본래의 특수문자로 변환. (PHP 5 >= 5.1.0)

Example #1 A htmlspecialchars_decode() 예제

<?php
$str = '<p>this -> "</p>';

echo htmlspecialchars_decode($str);

// note that here the quotes aren't converted
echo htmlspecialchars_decode($str, ENT_NOQUOTES);
?>

html_entity_decode : 모든 HTML 엔티티를 해당하는 문자로 변환. (PHP 4 >= 4.3.0, PHP 5)

html_entity_decode()는 string 의 모든 HTML 엔티티를 해당하는 문자로 변환합니다. htmlentities()의 역함수입니다.
주의 : Note: trim(html_entity_decode(' '));는 문자열을 빈 문자열로 변환하지 않습니다. 이는 기본값인 ISO-8859-1 문자셋에서 ' ' 엔티티가 (trim()에서 잘라내는) 아스키 코드 32가 아닌, 아스키 코드 160(0xa0)이기 때문입니다.

Example #1 HTML 엔티티 디코딩

<?php
$orig = "I'll \"walk\" the <b>dog</b> now";

$a = htmlentities($orig);

$b = html_entity_decode($a);

echo $a; // I'll "walk" the <b>dog</b> now

echo $b; // I'll "walk" the <b>dog</b> now

// PHP 4.3.0 이전 사용자는 이렇게 할 수 있습니다:
function unhtmlentities($string)
{
// 숫자 엔티티 치환
$string = preg_replace('~&#x([0-9a-f]+);~ei', 'chr(hexdec("\\1"))', $string);
// 문자 엔티티 치환
$trans_tbl = get_html_translation_table(HTML_ENTITIES);
$trans_tbl = array_flip($trans_tbl);
return strtr($string, $trans_tbl);
}

$c = unhtmlentities($a);

echo $c; // I'll "walk" the <b>dog</b> now

?>

nl2br : 문자열의 모든 줄바꿈 앞에 HTML 줄바꿈 태그를 삽입. (PHP 4, PHP 5)

모든 줄바꿈 앞에 '<br />'이나 '<br>'를 삽입한 string 을 반환합니다.

Example #1 nl2br() 사용하기

<?php
echo nl2br("foo isn't\n bar");
?>

foo isn't<br />
bar

Example #2 is_xhtml 인수를 사용해서 유효한 HTML 생성하기

<?php
echo nl2br("Welcome\r\nThis is my HTML document", false);
?>

Welcome<br>
This is my HTML document

substr : 지정해준 숫자에 따라 문자열 앞뒤 일부를 추출한다. (PHP 4, PHP 5)

Example #1 Using a negative start

<?php
$rest = substr("abcdef", -1); // "f"를 반환
$rest = substr("abcdef", -2); // "ef"를 반환
$rest = substr("abcdef", -3, 1); // "d"를 반환
?>

Example #2 Using a negative length

<?php
$rest = substr("abcdef", 0, -1); // "abcde"를 반환
$rest = substr("abcdef", 2, -1); // "cde"를 반환
$rest = substr("abcdef", 4, -4); // ""를 반환
$rest = substr("abcdef", -3, -1); // "de"를 반환
?>

Example #3 Basic substr() usage

<?php
echo substr('abcdef', 1); // bcdef
echo substr('abcdef', 1, 3); // bcd
echo substr('abcdef', 0, 4); // abcd
echo substr('abcdef', 0, 8); // abcdef
echo substr('abcdef', -1, 1); // f

// Accessing single characters in a string
// can also be achieved using "square brackets"
$string = 'abcdef';
echo $string[0]; // a
echo $string[3]; // d
echo $string[strlen($string)-1]; // f

?>

strstr : 문자열이 처음으로 나오는 부분을 찾습니다. (PHP 4, PHP 5)

needle 에서 haystack 이 처음 발견된 곳부터 끝까지의 부분 문자열을 반환합니다.
이 함수는 대소문자를 구분합니다. 구분하지 않으려면, stristr()을 사용하십시오.
Note: haystack 안에 needle 이 있는지만 확인하려면, 빠르고 메모리도 적게 사용하는 strpos()를 사용하십시오.
문자열의 부분을 반환하거나, needle 을 발견하지 못하면 FALSE를 반환합니다.

Example #1 strstr() 예제

<?php
$email = 'name@example.com';
$domain = strstr($email, '@');
echo $domain; // @example.com 출력.

$user = strstr($email, '@' true); // PHP 5.3.0부터
echo $user; // name 출력
?>

strchr : 이 함수는 다음 함수의 별칭입니다: strstr(). (PHP 4, PHP 5)

trim : 문자열의 앞부분과 뒷부분에 있는 공백 문자를 제거한다. (PHP 4, PHP 5)

다음 문자를 제거합니다.

" " (ASCII 32 (0x20)), 보통의 공백.
"\t" (ASCII 9 (0x09)), 탭.
"\n" (ASCII 10 (0x0A)), 새 줄(줄바꿈).
"\r" (ASCII 13 (0x0D)), 캐리지 리턴.
"\0" (ASCII 0 (0x00)), NUL 바이트.
"\x0B" (ASCII 11 (0x0B)), 수직 탭.

Example #1 Usage example of trim()

<?php

$text = "\t\tThese are a few words :) ... ";
$binary = "\x09Example string\x0A";
$hello = "Hello World";
var_dump($text, $binary, $hello);

print "\n";

$trimmed = trim($text);
var_dump($trimmed);

$trimmed = trim($text, " \t.");
var_dump($trimmed);

$trimmed = trim($hello, "Hdle");
var_dump($trimmed);

// trim the ASCII control characters at the beginning and end of $binary
// (from 0 to 31 inclusive)
$clean = trim($binary, "\x00..\x1F");
var_dump($clean);

?>

string(32) " These are a few words :) ... "
string(16) " Example string
"
string(11) "Hello World"

string(28) "These are a few words :) ..."
string(24) "These are a few words :)"
string(5) "o Wor"
string(14) "Example string"

Example #2 Trimming array values with trim()

<?php
function trim_value(&$value)
{
$value = trim($value);
}

$fruit = array('apple','banana ', ' cranberry ');
var_dump($fruit);

array_walk($fruit, 'trim_value');
var_dump($fruit);

?>

array(3) {
[0]=>
string(5) "apple"
[1]=>
string(7) "banana "
[2]=>
string(11) " cranberry "
}
array(3) {
[0]=>
string(5) "apple"
[1]=>
string(6) "banana"
[2]=>
string(9) "cranberry"
}

ltrim : 문자열 처음의 공백(이나 다른 문자)를 제거하는것만 제외하고 trim()과 동일. (PHP 4, PHP 5)

rtrim : 문자열 마지막의 공백(이나 다른 문자)을 제거하는것만 제외하고 trim()과 동일. (PHP 4, PHP 5)

addslashes : 문자열을 슬래시로 인용. (PHP 4, PHP 5)

데이터베이스 질의 등에서 처리할 필요가 있는 문자 앞에 백슬래시를 붙인 문자열을 반환합니다. 이 문자들은 홑따옴표('), 겹따옴표("), 백슬래시(\), NUL(NULL 바이트)입니다.

addslashes()를 사용하는 대표적인 예는 데이터베이스에 데이터를 넣을 때 입니다. 예를 들어, 데이터베이스에 O'reilly라는 이름을 넣으려고 할때, 이스케이프할 필요가 있습니다. 대부분의 데이터베이스는 \을 사용하기에 O\'reilly가 되어야 합니다. 이 데이터를 데이터베이스에 넣으면 추가한 \은 저장되지 않습니다. PHP 지시어 magic_quotes_sybase를 on으로 설정하면 '은 '을 이용하여 이스케이프합니다.

PHP 지시어 magic_quotes_gpc는 기본값으로 on이고, 자동적으로 모든 GET, POST, COOKIE 데이터에 addslashes()을 실행합니다. magic_quotes_gpc로 이스케이프된 문자열에 addslashes()를 사용하지 마십시오. 그렇지 않으면 두번 이스케이프하게 됩니다. 이를 확인하기 위해서 get_magic_quotes_gpc()를 사용할 수 있습니다.

Example #1 addslashes() 예제

<?php
$str = "Is your name O'reilly?";

// 출력: Is your name O\'reilly?
echo addslashes($str);
?>

stripslashes : addcslashes()로 인용한 문자열을 되돌립니다. (PHP 4, PHP 5)

백슬래시를 제거한 문자열을 반환합니다. C 형식의 \n, \r ..., 8진과 16진 표현도 인식합니다.

stripslashes : 따옴표 처리한 문자열을 풉니다. (PHP 4, PHP 5)

PHP 지시어 magic_quotes_gpc가 on(기본값으로 on입니다)일 때, 데이터를 이스케이프가 필요한 장소(데이터베이스 등)에 놓지 않을 경우의 사용 예제입니다. 예를 들면, HTML 폼에서 전달한 데이터를 단순히 바로 출력할 경우입니다.

백슬래시 처리를 제거한 문자열을 반환합니다. (\'이 '이 됩니다) 이중 백슬래시(\\)는 백슬래시 하나(\)가 됩니다.

Example #1 stripslashes() 예제

<?php
$str = "Is your name O\'reilly?";

// 출력: Is your name O'reilly?
echo stripslashes($str);
?>

Example #2 배열에 stripslashes() 사용하기

<?php
function stripslashes_deep($value)
{
$value = is_array($value) ?
array_map('stripslashes_deep', $value) :
stripslashes($value);

return $value;
}

// 예시
$array = array("f\\'oo", "\\'ar", array("fo\\'o", "b\\'ar"));
$array = stripslashes_deep($array);

// 출력
print_r($array);
?>

Array
(
[0] => f'oo
[1] => b'ar
[2] => Array
(
[0] => fo'o
[1] => b'ar
)

)

출처 : PHP 메뉴얼.

CSS - CSS를 통한 중앙 정렬

2009-11-27T11:15:00.000+09:00

사이트 제작시 와이드 모니터와 일반 모니터에서의 위화감을 줄이기 위해 중앙정렬을 하는 사이트들이 늘어나고 있는것이 사실입니다. 사이트 자체를 가운데 정렬시키기 위해 여러가지 방법이 있지만 가장 쉬운 방법은 스타일 시트를 이용하는 방법입니다.

#body_div {
width:900px;
margin:0 auto;
text-align:left;
}

가장 기본적인 부분은 가로길이를 정해준후 margin 값을 0 auto로 주게 되면 레이어가 가운데 정렬하게 되며 그 안쪽으로 사이트를 제작해 주시면됩니다.

text-align 속성을 지정해준 이유는 인터넷 익스플로어에서는 기본정렬 속성이 center 이기 때문에 좌측으로 텍스트를 지정해줘야 파이어폭스나 크롬과 크로스브라우징 되게 됩니다.

사실 margin 속성을 이용하면 더 많은 효과를 효과적으로 줄 수 있기 때문에 아주 중요한 부분이라 할 수 있겠습니다.

jQuery 플러그인 - Auto Scroll

2009-11-26T17:13:00.000+09:00

어코디언 메뉴 플러그인만 소개하긴 너무 짧은 감이 있어 하나의 플러그인을 더 소개해드리겠습니다.

바로 오토 스크롤 플러그인인데 쉽게 말해 마우스 위치에 따라 그 방향으로 자동 스크롤 되는

플러그인입니다. 작동은 컨트롤키 + 마우스 이동 으로 할 수 있습니다.

적절히 응용하면 멋진 효과를 만들 수도 있고 유용하게 사용할 수 있는 플러그인 입니다.

$.autoscroll.init();

Setting options:

var opts = {

step: 100,
trigger: 100
};
$.autoscroll.init(opts);

위와 같은 형태로 사용할 수 있으며 자세한 사항은 아래 데모와 사이트를 이용해서 얻을 수 있습니다.

데모 : http://jdsharp.us/jQuery/plugins/AutoScroll/demo.php

다운로드 : http://jdsharp.us/jQuery/plugins/AutoScroll/

엘의 휴면 중인 미지공간

블로그 티스토리로 이전합니다.

차기 마크업 언어 표준 제안 - HTML5

스타크래프트2 삼매경...

MS 인터넷 익스플로러 9 드디어 공개

[잡담] 이래저래 정신이 없다보니...

스타크래프트2 클로즈 베타 출시.

부산 광안리를 다녀오다...

용사30 100% 클리어...

PHP 함수 - json_encode, json_decode

jQuery 1.4 추가사항 - .first(), last()

jQuery 1.4 추가사항 - .focusin(), .focusout()

jQuery 1.4 추가사항 - Delay

jQuery 1.4 정식버전 공개.

알툴즈를 대체할 프리웨어 모음.

CKEditor 설치 및 설정.

2010년이 시작 되었네요.

jQuery를 이용한 유동적인 사이즈의 iframe 만들기

jQuery 플러그인 - jQuery Cookie

요즘 들어...

CSS를 이용한 레이어 고정

jQuery Plugin - jQuery Datepicker

CSS Box Model - Margin, Padding

CSS Box Model - Outlines

CSS Styling - Fonts

CSS Box Model - Border (2)

CSS Box Model - Border (1)

CSS Styling - Tables

CSS Styling - Lists

CSS Styling - Links

CSS Styling - Text

CSS Styling - Background

CSS 기본 - CSS 구문법, 셀렉터, 사용법

jQuery 기본 Events - Event Helpers

jQuery를 이용한 검색어 자동완성

jQuery Utilities - jQuery.each()

히라노 아야(平野 綾) 2nd Album - 저 꽃처럼(あの花のように)

jQuery Utilities - jQuery.trim()

다양한 WYSIWYG 에디터

지름품 도착 - 히라노 아야 2집, 오사카만박

jQuery Utilities - jQuery.browser

jQuery 플러그인 - CLEARFIELD

jQuery 플러그인 - jQuery SimpleTree

PHP 기본 함수 (1)

CSS - CSS를 통한 중앙 정렬

jQuery 플러그인 - Auto Scroll

히라노 아야(平野綾) 2nd Album - 저 꽃처럼(あの花のように)