긍적적인 사고, 음식의 절제, 규칙적인 운동

* Pecha Kucha란?
‘재잘재잘 이야기하다’라는 뜻의 일본어로, 일본의 건축가들이 처음 채용한 발표 형식.
원래 형식은 20장의 슬라이드를 장당 20초씩 총 400초(약 6.7분) 동안 발표.
참고: http://en.wikipedia.org/wiki/Pecha_Kucha

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Bobyoung - www.lulu.com

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Web 2.0 Award - http://www.seomoz.org/web2.0#cat_109

웹2.0 에 대해 관심이 있다면, 랭킹순위의 사이트에서 참고해보시길~

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

WebDB - 아시안웹DB정보사이트 레드케이 - RedKei.com

http://www.redkei.com/

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

http://maps.google.co.kr/

<
크게 보기

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

http://www.stato.kr/home/stato

개인별 시작페이지를 만들 수 있다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

this.style.bacgroundColor = 배경색

this.style.backgroundImage = 배경 이미지

this.style.color = 색상

this.style.fontWeight = 폰트의 두께 (normal, bold, bolder, lighter, 100, 200, 300, 400(디폴트), 500 ... )

this.style.textDecoration = 밑줄사용 'underline', 밑줄제거 'none'

this.style.position = 위치, 사용할 수 있는 값은 "절대" 위치값과 "상대" 위치값이다.

this.style.pixelWidth = 가로 길이 (width)

this.style.pixelHeight = 세로 길이 (height)

this.style.pixelLeft = x-y 좌표계를 사용할 경우 요소의 x 위치

this.style.pixelTop = x-y 좌표계를 사용할 경우 요소의 y 위치

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

기본을 알면 디자인이 쉽다. 네비게이션 기본 & 핵심 원칙

EASY - 쉬운 네비게이션을 위한 원칙

1. 학습이 필요한 네비게이션은 피하라.

2. 사용자의 편재 위치를 항상 알 수 있도록 제공하라.

3. 대안을 제시할 수 있는 네비게이션을 제공하라.

: 계속 발전하는 웹 환경에서 새로운 학습이란 꼭 필요한 것입니다. 하지만 불필요하게 어렵게 만들어 사용자들로 하여금
많은 학습을 강요한다면 사용자들에게 외면당할 수 밖에 없습니다. 쉬운 네비게이션을 위한 원칙을 지켜 정황과 다양항 대안등을
제공해 주어 사용자들이 쉽게 사용할 수 있는 웹 사이트를 제작할 수 있기를 바랍니다.

Intuition - 직관적인 네비게이션을 위한 원칙

1. 네비게이션은 분명한 시각적 메시지를 제공하라.

2. 명확한 레이블을 제공하는 네비게이션을 제공하라.

3. 모든 페이지 내의 링크를 링크로 지각할 수 있도록 구성하라.

: 불필요한 설명과 복잡한 배치로 인해 네비게이션을 어렵게 만들어서는 안 됩니다.
어떻게 제공하는가, 내용물은 무엇인가 등에 대한 필수적인 사항이 네비게이션으로 표현될 수 있어야 합니다.
네비게이션의 확실한 시작적인 표시를 통해 직관적인 네비게이션을 위한 원칙을 지켜
사용하기쉬운 웹 사이트를 제작 할 수 있기를 바랍니다.

Consistency - 일관성 있는 네비게이션을 위한 원칙

1. 전체 사이트의 네비게이션이 일관성을 유지할 수 있도록 설계하라.

2. 다른 사이트들이 지키고 있는 네비게이션 원칙을 지켜라.

3. 네비게이션의 리에아웃을 조직적으로 설계하라.

: 일관성이란 하나의 웹 사이트상에서 또는 여러 가지 웹 사이트에서 지켜지고 있어
학습 없이도 쉽게 사용할 수 있는 법칙을 말합니다. 네비게이션의 일관성이 지켜지면 반복에 의한
학습 효과로 인해 심리적 모델 추출이 가능하고 일관성이 지켜지지 않으면 사용자를 혼란스럽게 할 것입니다.
일관성 있는 네비게이션을 위한 원칙을 지켜 사용자들에게 익숙하고 쉽게 사용할 수 있는 웹 사이트를
제작할 수 있기를 바랍니다.

Economy - 경제적인 네비게이션을 위한 원칙

1. 네비게이션의 구성 요소를 명료하게 표현하라.

2. 가장 중요한 요소를 강조하여 네비게이션을 설계하라.

