'Programming/HTML/JavaScript/CSS'에 9개의 글이 있습니다.

[HTML] 특수문자표

posted-at2012.12.26 14:06 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

출처: 네이버 웹표준스터디 카페
참고: WIKI 문자참조 | W3SCHOOLS HTML Symbol Entities Reference 
HTML / XHTML 상의 특수기호가 그대로 표시되도록 기술하거나 키보드로 직접 입력할 수 없는 문자를 기술하기 위한 방법을 문자 참조 (character referendes) 라고 합니다.
문자 참조에는 1)문자 실제 참조 (character entity references) 2) 수치 문자 참조 (numerical character references)의 두가지 방식이 있다.
예를들어 "<" 은 문자 실체 참조 에서는 &lt; 수치문자 참조에서는 &#60;  으로 기술한다.

Latin 1 Character (ISO 8859-1)

문자 실제 참조수치 문자 참조설 명
 &nbsp; &#160;행바꿈 금지 스페이스
¡&iexcl;¡&#161;반전시킨 감탄부호
¢&cent;¢&#162;센트
£&pound;£&#163;파운드
¤&curren;¤&#164;통화
¥&yen;¥&#165;
¦a&bvbar;
¦&#166;세로파선
§&sect;§&#167;섹션
¨&uml;¨&#168;모음변이
©&copy;©&#169;저작권
ª&ordf;ª&#170;여성서수
«&laquo;«&#171;이중산괄호(시작)
¬&not;¬&#172;노트
-&shy;-&#173;소프트하이픈
®&reg;®&#174;등록상표
¯&macr;¯&#175;장음기호
°&deg;°&#176;
±&plusmn;±&#177;플러스마이너스
²&sup2;²&#178;2제곱(2의 슈퍼스크립트)
³&sup3;³&#179;3제곱 (3의 슈퍼 스크립트)
´&acute;´&#180;예(양음) 악센트
µ&micro;µ&#181;마이크로
&para;&#182;패러그레프
·&middot;·&#183;가운데점
¸&cedil;¸&#184;세디유
¹&sup1;¹&#185;제곱(1의 슈퍼 스크립트)
º&ordm;º&#186;남성서수
»&raquo;»&#187;이중산괄호(종료)
¼&frac14;¼&#188;4분의 1
½&frac12;½&#189;2분의 1
¾&frac34;¾&#190;4분의 3
¿&iquest;¿&#191;반전시킨 물음표
À&Agrave;À&#192;저(억음) 악센트 A
Á&Aacute;Á&#193;예(양음) 악센트 A
Â&Acirc;Â&#194;곡절 악센트 A
Ã&Atilde;Ã&#195;틸드 A
Ä&Auml;Ä&#196;모음 변이 A
Å&Aring;Å&#197;링 A
Æ&AElig;Æ&#198;연속하는 AE
Ç&Ccedil;Ç&#199;세디유 C
È&Egrave;È&#200;저(억음) 악센트 E
É&Eacute;É&#201;예(억음) 악센트 E
Ê&Ecirc;Ê&#202;곡절 악센트 E
Ë&Euml;Ë&#203;모음변이 E
Ì&Igrave;Ì&#204;저(억음) 악센트 I
Í&Iacute;Í&#205;예(양음) 악센트 I
Î&Icirc;Î&#206;곡절악센트 I
Ï&Iuml;Ï&#207;모음 변이 I
Ð&ETH;Ð&#208;고영어의 에즈(ETH)
Ñ&Ntilde;Ñ&#209;틸드 N
Ò&Ograve;Ò&#210;저(억음) 악센트 O
Ó&Oacute;Ó&#211;예(양음) 악센트 O
Ô&Ocirc;Ô&#212;곡절 악센트 O
Õ&Otilde;Õ&#213;틸드 O
Ö&Ouml;Ö&#214;모음 변이 O
×&times;×&#215;곱셉
Ø&Oslash;Ø&#216;slash O
Ù&Ugrave;Ù&#217;저(억음) 악센트 U
Ú&Uacute;Ú&#218;예(양음) 악센트 U
Û&Ucirc;Û&#219;곡절 악센트 U
Ü&Uuml;Ü&#220;모음 변이 U
Ý&Yacute;Ý&#221;예(양음) 악센트 Y
Þ&THORN;Þ&#222;고영어의 손 (THORN)
ß&szlig;ß&#223;연속하는 sz (독일어등)
à&agrave;à&#224;저(억음) 악센트 붙어 있는 a
á&aacute;á&#225;예(양음) 악센트 붙어 있는 a
â&acirc;â&#226;곡절 악센트 a
ã&atilde;ã&#227;틸드 a
ä&auml;ä&#228;모음 변이 a
å&aring;å&#229;링 a
æ&aelig;æ&#230;연속하는 ae
ç&ccedil;ç&#231;세디유 c
è&egrave;è&#232;저(억음) 악센트 e
é&eacute;é&#233;예(양음) 악센트 e
ê&ecirc;ê&#234;곡절 악센트 e
ë&euml;ë&#235;모음 변이 e
ì&igrave;ì&#236;저(억음) 악센트 i
í&iacute;í&#237;예(양음) 악센트 i
î&icirc;î&#238;곡절 악센트 i
ï&iuml;ï&#239;모음 변이 i
ð&eth;ð&#240;고영어의 에즈 (eth)
ñ&ntilde;ñ&#241;틸드 n
ò&ograve;ò&#242;저(억음) 악센트 o
ó&oacute;ó&#243;예(양음) 악센트 o
ô&ocirc;ô&#244;곡절 악센트 o
õ&otilde;õ&#245;틸드 o
ö&ouml;ö&#246;모음 변이 o
÷&divide;÷&#247;나눗셈
ø&oslash;ø&#248;틸드 o
ù&ugrace;ù&#249;저(억음) 악센트 u
ú&uacute;ú&#250;예(양음) 악센트 u
û&ucirc;û&#251;곡절 악센트 u
ü&uuml;ü&#252;모음 변이 u
ý&yacute;ý&#253;예(양음) 악센트 y
þ&thorn;þ&#254;고영어의 손 (thorn)
ÿ&yuml;ÿ&#255;모음 변이 y

 Special Characters

