페이지 목차
이번에는 웹 문서에서 사용하는 색상(color)과 길이 단위(length unit)에 대해서 알아 보겠습니다.
1. color의 사용
色... 색을 쓴다... 우리가 웹 문서를 디자인할 때 고려해야할 문제 중에 하나가 색을 어떻게 쓰느냐 하는 문제죠. 색을 잘 쓰느냐 못 쓰는냐!... 색을 잘 쓰면 페이지가 보기좋고 내용도 한 눈에 잘 들어오지만, 색을 잘 못 쓰면 오히려 안 쓰느니만 못한 결과를 가져오게 되져. 예를 들어, 흰색 바탕에 하늘색 글씨를 쓴다든지 하면 보는 사람이 멀미 납니다. 색은 웹 디자인에서 매우 중요한 요소지요.
제 경험으로는 배경색과 글씨색, 그리고 강조나 구분을 위한 색을 포함해서 전반적으로 3~5 가지 정도의 색을 사용하는게 무난한 것 같습니다. 원색은 넓은 면적으로 사용하지 않는게 좋죠. 원색을 넓게쓰면 천박스러워 보인답니다...^^ 원색은 작은 면적으로 포인트를 줄 때 사용하면 눈에 잘 띄고 산뜻한 느낌을 주게 되죠. 근데 당신은 말은 그렇게 잘 하면서 왜 이 싸이트의 color scheme을 이 따위로 했냐구요? 그건 제가 워낙 디자인 감각이 음써서 그렇습니다. 그럼 그림은?... 그건 아예 못한다고 해도 무방할 정도구요...T.T 아마 모르긴 해도 이 사이트에서 그림 볼일은 거의 없을 겁니다...^^
| 웹 문서에서 color를 표현하는 방법 | |||||||||
| R G B code | 알다시피 웹에서 사용하는 색상은 Screen이라는 Media를 통해서 우리 눈에 보이게 되어있습니다. 그렇기 때문에 당연한 얘기지만 빛의 3원색을 합성해서 표현합니다. 즉, RGB(Red Green Blue) code를 사용합니다. 컴퓨터 모니터를 통해서 낼 수 있는 색상은 16,777,216 가지라고 합니다. 이 숫자는 (8bit Red) × (8bit Green) × (8bit Blue) = (256 Red) × (256 Green) × (256 Blue) = 16,777,216 입니다. 여기서 256 이라는 숫자는 28 즉 2를 8번 곱해서 나온 숫자죠. 컴퓨터에서는 2진수를 사용한다는 사실 들어보셨져... 그러니까 2진수(BInary) 여덟자리(digiT)인 8BIT 로 표현할 수 있는 경우의 수인 256개를 의미합니다. 컴퓨터는 항상 0에서 숫자를 시작하니까 256개의 경우의 수는 숫자 0~255가 되겠군요. | ||||||||
| Web Safe Color |
|
||||||||
| 색상 값 만드는 방법 | |||||||||
| rgb Hex 3 #rgb |
|
||||||||
| rgb Hex 6 #rrggbb |
|
||||||||
| rgb(256,256,256) |
|
||||||||
| rgb(r%,g%,b%) |
|
||||||||
| named color | 이 방식은 red, green, blue 등 우리가 명사 형태로 부르는 색상 이름을 그대로 사용하는 방식입니다. 아래의 named color 보기를 참조하세요. named color table에 적힌 색상 이름을 rgb code 대신에 그대로 적어주면 됩니다. 사실 rgb hexa code 값에 익숙하지 않은 초보자들은 색상 이름이 기억하기 쉬운 편이죠. 단 한가지 주의할 점은... 특히 영어 좀 되시는 분들... 표에 적힌 named color가 띄어쓰기 안됐다고 비웃으면서 띄어쓰기하면 전혀 예상할 수 없는 색으로 나오니까 그러지 마시져... 예를 들어 darkorange를 dark orange로 띄어쓰기하면 안된다는 말입니다. 다른 값도 마찬가지지만 named color도 중간에 공백(space)을 허용하지 않습니다. 전혀 예상치 못한 엉뚱한 color가 나옵니다. | ||||||||
| color blending |
색상 만드는 방법을 위의 rgb Hex 3자리 방식으로 설명하겠습니다.
|
||||||||
named color 보기
감추기
| aliceblue (#F0F8FF) |
antiquewhite (#FAEBD7) |
aqua (#00FFFF) |
aquamarine (#7FFFD4) |
| azure (#F0FFFF) |
beige (#F5F5DC) |
bisque (#FFE4C4) |
black (#000000) |
| blanchedalmond (#FFEBCD) |
blue (#0000FF) |
blueviolet (#8A2BE2) |
brown (#A52A2A) |
| burlywood (#DEB887) |
cadetblue (#5F9EA0) |
chartreuse (#7FFF00) |
chocolate (#D2691E) |
| coral (#FF7F50) |
cornflowerblue (#6495ED) |
cornsilk (#FFF8DC) |
crimson (#DC143C) |
| cyan (#00FFFF) |
darkblue (#00008B) |
darkcyan (#008B8B) |
darkgoldenrod (#B8860B) |
| darkgray (#A9A9A9) |
darkgreen (#006400) |
darkkhaki (#BDB76B) |
darkmagenta (#8B008B) |
| darkolivegreen (#556B2F) |
darkorange (#FF8C00) |
darkorchid (#9932CC) |
darkred (#8B0000) |
| darksalmon (#E9967A) |
darkseagreen (#8FBC8B) |
darkslateblue (#483D8B) |
darkslategray (#2F4F4F) |
| darkturquoise (#00CED1) |
darkviolet (#9400D3) |
deeppink (#FF1493) |
deepskyblue (#00BFFF) |
| dimgray (#696969) |
dodgerblue (#1E90FF) |
firebrick (#B22222) |
floralwhite (#FFFAF0) |
| forestgreen (#228B22) |
fuchsia (#FF00FF) |
gainsboro (#DCDCDC) |
ghostwhite (#F8F8FF) |
| gold (#FFD700) |
goldenrod (#DAA520) |
gray (#808080) |
green (#008000) |
| greenyellow (#ADFF2F) |
honeydew (#F0FFF0) |
hotpink (#FF69B4) |
indianred (#CD5C5C) |
| indigo (#4B0082) |
ivory (#FFFFF0) |
khaki (#F0E68C) |
lavender (#E6E6FA) |
| lavenderblush (#FFF0F5) |
lawngreen (#7CFC00) |
lemonchiffon (#FFFACD) |
lightblue (#ADD8E6) |
| lightcoral (#F08080) |
lightcyan (#E0FFFF) |
lightgoldenrodyellow (#FAFAD2) |
lightgreen (#90EE90) |
| lightgrey (#D3D3D3) |
lightpink (#FFB6C1) |
lightsalmon (#FFA07A) |
lightseagreen (#20B2AA) |
| lightskyblue (#87CEFA) |
lightslategray (#778899) |
lightsteelblue (#B0C4DE) |
lightyellow (#FFFFE0) |
| lime (#00FF00) |
limegreen (#32CD32) |
linen (#FAF0E6) |
magenta (#FF00FF) |
| maroon (#800000) |
mediumaquamarine (#66CDAA) |
mediumblue (#0000CD) |
mediumorchid (#BA55D3) |
| mediumpurple (#9370DB) |
mediumseagreen (#3CB371) |
mediumslateblue (#7B68EE) |
mediumspringgreen (#00FA9A) |
| mediumturquoise (#48D1CC) |
mediumvioletred (#C71585) |
midnightblue (#191970) |
mintcream (#F5FFFA) |
| mistyrose (#FFE4E1) |
moccasin (#FFE4B5) |
navajowhite (#FFDEAD) |
navy (#000080) |
| oldlace (#FDF5E6) |
olive (#808000) |
olivedrab (#6B8E23) |
orange (#FFA500) |
| orangered (#FF4500) |
orchid (#DA70D6) |
palegoldenrod (#EEE8AA) |
palegreen (#98FB98) |
| paleturquoise (#AFEEEE) |
palevioletred (#DB7093) |
papayawhip (#FFEFD5) |
peachpuff (#FFDAB9) |
| peru (#CD853F) |
pink (#FFC0CB) |
plum (#DDA0DD) |
powderblue (#B0E0E6) |
| purple (#800080) |
red (#FF0000) |
rosybrown (#BC8F8F) |
royalblue (#4169E1) |
| saddlebrown (#8B4513) |
salmon (#FA8072) |
sandybrown (#F4A460) |
seagreen (#2E8B57) |
| seashell (#FFF5EE) |
sienna (#A0522D) |
silver (#C0C0C0) |
skyblue (#87CEEB) |
| slateblue (#6A5ACD) |
slategray (#708090) |
snow (#FFFAFA) |
springgreen (#00FF7F) |
| steelblue (#4682B4) |
tan (#D2B48C) |
teal (#008080) |
thistle (#D8BFD8) |
| tomato (#FF6347) |
turquoise (#40E0D0) |
violet (#EE82EE) |
wheat (#F5DEB3) |
| white (#FFFFFF) |
whitesmoke (#F5F5F5) |
yellow (#FFFF00) |
yellowgreen (#9ACD32) |
배경색을 바꿔서 넓은 면적으로 보면 작은 면적으로 볼 때하고 느낌이 전혀 다를 수 있기 때문에 이 표를 준비했습니다. 근데 어째 배경색을 바꾸니까 배경그림으로 지정한 변변치 않은 사이트 로고가 더욱 더 초라해 보이는 군요. 얼른 감추기 단추를 눌러 주세요...
감추기
2. 길이 단위(length unit)의 사용
| 절대 길이 단위(Absolute length units) | |
| in | Inches (1 inch = 2.54 centimeters). |
| cm | Centimeters. |
| mm | Millimeters. |
| pt | Points (1 point = 1/72 inches : 1인치를 72등분한 단위). |
| pc | Picas (1 pica = 12 points). |
3. HTML attribute에서 사용하는 길이 단위
HTML attribute에서는 pixel(px)과 percentage(%)를 사용합니다. 다른 단위는 뒤에 나올 CSS(Cascading Style Sheet)에서 사용합니다. percentage(백분율)를 사용할 때는 '%'를 숫자 뒤에 붙여주면 되고, pixel(px) 를 사용할 때는 그냥 숫자만 써주면 됩니다. px를 붙히면 안됩니다. 실행은 되지만 엉뚱한 크기가 나오게 됩니다.
이 문서의 저작권은 www.cadvance.org 에 있습니다.
| Top |
| Back |
| New |
| 검색 |