3. 정보를 단계적으로 볼 수 있도록 네비게이션을 설계하라.

: 경제성의 개념은 '간결성','명료성' 등의 원리와 함께 다양한 정보를 한 화면 속에 보여 주면서
여러 가지 컨텐츠들의 내용과 구성을 쉽게 알아볼 수 있도록 하는 원리입니다.
경제적인 네비게이션을 위한 원칙을 지켜 사용자들이 최소한의 노력으로 바로 원하는 정보를 찾을 수 있도록
도움을 주는 웹사이트를 제작할 수 있기를 바랍니다.

Suitability - 사이트의 타겟에 적합한 네비게이션을 위한 원칙

1. 사용자의 연령에 적합한 네비게이션을 선택하라.

2. 사용자의 성별 등에 적합한 네비게이션을 선택하라.

3. 사용자의 예상 사용 시간에 적합한 네비게이션을 선택하라.

: 적합성이란 사용자의 연령, 성별, 예상 사용시간 등 다양한 타겟에 맞게 사이트의 컨셉을 제공해 주는 것을 말합니다.
사이트 메인 타겟의 인구 통계학적인 분석이 필요하며, 타겟이 되는 주 사용자들의 흥미를 유발할 수 있는 모든 방법이 동원되어
사용자들의 감성을 만족시켰을 때 잘 만들어진 사이트라고 말할 수 있을 것입니다. 사이트의 타겟에 적합한 네비게이션을 위한 원칙을 지켜
타겟 사용자들의 감성에 적합한 웹 사이트를 제작할 수 있기를 바랍니다.

Structure - 사이트 구조에 적합한 네비게이션을 위한 원칙

1. 계열 구조에 따른 네비게이션을 설계하라.

2. 계층 구조에 따른 네비게이션을 설계하라.

3. 그리드 구조에 따른 네비게이션을 설계하라.

4. 네트워크 구조에 따른 네비게이션을 설계하라.

: 현재 우리가 흔히 접하는 네비게이션 구조는 계열 구조, 계층 구조, 그리드 구조, 네트워크 구조로 구분할 수 있습니다.
컨텐츠의 성격에 따라 정보를 보여주는 방법, 즉 구조가 결정되면 각 정보간의 이동을 위한 네비게이션 설계에도 영향을 미치게 됩니다.
사이트 구조에 적합한 네비게이션을 위한 원칙을 지켜 사이트 구조에 필요한 네비게이션을 설계하여 웹사이트를 제작할 수 있기를 바랍니다.

Purpose - 사이트의 목적과 기능에 적합한 네비게이션을 위한 원칙

1. 사이트의 목적과 기능에 따라 유용한 네비게이션을 설계하라.

2. 사이트의 목적과 기능에 따라 즐길 수 있는 네비게이션을 설계하라.

3. 사용자의 목적과 행동을 지원하는 네비게이션을 설계하라.

: 웹 사이트의 목적과 기능에 따라 사용자 인터페이스 및 네비게이션 디자인이 달라져야 합니다.
사이트의 목적에 맞는 최적의 인터페이스 및 네비게이션 디자인을 통하여 웹 사이트의 주요 목적과 전달하는 내용을
효과적으로 부각시킬 수 있으며, 또한 사용자가 쉽게 이해하고 편리하게 사용할 수 있도록 사이트를 개발해야 합니다.
사이트의 목적과 기능에 적합한 네비게이션을 위한 원칙을 지켜 사용자들이 사용하기 편하고 쉬운 네비게이션을 제작할 수 있기를 바랍니다.

Estimate - 사용자들이 예측 가능한 네비게이션을 위한 원칙

1. 피드백을 주는 네비게이션을 설계하라.

2. 발생할 수 있는 오류를 예상하여 안정성 있는 네비게이션을 설계하라.

3. 사용자의 실수를 미리 예측하여 네비게이션을 설계하라.

: 웹 페이지와의 상호작용에서 피드백을 제공해 주어 사용자들에게 앞으로의 상황을 예측할 수 있게 해주는 원칙을 예측성이라고 말합니다.
이러한 피드백의 제곡은 자신이 가고자 했던 페이지가 원래 가고자 했던 페이지인지를 확인시켜 주면서,
앞으로 가야 할 방향을 예측할 수 있게 해 줍니다. 예측 가능한 네비게이션을 위한 원칙을 지켜 사용자들에게 안정성 있는
웹 사이트를 제공할 수 있기를 바랍니다.

Interest - 흥미 요소가 있는 네비게이션을 위한 원칙