문자 실제 참조수치 문자 참조설 명
"&quot;"&#34;이중 인용부호
&&amp;&&#38;앤드 (ampersand(&))


/&#47;Slash
<&lt;<&#60;작아짐
>&gt;>&#62;커짐
'&apos;'&#39;어퍼스트로피
Œ&OElig;Œ&#338;연속하는 OE
œ&oelig;œ&#339;연속하는 oe
Š&Scaron;Š&#352;캐론 S
š&scaron;š&#353;캐론 s
Ÿ&Yuml;Ÿ&#376;모음변이 Y
ˆ&circ;ˆ&#710;곡절악센트
˜&tilde;˜&#732;틸드
&ndash;&#8211;n 문자폭 대시
&mdash;&#8212;m 문자폭 대시
&lsquo;&#8216;인용부호 (개시)
&rsquo;&#8217;인용부호 (종료)
&sbquo;&#8218;하부인용부호
&ldquo;&#8220;이중 인용부호 (개시)
&rdquo;&#8221;이중 인용부호 (종료)
&bdquo;&#8222;하부 이중 인용부호
&dagger;&#8224;참조부호
&Dagger;&#8225;이중 참조부호
&permil;&#8240;천분율
&lsaquo;&#8249;산 괄호 (개시)
&rsaquo;&#8250;산 괄호 (종료)
&euro;&#8364;유로

 Symbols

문자 실제 참조수치 문자 참조설 명
Α&Alpha;Α&#913;알파
Β&Beta;Β&#914;베타
Γ&Gamma;Γ&#915;감마
Δ&Delta;Δ&#916;델타
Ε&Epsilon;Ε&#917;입실론
Ζ&Zeta;Ζ&#918;제타
Η&Eta;Η&#919;에타
Θ&Theta;Θ&#920;쎄타
Ι&Iota;Ι&#921;이오타
Κ&Kappa;Κ&#922;카파
Λ&Lambda;Λ&#923;람다
Μ&Mu;Μ&#924;
Ν&Nu;Ν&#925;
Ξ&Xi;Ξ&#926;크사이
Ο&Omicron;Ο&#927;오미크론
Π&Pi;Π&#928;파이
Ρ&Rho;Ρ&#929;
Σ&Sigma;Σ&#931;시그마
Τ&Tau;Τ&#932;타우
Υ&Upsilon;Υ&#933;웁실론
Φ&Phi;Φ&#934;화이
Χ&Chi;Χ&#935;카이
Ψ&Psi;Ψ&#936;프사이
Ω&Omega;Ω&#937;오메가
α&alpha;α&#945;알파
β&beta;β&#946;베타
γ&gamma;γ&#947;감마
δ&delta;δ&#948;델타
ε&epsilon;ε&#949;입실론
Ζ&Zeta;ζ&#950;제타
η&eta;η&#951;에타
θ&theta;θ&#952;쎄타
ι&iota;ι&#953;이오타
κ&kappa;κ&#954;카파
λ&lambda;λ&#955;람다
μ&mu;μ&#956;
ν&nu;ν&#957;
ξ&xi;ξ&#958;크사이
ο&omicron;ο&#959;오미크론
π&pi;π&#960;파이
ρ&rho;ρ&#961;
ς&sigmaf;ς&#962;파이널 시그마
σ&sigma;σ&#963;시그마
τ&tau;τ&#964;타우
υ&upsilon;υ&#965;웁실론
φ&phi;φ&#966;파이
χ&chi;χ&#967;카이
ψ&psi;ψ&#968;프사이
ω&omega;ω&#969;오메가
ϑ&thetasym;ϑ&#977;쎄타 심벌
ϒ&upsih;ϒ&#978;훅 웁실론
ϖ&piv;ϖ&#982;파이 심벌
&bull;&#8226;불렛 (중점)
&hellip;&#8230;3점 리더
&prime;&#8242;프라임 부호 (분 또는 피트)
&Prime;&#8243;이중 프라임 부호 (초 또는 인치)
&oline;&#8254;오버라인 (오버스코어)
&frasl;&#8260;분수의 슬래시
&weierp;&#8472;필기체의 P
&image;&#8465;필기체의 I (허수의 I)
&real;&#8476;필기체의 R (허수의 R)
&trade;&#8482;상표
&alefsym;&#8501;알레프
&larr;&#8592;왼쪽 화살표
&uarr;&#8593;위쪽 화살표
&rarr;&#8594;오른쪽 화살표
&darr;&#8595;아래쪽 화살표
&harr;&#8596;좌우 화살표
&crarr;&#8629;캐리지리턴
&lArr;&#8656;이중 왼쪽 화살표
&uArr;&#8657;이중 윗쪽 화살표
&rArr;&#8658;이중 오른쪽 화살표
&dArr;&#8659;이중 아래쪽 화살표
&hArr;&#8660;이중 좌우 화살표
&forall;&#8704;모든 것의
&part;&#8706;편미분
&exist;&#8707;존재한다
&empty;&#8709;공집합
&nabla;&#8711;나블라
&isin;&#8712;요소로서 포함한다
&notin;&#8713;요소로서 포함되지 않는다
&ni;&#8715;원으로서 포함한다
&prod;&#8719;n 의 곱
&sum;&#8721;n 의 총계
&minus;&#8722;마이너스
&lowast;&#8727;astersick
&radic;&#8730;제곱근
&prop;&#8733;비례
&infin;&#8734;무한
&ang;&#8736;각도
&and;&#8743;한편
&or;&#8744;또는
&cap;&#8745;곱집합
&cup;&#8746;합집합
&int;&#8747;적분
&there4;&#8756;그러므로
&sim;&#8764;틸드
&cong;&#8773;대략동일하다
&asymp;&#8776;대충 같다
&ne;&#8800;동일하지 않다
&equiv;&#8801;합동
&le;&#8804;작든지 같음
&ge;&#8805;크든지 같음
&sub;&#8834;부분집합 (포함된다)
&sup;&#8835;부분집합 (포함한다)
&nsub;&#8836;부분집합 (포함되지 않는다)
&sube;&#8838;부분집합 (포함되든지 같다)
&supe;&#8839;부분집합 (포함하든지 같다)
&oplus;&#8853;원 가산 기호
&otimes;&#8855;원 곱셈 기호
&perp;&#8869;수직
&sdot;&#8901;도트
&lceil;&#8968;왼쪽 실링
&rceil;&#8969;오른쪽 실링
&lfloor;&#8970;왼쪽 플로어
&rfloor;&#8971;오른쪽 플로어
&lang;&#9001;왼쪽 앵글
&rang;&#9002;오른쪽 앵글
&loz;&#9674;마름모
&spades;&#9824;스페이드
&clubs;&#9827;클로버
&hearts;&#9829;하트
&diams;&#9830;다이아몬드


