'CSS&HTML5'에 해당되는 글 5건

색상표

CSS&HTML5 2012. 7. 31. 14:14

■ 2f4f4f darkslategray 다크슬레이트그레이
■ 708090 slategray 슬레이트그레이
■ 778899 lightslategray 라이트슬레이트그레이
■ 696969 dimgray 딤그레이
■ 808080 gray 그레이
■ a9a9a9 darkgray 다크그레이
■ c0c0c0 silver 실버
■ d3d3d3 lightgrey 라이트그레이
■ dcdcdc gainsboro 게인스보로
■ ffffff white 화이트
■ fff5ee seashell 씨쉘
■ fffafa snow 스노우
■ f8f8ff ghostwhite 고스트화이트
■ fffaf0 floralwhite 후로랄화이트
■ f5f5f5 whitesmoke 화이트스모크
■ f0f8ff aliceblue 앨리스블루
■ f0ffff azure 애쥬어
■ fdf5e6 oldlace 올드래이스
■ f5fffa mintcream 민트크림
■ ffefd5 papayawhip 파파야윕
■ ffdab9 peachpuff 피치퍼프
■ faf0e6 linen 린넨
■ eee8aa palegoldenrod 팔레골덴로드
■ ffe4e1 mistyrose 미스티로즈
■ ffe4b5 moccasin 모카신
■ ffdead navajowhite 나바조화이트

■ d2b48c tan 탄
■ f5deb3 wheat 위트
■ fafad2 lightgoldenrodyellow 라이트골덴로드옐로우
■ ffffe0 lightyellow 라이트옐로우
■ fff8dc cornsilk 콘실크
■ faebd7 antiquewhite 안티크화이트
■ f5f5dc beige 베이지
■ fffacd lemonchiffon 레몬치폰
■ fffff0 ivory 아이보리
■ f0e68c khaki 카키
■ e6e6fa lavender 라벤더
■ fff0f5 lavenderblush 라벤더블러시
■ ffe4c4 bisque 비스크
■ ffebcd blanchedalmond 블란체달몬드
■ deb887 burlywood 벌리우드
■ cd853f peru 페루
■ 00ced1 darkturquoise 다크터콰이즈
■ 00bfff deepskyblue 딥스카이블루
■ 7fffd4 aquamarine 아쿠아마린
■ 1e90ff dodgerblue 도저블루
■ 00ffff cyan 시안
■ f0fff0 honeydew 허니듀
■ 87cefa lightskyblue 라이트스카이블루
■ afeeee paleturquoise 팔레터콰이즈
■ e0ffff lightcyan 라이트시안
■ add8e6 lightblue 라이트블루
■ add8e6 lightsteelblue 라이트스틸블루
■ 40e0d0 turquoise 터콰이즈
■ 48d1cc mediumturquoise 미디엄터콰이즈
■ 00ffff aqua 아쿠아
■ 7b68ee mediumslateblue 미디움슬레이트블루
■ 191970 midnightblue 미드나이트블루
■ 6495ed cornflowerblue 콘플라워블루
■ 0000cd mediumblue 미디움블루
■ 6a5acd slateblue 슬레이트블루
■ 4682b4 steelblue 스틸블루
■ 0000ff blue 블루
■ 483d8b darkslateblue 다크슬레이트블루
■ 5f9ea0 cadetblue 카뎃블루
■ 87ceeb skyblue 스카이블루
■ 4169e1 royalblue 로열블루
■ b0e0e6 powderblue 파우더블루
■ 000080 navy 네이비
■ 00008b darkblue 다크블루
■ 8a2be2 blueviolet 블루바이올렛

■ ff6347 tomato 토마토
■ ff4500 orangered 오렌지레드
■ ff0000 red 레드
■ 800000 maroon 마룬
■ 8b0000 darkred 다크레드
■ b22222 firebrick 파이어브릭
■ d2691e chocolate 초콜렛
■ 8b4513 saddlebrown 새들브라운
■ a0522d sienna 시에나
■ bc8f8f rosybrown 로지브라운
■ ff7f50 coral 코랄
■ ff8c00 darkorange 다크오렌지
■ ffa500 orange 오렌지
■ b8860b darkgoldenrod 다크골덴로드
■ ffd700 gold 골드
■ ffff00 yellow 옐로우
■ 7fff00 chartreuse 차트리우스
■ 7cfc00 lawngreen 라운그린
■ 00ff00 lime 라임
■ 32cd32 limegreen 라임그린
■ 00ff7f springgreen 스프링그린
■ 3cb371 mediumseagreen 미디움씨그린
■ adff2f greenyellow 그린옐로우
■ 8fbc8f darkseagreen 다크씨그린
■ 0ee90 lightgreen 라이트그린
■ 8fb98 palegreen 팔레그린
■ 9acd32 yellowgreen 옐로우그린
■ 2e8b57 seagreen 씨그린
■ 00fa9a mediumspringgreen 미디움스프링그린
■ 20b2aa lightseagreen 라이트씨그린
■ 66cdaa mediumaquamarine 미디움아쿠아마린
■ 228b22 forestgreen 포레스트그린
■ 008b8b darkcyan 다크시안
■ 008080 teal 틸
■ 006400 darkgreen 다크그린
■ 556b2f darkolivegreen 다크올리브그린
■ 008000 green 그린
■ 808000 olive 올리브
■ 6b8e23 olivedrab 올리브드래브
■ bdb76b darkkhaki 다크카이
■ daa520 goldenrod 골덴로드