1. 친근감 있는 요소를 적용하여 사용자들의 접근성을 높여라.

2. 멀티미디어의 활용으로 네비게이션의 흥미를 배가시켜라.

3. 적절한 메타포를 사용하여 네비게이션을 구성하라.

: 흥미성이란 사이트의 인터페이스와 네비게이션 구조에 친근감 있고 재미있는 요소를 제공하여
사용자로 하여금 흥미를 느낄 수 있게 해주는 디자인의 원리입니다.
흥미 요소가 있는 네비게이션을 위한 원칙을 지켜 사용자들에게 즐거운을 제공해주는 웹 사이트를 제작할 수 있기를 바랍니다.

※ 메타포(metaphor) - 어떤 것이 마치 다른 것인 것처럼 표현되거나 보이는 비유적인 표현이나 만들어진 환경에 대한 비유

Style - 스타일이 적용된 네비게이션을 위한 원칙

1. 적절한 디자인 스타일을 적용하여 변별성, 기억도, 선호도를 증대시켜라.

2. 전체 디자인 스타일과 일관성 있는 스타일을 유지하라.

3. 기능에 맞는 적절한 디자인을 선택하라.

: 디자이너의 역량이 100% 활용되는 사이트는 거의 없을 것입니다. 클라이언ㅌ의 취향과 그때 그때의 유행에 따라 많은 변수가 있을텐데요.
그럼에도 불구하고 사용성과 창조성을 조화롭게 잘 표현해 낼 수 있는 능력이 디자이너가 갖추어야 할 능력이 아닌가 생각됩니다.
스티알이 적용된 네비게이션을 위한 원틱을 지켜 사용자들을 만족시킬 수 있는 웹 사이트를 제작할 수 있기를 바랍니다.


[내용 다운로드]

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

HTML 특수문자코드표

 

표현문자	숫자표현	문자표현	설명
-	�-	-	사용하지 않음
space			-	수평탭
space	
	-	줄 삽입