※ 브라우저에서 표시되지 않는 특수문자
      1. 세로 파선의 문자 실제 참조 - &bvbar;
      2. 소프트 하이픈의 문자실제참조, 수치문자참조 - &shy; / &#173;
      3. 저(억음) 악센트 u의 문자 실제 참조 - &ugrace;

'Programming > HTML/JavaScript/CSS' 카테고리의 다른 글

[HTML] 특수문자표  (0) 2012.12.26
[HTML] 색상표  (0) 2012.12.17
[HTML] input 태그 총정리  (0) 2012.12.17
[JavaScript] jQuery의 기본  (0) 2012.12.17
[JavaScript] substr (문자열 나누기) 사용  (0) 2012.12.17
[JavaScript] window 객체  (0) 2012.12.17

[HTML] 색상표

posted-at2012.12.17 19:03 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

[RED COLOR]

#FFF7F7#FEF8F8#FDF9F9#FCF9F9
#FFECEC#FCEEEE#FAF1F1#F9F2F2
#FFCCCC#F8D2D2#F2D9D9#EFDCDC
#FF9999#F2A6A6#E5B2B2#DEB8B8
#FF6666#EC7979#D88C8C#CE9595
#FF3333#E54C4C#CC6666#BF7373
#FF0000#DF2020#BF4040#AF5050
#E60000#C91D1D#AC3939#9D4747
#CC0000#B21919#993333#8C4040
#B30000#9C1616#862D2D#7B3838
#990000#861313#722626#682F2F
#660000#590D0D#4C1919#451F1F
#4D0000#430909#391313#341818
#340000#2D0606#270D0D#231010
#270000#220505#1D0A0A#1A0C0C

 

[ornagered COLOR]

#FFFCFB#FEFCFB#FEFCFC#FDFCFC
#FFF8F6#FDF9F7#FCF9F8#FBF9F9
#FFEDE9#FCEFEC#F9F0EE#F6F2F1
#FFDCD4#F8DED9#F4E3DF#EFE6E4
#FFC4B7#F5C9C0#EDCFC9#E4D5D2
#FFAB98#F0B3A5#E5BBB2#D8C3BE
#FF967E#EDA08F#DEAA9E#CEB4AE
#FF6947#E5785F#D18675#BA948C
#FF4419#DF5738#C56852#A87A6F
#FF3000#DC4522#BF58409F6B5F
#E62B00#C63E1F#AC4F39#8F6156
#B82200#9E3118#8A3F2E#734D45
#931B00#7E2713#6E3225#5C3E37
#671300#581B0D#4D231A#402B26
#581000#4C180C#421E16#372521
#3E0B00#361008#2E140F#261A17

 

[ORANGE]

#FFFDFA#FEFCFA#FDFCFB#FDFDFC
#FFF7EF#FDF7F1#FBF7F3#F9F7F5
#FFEBD8#FAEBDD#F5EBE2#F0EBE6
#FFD7B2#F5D7BB#EBD7C5#E2D8CF
#FFCE9F#F3CEAB#E7CEB7#DBCFC3
#FFBD7E#EFBD8E#DEBD9E#CEBEAE
#FFA147#E8A15E#D1A275#BAA28C
#FF8A19#E28A36#C58A52#A88B6F
#FF7E00#DF7E20#BF7F40#9F7E5F
#E87100#CA711D#AD733A#917357
#CC6400#B2641A#986433#7F654C
#AB5300#955315#80542B#6B5540
#813E00#713F10#603F20#503F30
#5B2C00#4F2C0B#442D17#392D22
#3B1D00#331C07#2C1D0F#251D16
#231100#1E1104#1A1109#16110D

 

[GOLD]

#FFFCF2#FBFAF5#FBFAF5#FAF9F7
#FFF9E7#F9F6ED#F9F6ED#F6F4F0
#FFF5D9#FAF3DE#F5F0E2#F0EEE7
#FFEFBF#F7EBC7#EFE7CF#E7E3D7
#FFE69D#F2DFA9#E6D9B5#DAD4C2
#FFDC74#EDD385#DCCA97#CBC2A8
#FFD047#E8C45E#D1B975#BAAE8C
#FFC519#E2B636#C5A852#A89A6F
#FFC000#DFAF20#BF9F40#9F8F5F
#F3B600#D4A61E#B6973D#98895B
#DBA300#BF951B#A48837#897B52
#BA8B00#A27F17#8B732E#746846
#956F00#826512#6F5C25#5D5338
#705400#624D0E#54461C#463F2A
#4F3B00#45360A#3B3114#312C1D
#332600#2C2206#26200D#201D13

 