'CSS&HTML5' 카테고리의 다른 글

HTMl 특수기호 처리  (0) 2012.01.10
웹 표준 검증 사이트  (0) 2011.08.03
css 이미지 자르기  (0) 2011.07.29
HTML 5 유용한 링크  (0) 2011.07.29
블로그 이미지

스마트전

,

HTMl 특수기호 처리

CSS&HTML5 2012. 1. 10. 17:49


특수문자 의미
 
Space키(한칸 띄기) 한 번 누르기 역할을 한다.
<
< 를 출력한다.
&gt;
> 를 출력한다. (예) &lt;HTML&gt; 이면 화면에 <HTML> 를 출력한다.
&amp;
& 를 출력한다.
&quot;
" 를 출력한다.
&copy;
© 를 출력한다.
\
다음 글자가 일반적인 글자가 아니고 특수문자로 사용된다는 지정이다. 특수문자로 사용할 문자앞에 backslash(\)를 붙여준다. \w는 w가 특수문자로 사용됨을 나타낸다. \w의 의미는 모든 문자를 가리킨다.

또는 반대로 특수문자를 일반적인 문자로 지정하게 한다. \\는 backslash(\)문자를 나타낸다. \\\/는 slash(/) 문자를 나타낸다.

^
input이나 line의 시작문자. /^A/는 "Amatch"와는 맞지만 "an Amatch"와는 맞지 않는다.
$
input이나 line의 끝문자. /A$/는 "abA"와는 맞지만 "aAb"와는 맞지 않는다.
*
앞 문자가 0번 이상 있으면 맞다. 없어도 되고 여러개 있어도 된다. /ab*c/는 "abbbc"와 맞다. "ac"와도 맞다. 하지만, "ax"와는 맞지 않는다.
+
앞 문자가 1번 이상 있으면 맞다. 1개 이상 있어야 하고 여러개 있어도 된다. /ab+c/는 "abbbc"와 맞다. 하지만, "ac"와는 맞지 않는다.
?
앞 문자가 0번이나 1번은 있어야 맞다. /ab?c/는 "abc"와 맞고 "ac"와도 맞다. 하지만, "abbc"와는 맞지 않는다.
.
개행문자(\n)외에 모든 문자이면 맞다. /.c/는 "Xc", "1c"와 맞다. 하지만, "ca", "\\nc"와는 맞지 않는다. (\\n은 \n의 뜻이다. 특수문자로 사용되는 \를 문자로 표현하기 위해서 앞에 \를 붙여준다. )
(x)
문자 'x'를 검색하고 맞으면 'x'를 기억한다. /a(bc)/는 "abcd"에서 검색되고 "bc"를 기억한다. 이 기억된 것은 RegExp 객체의 $1에서 $9까지로 또는 배열 [1]에서 기억된 숫자 [n]개 까지로 호출될 수 있다.
x|y
'x'나 'y'가 있으면 맞다. /abc|xx/는 "abc ZZZ"나 "xx ZZZ"와 맞다.
{n}
앞 문자가 n개 있으면 맞다. n은 양수 정수이다. /X{2}/는 "abcXX"와 맞다. "abcXXX"와도 맞고 처음 2개의 "XX"가 검색된다.
{n,}
앞 문자가 최소한 n개 있으면 맞다. n은 양수 정수이다. /X{2,}/는 "abcXX"와 맞다. "abcXXX"와도 맞고 3개의 "XXX"가 검색된다.
{n,m}
앞 문자가 최소한 n번에서 m번까지 있다면 맞다. /a{1,3}/은 "ab", "aaab"와 맞다.
[xyz]
xyz 중에서 아무런 문자가 있어도 맞다. 이것은 [x-z]과 같은 지정이다.
[^xyz]
xyz 중에서 하나의 문자라도 없으면 맞다. 이것은 [^x-z]과 같은 지정이다.
[\b]
backspace
\b
공백같은 것으로 단어의 경계되는 부분에 있는 문자이다. /\bX/는 "Xxx"와 맞다. /X\b/는 "xxX"와 맞다.
\B
\b와 반대이다. 반어 경계에 있지 않은 문자만 맞다. /X\Bz/는 "XXz Xzz"에서 두번째의 "Xz"가 검색된다.
\cX
control-X 문자와 맞다. /\cM/은 control-M 문자이다.
\d
숫자는 맞다. [0-9]와 같은 지정이다. /\d/는 "hi5"에서 "5"를 검색한다.
\D
숫자가 아닌 것은 맞다. [^0-9]와 같은 지정이다. /\D/는 "hi5"에서 "h"를 검색한다.
\f
form-feed(\f) 문자와 맞다.
\n
linefeed(\n) 문자와 맞다.
\r
carriage return(\c) 문자와 맞다.
\s
space, tab, form feed, line feed를 가지고 있는 white space 문자와 맞다.[ \f\n\r\t\v]와 같은 지정이다. /\s\w*/는 "abc Xz"에서 "Xz"를 검색한다.
\S
white space 문자가 아닌 하나의 문자이다. [^ \f\n\r\t\v]와 같은 지정이다. /\S\w*/는 "abc Xz"에서 "abc"를 검색한다.
\t
tab 문자
\v
vertical tab 문자
\w
underscore(_)문자를 포함하는 알파벳과 숫자 0에서 9까지의 문자. [A-Za-z0-9_]와 같은 지정이다.
\W
\w의 반대이다. [^A-Za-z0-9_]와 같은 지정이다. /\W/는 "50%"에서 "%"를 검색한다.
\n
n은 양수 정수이다. ()로 묵은 것을 지정한다. \1은 RegExp.$1, \2는 RegExp.$2의 값을 사용한다. /ab(c)de\1/은 "abcdec"와 맞다.
\o숫자, \x숫자
escape문자로 ASCII codes 값을 넣을 수 있게한다. 8진, 16진 10진수를 넣을 수 있다.