-	-	-	사용하지 않음
space	 	-	여백
!	!	-	느낌표
"	"	"	따옴표
#	#	-	숫자기호
$	$	-	달러
%	%	-	백분율 기호
&	&	&	Ampersand
'	'	-	작은 따옴표
(	(	-	왼쪽 괄호
)	)	-	오른쪽 괄호
*	*	-	아스트릭
+	+	-	더하기 기호
,	,	-	쉼표
-	-	-	Hyphen
.	.	-	마침표
/	/	-	Solidus (slash)
0 - 9	0-9	-	0부터 9까지
:	:	-	콜론
;	&#59;	-	세미콜론
<	&#60;	&lt;	보다 작은
=	&#61;	-	등호
>	&#62;	&gt;	보다 큰
?	&#63;	-	물음표
@	&#64;	-	Commercial at
A - Z	&#65;-&#90;	-	A부터 Z까지
[	&#91;	-	왼쪽 대괄호
\	&#92;	-	역슬래쉬
]	&#93;	-	오른쪽 대괄호
^	&#94;	-	탈자부호
_	&#95;	-	수평선
`	&#96;	-	Acute accent
a - z	&#97;-&#122;	-	a부터 z까지
{	&#123;	-	왼쪽 중괄호
|	&#124;	-	수직선
}	&#125;	-	오른쪽 중괄호
~	&#126;	-	꼬리표
-	&#127;-&#159;	-	사용하지 않음
	&#160;	&nbsp;	Non-breaking space
¡	&#161;	&iexcl;	거꾸로된 느낌표
￠	&#162;	&cent;	센트 기호
￡	&#163;	&pound;	파운드
¤	&#164;	&curren;	현재 환율
￥	&#165;	&yen;	엔
|	&#166;	&brvbar;	끊어진 수직선
§	&#167;	&sect;	섹션 기호
¨	&#168;	&uml;	움라우트
ⓒ	&#169;	&copy;	저작권
ª	&#170;	&ordf;	Feminine ordinal
≪	&#171;	&laquo;	왼쪽 꺾인 괄호
￢	&#172;	&not;	부정
­	&#173;	&shy;	Soft hyphen
?	&#174;	&reg;	등록상표
&hibar;	&#175;	&macr;	Macron accent
°	&#176;	&deg;	Degree sign
±	&#177;	&plusmn;	Plus or minus
²	&#178;	&sup2;	Superscript two
³	&#179;	&sup3;	Superscript three
´	&#180;	&acute;	Acute accent
μ	&#181;	&micro;	Micro sign (Mu)
¶	&#182;	&para;	문단기호
·	&#183;	&middot;	Middle dot
¸	&#184;	&cedil;	Cedilla
¹	&#185;	&sup1;	Superscript one
º	&#186;	&ordm;	Masculine ordinal
≫	&#187;	&raquo;	오른쪽 꺾인 괄호
¼	&#188;	&frac14;	4분의 1
½	&#189;	&frac12;	2분의 1
¾	&#190;	&frac34;	4분의 3
¿	&#191;	&iquest;	거꾸로된 물음표
A	&#192;	&Agrave;	Capital A, grave accent
A	&#193;	&Aacute;	Capital A, acute accent
A	&#194;	&Acirc;	Capital A, circumflex accent
A	&#195;	&Atilde;	Capital A, tilde
A	&#196;	&Auml;	Capital A, dieresis or umlaut mark
A	&#197;	&Aring;	Capital A, ring (Angstrom)
Æ	&#198;	&AElig;	Capital AE diphthong (ligature)
C	&#199;	&Ccedil;	Capital C, cedilla
E	&#200;	&Egrave;	Capital E, grave accent
E	&#201;	&Eacute;	Capital E, acute accent
E	&#202;	&Ecirc;	Capital E, circumflex accent
E	&#203;	&Euml;	Capital E, dieresis or umlaut mark
I	&#204;	&Igrave;	Capital I, grave accent
I	&#205;	&Iacute;	Capital I, acute accent
I	&#206;	&Icirc;	Capital I, circumflex accent
I	&#207;	&Iuml;	Capital I, dieresis or umlaut mark
Ð	&#208;	&ETH;	Capital Eth, Icelandic
N	&#209;	&Ntilde;	Capital N, tilde
O	&#210;	&Ograve;	Capital O, grave accent
O	&#211;	&Oacute;	Capital O, acute accent
O	&#212;	&Ocirc;	Capital O, circumflex accent
O	&#213;	&Otilde;	Capital O, tilde
O	&#214;	&Ouml;	Capital O, dieresis or umlaut mark
×	&#215;	&times;	Multiply sign
Ø	&#216;	&Oslash;	width="130"Capital O, slash
U	&#217;	&Ugrave;	Capital U, grave accent
U	&#218;	&Uacute;	Capital U, acute accent
U	&#219;	&Ucirc;	Capital U, circumflex accent
U	&#220;	&Uuml;	Capital U, dieresis or umlaut mark
Y	&#221;	&Yacute;	Capital Y, acute accent
Þ	&#222;	&THORN;	Capital Thorn, Icelandic
ß	&#223;	&szlig;	Small sharp s, German (sz ligature)
a	&#224;	&agrave;	Small a, grave accent
a	&#225;	&aacute;	Small a, acute accent
a	&#226;	&acirc;	Small a, circumflex accent
a	&#227;	&atilde;	Small a, tilde
a	&#228;	&auml;	Small a, dieresis or umlaut mark
a	&#229;	&aring;	Small a, ring
æ	&#230;	&aelig;	Small ae diphthong (ligature)
c	&#231;	&ccedil;	Small c, cedilla
e	&#232;	&egrave;	Small e, grave accent
e	&#233;	&eacute;	Small e, acute accent
e	&#234;	&ecirc;	Small e, circumflex accent
e	&#235;	&euml;	Small e, dieresis or umlaut mark
i	&#236;	&igrave;	Small i, grave accent
i	&#237;	&iacute;	Small i, acute accent
i	&#238;	&icirc;	Small i, circumflex accent
i	&#239;	&iuml;	Small i, dieresis or umlaut mark
ð	&#240;	&eth;	Small eth, Icelandic
n	&#241;	&ntilde;	Small n, tilde
o	&#242;	&ograve;	Small o, grave accent
o	&#243;	&oacute;	Small o, acute accent
o	&#244;	&ocirc;	Small o, circumflex accent
o	&#245;	&otilde;	Small o, tilde
o	&#246;	&ouml;	Small o, dieresis or umlaut mark
÷	&#247;	&divide;	Division sign
ø	&#248;	&oslash;	Small o, slash
u	&#249;	&ugrave;	Small u, grave accent
u	&#250;	&uacute;	Small u, acute accent
u	&#251;	&ucirc;	Small u, circumflex accent
u	&#252;	&uuml;	Small u, dieresis or umlaut mark
y	&#253;	&yacute;	Small y, acute accent
þ	&#254;	&thorn;	Small thorn, Icelandic
y	&#255;	&yuml;	Small y, dieresis or umlaut mark

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장