[YELLOW]

#FFFEF8#FEFDF9#FDFDFA#FCFCFA
#FFFDEF#FDFBF1#FBFAF3#F9F8F5
#FFFCE0#FBF9E4#F7F5E8#F3F2EB
#FFFAC7#F8F4CE#F1EED5#EAE9DC
#FFF7A2#F3EFAD#E7E3B9#DCDAC5
#FFF270#EDE382#DBD494#C9C6A5
#FFED33#E5D74C#CCC366#B2AD7F
#FFEA00#DFCF20#BFB440#9F995F
#E6D200#C9BA1D#ACA239#8F8A56
#C4B200#AB9D18#938A31#7A7549
#9D8E00#897D13#756D27#625E3B
#766A00#675E0F#58521D#49462C
#554C00#4A430A#3F3A15#353320
#3C3500#342F07#2D290F#252316
#272300#221F05#1D1B0A#18170E
#220013#141203#111006#0E0D08

 

[YELLOW GREEN]

#F8FCF3"#F8FBF4#F7F9F5#F7F8F6
#F2F9E8#F2F7EA#F1F4EC#F0F2EE
#E8F5D5#E7F1D9#E6EDDD#E6E9E1
#D9EFB9#D8E8C0#D8E8C0#D5DACD
#C4E693#C2DB9D#C0D1A8#BEC7B2
#ABDC65#A8CD74#A6BE83#A3AF91
#90D133#8CBD47#88A95A#85956E
#74C600#6FAD19#6B9431#677B4A
#69B319#659C16#61862D#5D7043
#61A500#5D9014#597B29#56673E
#549000#517E12#4E6C24#4B5A36
#457700#42680F#40591E#3D4A2C
#355C00#33500B#314517#2F3922
#264200#233908#233110#222919
#192C00#182605#17210B#161B10
#0F1A00#0E1603#0D1306#0D100A

 

[GREEN]

#F7FAF6#F7F9F6#F7F9F7#F7F8F7
#ECF5EB#EDF3EC#EEF2ED#EFF1EF
#DFEEDD#E1ECDF#E2E9E1#E3E7E3
#CBE4C9#CDE0CC#D1DDD0#D4DAD3
#B3D7B0#B7D2B5#BBCDBA#BFC8BE
#96C792#9BC098#A1B99F#A7B3A6
#75B570#7CAC78#83A381#8B9B8A
#52A34C#5C9857#658D62#6E826C
#2D8F26#388233#437440#4F674D
#087B00#156B0F#235C1F#304D2E
#076900#125C0D#1D4E1A#294127
#065400#0E490A#183F15#20341F
#054100#0C3908#123010#192818
#043100#092B06#0E240C#131E12
#032200#061D04#0A1908#0E150D
#021600#041303#061005#080D08

 

[TEAL]

#F9FCFC#F9FBFB#FAFBFB#FAFBFB
#F2F8F8#F3F7F7#F3F6F6#F4F5F5
#E7F2F1#E8F0EF#EAEFEF#EBEEEE
#D6E9E7#D8E6E4#DBE4E3#DDE2E1
#BDDCD9#C1D8D6#C5D4D2#C8D0CF
#9ECCC7#A4C6C2#A9C0BD#AFBAB9
#79B9B1#81B1AB#89A9A5#91A19F
#51A59A#5B9A92#66908A#708582
#268F81#338277#40746D#4D6763
#006F61#0E6156#1C534C#294541
#006054#0C544B#184842#243C39
#005147#0A473F#143C37#1E322F
#00433A#083A33#11322D#192A28
#00342D#062D28#0D2723#13201E
#002722#05221E#0A1D1A#0E1817
#001B18#031715#071413#0A1110

 

[DARKCYAN]

#F0F5F5#F0F4F4#F1F3F3#F2F3F3
#E6EFEF#E7EEEE#E8ECEC#E9EBEB
#D8E6E7#DAE4E5#DCE3E3#DDE1E1
#C6DBDC#C9D8D9#CBD5D6#CED3D3
#AFCCCE#B3C8CA#B7C5C6#BAC1C2
#93BABD#98B5B7#9DB0B2#A3ACAD
#74A6AB#7BA0A4#829A9D#889596
#549198#5C8A8F#658387#6D7C7E
#347C85#3E747B#486B70#526466
#196B75#246169#30595E#3B4F52
#005B66#0D5159#19464C#263C3F
#00525C#0B4850#174045#223639
#00464E#0A3E44#13363A#1D2E30
#00383E#083136#0F2B2E#172426
#002A2F#062529#0C2023#111C1D
#001D21#041A1D#081618#0C1314

 

[SKY BLUE]

#F6FCFF#F7FCFE#F8FBFC#F9FAFB
#EDF9FF#EFF8FC#F1F7FA#F4F7F8
#E0F4FF#E4F3FB#E8F2F7#EBF0F3
#CEEEFF#D4ECF9#DAEAF2#E0E8EC
#B3E5FF#BCE1F5#C6DFEC#CFDBE2
#90D9FF#9ED4F1#ACD0E3#B9CBD5
#65CBFF#78C4EB#8BBED8#9FB8C5
#33BAFF#4CB1E5#66A9CC#7FA1B2
#00A0F3#1E95D4#3D8CB6#5B8398
#0092E0#1C89C4#3881A8#54788C
#0080C6#1978AD#317194#4A6A7B
#006CA7#156692#2A5F7D#3E5968
#00588A#115378#224E67#344A56
#00456C#0D415E#1B3D51#283943
#00324E#0A2F44#132C3A#1D2930
#002235#06202E#0D1E27#141C21

 

[BLUE]