1 / 2 / 3 / 4


T O P
 

'CSS&HTML5' 카테고리의 다른 글

색상표  (0) 2012.07.31
웹 표준 검증 사이트  (0) 2011.08.03
css 이미지 자르기  (0) 2011.07.29
HTML 5 유용한 링크  (0) 2011.07.29
블로그 이미지

스마트전

,

'CSS&HTML5' 카테고리의 다른 글

색상표  (0) 2012.07.31
HTMl 특수기호 처리  (0) 2012.01.10
css 이미지 자르기  (0) 2011.07.29
HTML 5 유용한 링크  (0) 2011.07.29
블로그 이미지

스마트전

,

css 이미지 자르기

CSS&HTML5 2011. 7. 29. 14:46

모바일웹 프로젝트 하면서 전국 날씨보기 페이지가 있었는데 그때 구현한 실제 css 내용입니다.

퍼포먼스와 관리를 위해서 이미지 한장을 로드한 후 css 로 잘라서 많이들 사용하는데요 css 조금 보실 수 있

으시분은 아래 소스만 보셔도 쉽게 아실듯..? 무책임한.....

사실 블로그가 남에게 알리는 용도 1% 제 소스 정리가 99% 목적이라 ㅎㅎㅎ

아래 처럼 자른 후 <span class='city10'></span> 이런식으로 사용합니다.

ul 이나 div 로 영역을 정한 후  class='weathersBox' 이렇게 하면 되겠죠

.weathersBox{ background:url(../../images/m_sbs/common/bg_line2.gif) repeat-x 0 bottom; padding-bottom:5px;}
.weathers{ position:relative; width:320px; margin:0 auto;}
.weathers p{ position:absolute; left:180px; top:40px;}
.weathers p strong{ display:block;color:#076b9d;}
.weathers p span{ display:block;}
.weathers .city{position:absolute; left:12px; top:12px;color:#076b9d; font-weight:bold;}

.weathersBox2{ background:url(../../images/m_sbs/common/bg_line2.gif) repeat-x 0 bottom; padding-bottom:5px;}
.maps{ position:relative; width:320px; margin:0 auto;}
.maps span{ display:block; width:40px; height:38px; background:url(../../images/m_sbs/weather/bg_box.gif) no-repeat 0 20px; text-align:center; padding:0 0 0 0; font-size:11px; color:#F00; height:65px; line-height:11px}
.maps strong{ color:#333;}
.maps span img{width:25px; height:20px; display:block; margin:0 auto; padding-top:13px;}
.maps .city1{ position:absolute; left:100px; top:20px;}
.maps .city2{ position:absolute; left:150px; top:10px;}
.maps .city3{ position:absolute; left:200px; top:20px;}
.maps .city4{ position:absolute; left:100px; top:90px;}
.maps .city5{ position:absolute; left:150px; top:80px;}
.maps .city6{ position:absolute; left:200px; top:90px;}
.maps .city7{ position:absolute; left:90px; top:170px;}
.maps .city8{ position:absolute; left:150px; top:140px;}
.maps .city9{ position:absolute; left:210px; top:180px;}
.maps .city10{ position:absolute; left:50px; top:60px;}
.maps .city11{ position:absolute; left:250px; top:20px;}
.maps .city12{ position:absolute; left:30px; top:160px;}

'CSS&HTML5' 카테고리의 다른 글

색상표  (0) 2012.07.31
HTMl 특수기호 처리  (0) 2012.01.10
웹 표준 검증 사이트  (0) 2011.08.03
HTML 5 유용한 링크  (0) 2011.07.29
블로그 이미지

스마트전

,

HTML 5 유용한 링크

CSS&HTML5 2011. 7. 29. 14:40

'CSS&HTML5' 카테고리의 다른 글

색상표  (0) 2012.07.31
HTMl 특수기호 처리  (0) 2012.01.10
웹 표준 검증 사이트  (0) 2011.08.03
css 이미지 자르기  (0) 2011.07.29
블로그 이미지

스마트전

,