#F7FAFF#F8FAFE#F9FAFD#FAFBFC
#F1F6FF#F3F7FD#F4F6FB#F6F7F9
#E7F0FF#EAF1FC#EDF1F9#F0F2F6
#D9E7FF#DEE8FA#E2E9F5#E7EAF0
#C4DAFF#CBDBF7#D3DEF0#DAE0E9
#A8C9FF#B3CCF4#BECEE9#C8D0DE
#85B3FF#94B6EF#A3BAE0#B3BED1
#5B98FF#6F9DEA#84A2D6#98A7C1
#2D7CFF#4782E4#6188CA#7C8FB0
#0060FF#2068DF#4070BF#5F779F
#0056E6#1D5DC9#3964AC#566B8F
#0049C4#184FAB#315593#495B7A
#003A9D#133E89#274475#3B4962
#002C76#0F3067#1D3358#2C3749
#001F53#0A2148#15243E#1F2734
#001436#07162F#0D1D28#141921

 

[MEDIUM BLUE]

#F8F8FD#F8F8FC#F9F9FB#FAFAFB
#F3F3FB#F4F4FA#F5F5F9#F6F6F8
#EBEBF9#EDEDF7#EEEEF5#F0F0F3
#E1E1F6#E3E3F3#E6E6F0#E9E9EE
#D3D3F2#D7D7EE#DBDBEA#DEDEE6
#C1C1ED#C6C6E7#CCCCE2#D1D1DC
#ABABE7#B2B2DF#BABAD8#C1C1D0
#8F8FDF#9999D5#A3A3CB#ADADC1
#6F6FD6#7C7CC9#8989BC#9595AF
#4B4BCC#5B5BBC#6B6BAB#7B7B9B
#2626C2#3939AE#4D4D9B#606087
#2222AF#33339D#45458B#57577A
#1C1C90#2A2A81#393973#474764
#16166F#212164#2C2C58#37374D
#101050#181848#202040#282838
#0A0A34#0F0F2E#141429#1A1A24

 

[BLUE VIOLET]

#FAF8FE#FAF9FD#FAFAFC#FBFAFC
#F3EDFC#F3EFFA#F4F2F6#F4F2F6
#EBE2FA#ECE5F7#ECE8F4#EDEBF1
#E1D4F7#E2D8F2#E3DDEE#E4E1EA
#D4C2F3#D6C8ED#D7CEE6#D8D4E0
#C3ABEE#C5B3E5#C8BCDD#CAC4D5
#AF8FE8#B29ADD#B5A5D1#B8B0C6
#9970E1#9D7ED3#A08CC4#A49AB6
#804CD9#845DC7#896FB5#8E81A4
#6526D1#6A3BBB#7051A6#766691
#4B00C9#5119B0#573296#5E4B7D
#3E00A7#431592#492A7D#4E3E68
#300081#341071#382060#3C3050
#23005D#250B51#281745#2C233A
#190041#1B0839#1C1030#1E1828
#10002A#110524#120A1F#14101A

 

[PURPLE]

#FAF8FC#F9F8FB#FAF9FB#F9F9FA
#F6F2F9#F6F3F8#F6F4F7#F5F4F6
#F0E9F5#EFEAF3#EFECF2#EFEDF0
#E7DCEF#E6DEEC#E6E1EA#E6E3E8
#DACAE6#D9CDE2#D9D1DF#D8D4DB
#CAB2DB#C9B7D6#C8BCD0#C7C1CB
#B594CD#B49BC6#B2A2BE#B1A9B7
#9D71BD#9B7AB3#9A84AA#988DA0
#834CAC#8158A0#7F6494#7E7088
#68269A#65348B#64437D#61516E
#4D0088#4A1177#4A1177#463355
#420074#3F0E65#3E1D57#3B2B48
#35005D#330B51#311745#30233A
#260043#24083A#241132#23192A
#19002D#180527#170B21#17111C
#0E0019#0E0316#0D0612#0C090F

 

[FUCHSIA]

#FFF6FE#FEF7FD#FCF8FC#FBF9FB
#FFEEFE#FDF0FC#FAF2F9#F8F4F8
#FFE2FE#FBE5FA#F7E9F6#F4EDF4
#FFD1FD#F9D7F7#F3DCF2#EDE2EC
#FFB9FC#F6C2F4#EDCAEB#E4D3E3
#FF99FA#F2A6EE#E5B2E2#D8BFD7
#FF71F8#ED83E7#DB94D7#C9A6C7
#FF3FF7#E757E0#CF6FCA#B787B5
#FF00F6#DF20D8#BF40BA#9F5F9C
#E600DD#C91DC2#AC39A7#8F568D
#BD00B6#A5179F#8D2F89#764774
#9C0095#881383#752771#613A5F
#7A0073#6A0F64#5B1E57#4C2E4A
#590054#4E0B4A#42163F#372136
#3E003B#360834#2E0F2C#261725
#270025#220520#1D0A1C#180E17

 

[DEEP PINK]

#FFF5FA#FDF6F9#FCF7F9#FBF9FA
#FFE8F5#FCEBF5#F9EEF4#F6F0F3
#FFD6ED#FADBEC#F4E0EB#EFE5EB
#FFBEE2#F7C6E1#EECEE0#E6D6DF
#FFA2D6#F3ADD4#E7B9D3#DCC5D2
#FF82C8#EF91C6#DFA1C4#D0B1C2
#FF59B6#EA6EB3#D582B0#C097AE
#FF2DA4#E447A0#CA619C#B07C99
#FF0090#DF208B#BF4087#9F5F83
#E60081#C91D7D#AC3979#8F5676
#C4006D#AB186A#933167#7A4964
#A1005A#8D1458#782855#643C52
#7C0046#6C0F43#5D1F42#4D2E3F
#590033#4E0B31#42162F#37212E
#3A0021#32071F#2B0E1E#24161E
#220013#1D0412#190811#150D11

 

[BLACK]

#FFFFFF
#FBFBFB
#F8F8F8
#F4F4F4
#EEEEEE
#E5E5E5
#DDDDDD
#D0D0D0
#C0C0C0
#ADADAD
#989898
#808080
#666666
#4B4B4B
#262626
#000000

'Programming > HTML/JavaScript/CSS' 카테고리의 다른 글

[HTML] 특수문자표  (0) 2012.12.26
[HTML] 색상표  (0) 2012.12.17
[HTML] input 태그 총정리  (0) 2012.12.17
[JavaScript] jQuery의 기본  (0) 2012.12.17
[JavaScript] substr (문자열 나누기) 사용  (0) 2012.12.17
[JavaScript] window 객체  (0) 2012.12.17

[HTML] input 태그 총정리

posted-at2012.12.17 18:45 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

1. <input> : 평범하게 글자나 텍스트칸을 넣을 수있는 공간이 생기죠.

2. <input type=""> : 기존의 input에다가 type를 지정하여 type의 옵션을 넣으면, 다양한 모양이 됩니다. 단 입력이나 기타 등등의 모양 꼴로 변하죠.

3. <input type="text"> : 이건 <input>과 동일한 것인데, text를 넣을 수 있습니다.
4. <input type="password">: 이건 1번과 2번과 3번과 동일한데, 비밀번호로 지정되어 글자를 넣든 숫자를 넣든 **** <-이렇게 표시됩니다.

4. <input type="checkbox"> : 이건 체크박스로 나타납니다.
5. <input type="checkbox" checked> : 이건 체크박스의 선택된 것으로 나오죠.
6. <input type="checkbox" checked disabled> : 이건 체크되었다가 다시는 선택 못하게 하는거죠

7. <input type="radio"> : 이건 라디오 버튼으로 나타납니다.
8. <input type="radio" checked> : 이건 라디오 버튼의 선택된 것으로 나오죠.
9. <input type="radio" checked disabled> : 이건 선택되었다가 다시는 선택 못하게 하는거죠

10. <input type="hidden"> : 이건 숨김필드입니다. 값을 넘겨받을때 숨김속성으로 몰래 감춰지죠. 대부분 form태그의 중요한 속성을 사용할 때 하더군요.

11. <input type="image" src="이미지 경로및 주소"> 이건 이미지의 경로를 넣어 일반<img>태그 처럼 할 수 있습니다. 단 버튼이 이미지의 경로로 바뀌고,form 태그의 submit 태그와 함께 포함되어 있습니다.

12. <input type="reset"> : 이건 초기화 하는 버튼(영어로 submit 또는 초기화라고 나옴)
13. <input type="reset" value="초기화"> :  value값에 초기화라고하면 초기화라고 만들어줌

14. <input type="submit"> : 이건 전송버튼
15. <input type="submit" value="전송함"> : 전송버튼인데다가 버튼이름을 전송함 이라고 할 수있음.
16. <input type="file"> : 파일을 첨부할 때 사용하며, CSS와 곁들어서 사용 가능

# 기타 1
1. <input type="text" value="텍스트"> : 이렇게 사용하면 텍스트 칸에 텍스트 라고 글자가 이미 나와버림
2. <input type="text" value="텍스트 사이즈 지정" size="20"> : 텍스트 사이즈를 20만큼 지정
3. <input type="text" value="" name="text"> : php이나, 자바스크립트를 사용할때 변수를 넘거나 받을때 text라는 값을 받도록 name의 갑을 text라 지정하고 이 버튼의 태그 이름을 text라고 지정함
4. <input type="text" value="" name="text" style="border:1;color;red"> : 이건 CSS인데 여러모로 사용 할수있음. 굳이 설명을 하지 않겠음 CSS에서 color;red 라고 지정해주면, 텍스트칸의 글자색을 빨간색으로 지정해줌

# 기타2
특히 value는 <input>태그의 텍스트의 이름을 부여 할때 사용함
예를 들면, <input>과 <input value="텍스트칸 이에요"> 와 차이점을 알게 될 것임

각버튼마다 name값을 부여 할 수있음(name값은 자기마음대로 지정가능)
예를 들면) <input name="button">

각버튼마다, type를 지정할수 있다. 위의 설명을 보면 알겠죠?
type="text/password/hidden/radio/checkbox/file/submit/reset/image"

# 기타3
버튼에 CSS를 첨가하여 이쁘게 꾸밀 수있다.
<input name="button" style="background-color:purple;border-color:red;font-face:굴림;font-size:9pt;">
↑위의 처럼

# 기타4

disabled의 속성과 maxlength="15"의 속성
disabled속성은 input의 선택을 못하게 막아준다
<input type="text" value="" disabled>
<input type="text" value="ㅋㅋㅋ 금지욧" disabled>
<input type="radio" value="" checked disabled>
<input type="checkbox" value="" checked disabled>

그리고 maxlength 속성은 최대 글자 입력넣을 수있는 제한수입니다.
<input type="text" value="" maxlength="20"> <--이렇게 하면 글자 입력수를 20자리만 입력가능 

'Programming > HTML/JavaScript/CSS' 카테고리의 다른 글

[HTML] 특수문자표  (0) 2012.12.26
[HTML] 색상표  (0) 2012.12.17
[HTML] input 태그 총정리  (0) 2012.12.17
[JavaScript] jQuery의 기본  (0) 2012.12.17
[JavaScript] substr (문자열 나누기) 사용  (0) 2012.12.17
[JavaScript] window 객체  (0) 2012.12.17

[JavaScript] jQuery의 기본

posted-at2012.12.17 18:44 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

jQuery는 한 개의 JavaScript 파일로 존재한다. 공통의 DOM, 이벤트, 특수 효과, Ajax 함수를 포함한다. 다음 코드를 쓰면, 웹 페이지로 포함시킬 수 있다:

<script type="text/javascript" src="path/to/jQuery.js"></script>

jQuery는 두 가지의 상호 작용 스타일을 갖고 있다:

  • $ 함수 이용. jQuery 오브젝트의 팩토리 메소드이다. 이 함수들은 "chainable"하다: 각각은 jQuery 오브젝트를 리턴한다.
  • $. -가 앞에 붙은 함수 이용. 이들 함수는 jQuery 오브젝트 그 자체와 연동되지는 않는다.


일반적으로 여러 개의 DOM 노드들을 조작하는 웍플로우는 $ 함수로 시작된다. CSS 셀렉터 스트링을 가지고 호출된다. 결과적으로 0개 혹은 그 이상의 HTML 페이지 내의 엘리먼트를 리퍼런스하는 jQuery 오브젝트가 리턴된다. 이 노드 집합들은 jQuery 오브젝트에 대해 인스턴스 메소드들을 적용함으로써 조작될 수 있다. 혹은 노드들 그 자체가 조작될 수 있다. 예를 들면 다음과 같다:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

div 태그가 달린 모든 엘리먼트를 찾되, 클래스 애트리뷰트가 test인 것을 찾는다. p 태그를 찾되, 클래스 애트리뷰트가quote인 것을 찾는다. 찾아낸 각각의 엘리먼트에 대해 클래스 애트리뷰트 blue를 추가한다. 그 뒤 애니메이션 효과를 주어 아래쪽으로 슬라이드(미끄러지게) 시킨다. $  add 함수는, 찾아낸(matched) 집합(set)에 영향을 준다. addClass  slideDown는 리퍼런스된 노드들에 영향을 준다.

$.가 앞에 붙은 함수들은, 글로벌 프로퍼티나 비해이비어에 영향을 주는, 간편한(유틸리티) 메소드들이다. 예를 들면 다음과 같다:

$.each([1,2,3], function() {  document.write(this + 1);});

 234 를 도큐먼트에 출력한다.


Ajax 루틴들은 $.ajax 및 관련 코드를 이용하여 수행할 수 있다. 이를 사용하여, 원격 데이터(remote data)를 로드하거나 조작할 수 있다.

$.ajax({  type: "POST",  url: "some.php",  data: "name=John&location=Boston",  success: function(msg){    alert( "Data Saved: " + msg );  }});

… 파라미터 name=John, location=Boston을 주면서 some.php에 요청을 보낸다. 요청이 성공적으로 수행되었으면, 그 응답이 alert()된다.

[JavaScript] substr (문자열 나누기) 사용

posted-at2012.12.17 18:23 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

function jvs_left(str,ea){

  rslt = str.substr(0,ea);  //substr 은 어디서부터 몇개, substring 는 어디서부터 어디까지

  alert(rslt);

  //return rslt;

}


function jvs_right(str,ea){

  alen = str.length;

  rslt = str.substr(alen-ea,ea);

  alert(rslt);

}



jvs_left(t,1);

jvs_right(t,4);


t 라는 문자열에서 왼쪽에서 1 개를 끊어오는 함수와, 오른쪽에서 4개를 끊어오는 함수.

한글, 영어 상관없이 1개를 끊어오게 하면 한글이 깨지지 않고 통째로(php 는 깨짐) 끊어와서

'가' 가 출력되고, 오른쪽에서 4개를 끊어오면 '.php' 가 출력된다.


위의 설명에서도 알 수 있듯이,

substr 함수는 어디서부터(0부터 시작) 몇개를 끊어올 것인지를 지정하는 함수이고,

substring 함수는 어디서부터(0부터 시작) 시작하여 어디까지 의 문자열을 가져올 것인지를 지정하는 것이다.


흔히 substring 이 쓰이지만, 간혹 헷갈리기 때문에, substr 함수를 쓰는것이 혼동되지 않고 유용하다.

물론, php 와 동일하게(익숙하게) 쓰려면, substring 을 쓰는것이 좋긴 하겠지만,

asp 의 left 함수나 right 함수와 똑같이 동작하는 substr 이 혼동되지 않고 좋은듯 하다.


[JavaScript] window 객체

posted-at2012.12.17 18:19 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

[window 객체]

 

window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.

창 열기, 창 닫기, 창 크기 조절 등 창을 제어하는 다양한 작업을 할 수 있다.


사용형식)

window.속성 : window.속성 = 값

window.메소드() : window.메소드(인자 값)


예)

window.status="환영합니다." //상태 표시줄에 문자 표시 

window.close()  // 창을 닫는다.

window.open()  // 새 창을 연다.


---------------- window 객체의 속성 -------------------

○ defaultStatus   - 브라우저 상태 표시줄에 표시할 문자열의 초기 값 설정

○ status   - 상태 표시줄에 표시할 문자열 지정

○ window   - 창 자신을 가리킴

○ frames   - 창에 포함된 프레임을 배열 형태로 지정

○ opener   - open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴

○ parent   - 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴

○ self   - 현재 작업 중인 창, 즉 자기자신을 가리킴

○ top   - 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음

○ classes   - 문서 안에 정의된 모든 스타일시트의 정보를 갖음

○ tags   - 문서 안에 정의된 모든 태그의 정보를 나타냄

○ screenX    - 창의 x 좌표 반환

○ screenY   - 창의 y 좌표 반환

○ closed   - 창이 닫혀 있는지 확인한 후 true, false 반환

○ name   - 창 이름 반환

○ length   - 창 안에 프레임 수 반환


------------- 넷스케이프 네비게이터 전용 -----------○

 innerHeight   - 브라우저 내용의 높이

○ innerWidth   - 브라우저 내용의 넓이

○ outerHeight   - 브라우저 전체 높이

○ outerWidth   - 브라우저 전체 넓이

○ pageXoffset   - 현재 나타나는 페이지의 x 좌표

○ pageYofset   - 현재 나타나는 페이지의 y 좌표

 

---------------- window 객체의 메소드 -------------------

※ 윈도우 객체에서 사용할수 있는 이벤트 핸들러로는 onBlur, onDragdrop, onError, onFocus, onLoad, onUnload 가 있다.     


----------------->사용자의 응답을 요구하는 대화상자를 생성하는 메소드<---------------------

○ alert("메시지")   - 경고 창 띄움

○ prompt("메시지","구문")   - 입력 창 띄움

○ confirm("메시지")   - 확인, 취소 창 띄움


-----------------> 창 생성과 제거 메소드 <---------------------

○ open("문서명","창이름","속성")   - 새 창을 염

○ close()   - 창을 닫음


----------------->브라우저 크기, 위치 설정 <---------------------

○ moveBy(x,y)   - 브라우저를 상대좌표로 지정한 픽셀만큼 이동

○ moveTo(x,y)   - 브라우저를 절대좌표로 지정한 위치로 이동

○ resizeBy(x,y)   - 브라우저의 크기를 상대적으로 지정한 픽셀만큼 설정

○ resizeTo(x,y)   - 브라우저의 크기를 절대 값으로 지정한 픽셀만큼 설정

○ scroll(x,y)   - 창이나 프레임 안의 내용을 스크롤함

○ scrollBy(x,y)   - 스크롤을 상대좌표로 이동

○ ScrollTo(x,y)   - 스크롤을 절대좌표로 이동


-----------------> 동작 시간 간격을 조절하는 메소드 <---------------------

○ setTimerout("명령문",시간간격)   - 일정한 시간 간격으로 명령문을 반복 실행 (시간 1/1000초 단위)

○ clearTimerout()   - SetTimerout() 으로 동작되는 타이머 해제


-----------------> 기타 <---------------------

○ print()   - 현재 문서 출력----------------->넷스케이프 네이게이터 전용<---------------------

○ back()   - 한단계 이전 URL로 이동

○ forward()   - 한단계 이후의 URL로 이동

○ home()   - 브라우저에세 home으로 지정된 URL으로 이동

○ stop()   - 브라우저의 stop 버튼처럼 불러오기 중지

○ find("문자열")   - 지정된 문자열이 있는지 검사(true,false 값)

----------------------------------------------------------------------


=== open() 메소드로 창열기 ===

open() 메소드는 새 창을 열어준다. 옵션을 다양하게 설정하여 다양한 모양의 새 창을 열 수 있다.

window.open() 메소드의 인자 값은 반드시 세 개를 포함해야 한다. 아무런 속성도 지정하지 않을경우에는

window.open("","","") 와 같이 입력한다.

형식) window.open("문서명","창이름","설정");

예) 다음 코드는 allim.html 문서를 좌표 50, 50 위치에 200*300 크기로 새 창을 연다. window.open("allim.html","popup","top=50 left=50 width=200 height=300")


---------- window.open() 메소드에 설정할 수 있는 창 옵션 --------------------

○ directories : yes/no   - 연결 등 디렉토리 메뉴 표시 여부

○ menubar : yes/no   - 메뉴 바 표시 여부

○ toolbar  : yes/no   - 툴 바 표시 여부

○ location : yes/no   - 주소 입력줄 표시 여부

○ resizable : yes/no   - 크기 재설정 버튼 표시 여부

○ status  : yes/no   - 상태 표시줄 표시 여부

○ scrollbars : yes/no   - 스크롤 바 표시 여부

○ copyhistory : yes/no   - 히스토리 정보를 저장할지 여부

○ channelmode   - 전체화면 모드

○ fullscreen   - 전체화면으로 표시

○ width  : pixel   - 창 넓이

○ height  : pixel   - 창 높이

○ left  : pixel   - 창의 좌측 좌표 값

○ top  : pixel   - 창의 위쪽 좌표 값

----------------------------------------------------------------------


[실습하기]

----------------------open 으로 창 열기 예제-----------------------------------

<html><head> <title>Test</title>

<s-ript language="javas-ript">

function openWin(){ window.open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");}

</script></head>

<body -nload="openWin()">

</body>

</html>

---------------------------------------------------------------------

 

----------------------close 으로 창 닫기 예제-----------------------------------

현지 활성화된 창을 닫을 때는 아래 세 가지 명령어 중 하나를 사용한다.

window.close()

self.close()

this.close()

만약 특정 창을 닫으려면 창을 열 때 해당 창에 객체명을 지정해야 한다.

1. 새 창을 열 때 창에 객체명 지정하기    윈도우 객체명 = window.open("문서명","창이름","옵션설정")    

2. 새 창으로 열린 창 닫기    윈도우 객체명.close()

---------------------------------------------------------------


[실습하기]

------------------- 객체명.close() 으로 창닫기 -----------------------

<html><head> <title>Test</title>

<s-ript language="javas-ript">

var win = null

function openWin(){ win = open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");}

function closeWin(){ win.close();

}

</script></head>

<body>

<img src=images/zoom.gif style="cursor:hand" onclick="openWin()">

<form name=info><input type=button name=bt value=창닫기 onclick="closeWin()"></form>

</body>

</html>

--------------------------------------------------


출처 : http://blog.naver.com/kimgudtjr/140097965840

[CSS] 인터넷 익스플로러 6,7,8에서 CSS3 사용하기 (PIE)

posted-at2012.10.07 06:00 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL



http://css3pie.com/

About PIE


&gt;&gt; 더보기 &lt;&lt;


 


[CSS] border-radius 생성기

posted-at2012.10.07 05:56 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

CSS3 의 강점들 중 하나인 border-radius !

http://border-radius.com/


↑ 수치만 입력하면 알아서 border-radius 의 웹표준 css 코드를 만들어 준다.

다만, 인터넷 익스플로러 (IE) 에서는 출력이 제대로 안되는 경우가 있으므로,

PIE 참조해서 사용해야 한다.


웹 프로그래밍 언어별 no-cache (페이지 만료) 방법

posted-at2012.10.07 05:17 :: posted-inProgramming/HTML/JavaScript/CSS :: posted-byNarrL

언어별 no-cache 리스트


더보기