[메모강좌]6. 태그를 배웁시다.

[메모강좌] 6장 태그 연습장을 띄우세요. 먼저 6장 강의에 앞서 지금까지 강좌중에 몇가지 지나친 것이 있어 보충하고 넘어 가기로 하겠습니다. 빼먹고 넘어간 점은 정중히 사과 합니다. 저에게 돌맹이를 던져주세요. 바위돌로요. 문자의 크기 조절하는 태그명령어중 <H> </H>태그가 있습니다.사용법은 특정부분의 글씨크기를 변경할때 유용한 태그로 1~6까지 숫자를 넣어 사용합니다. 예)<H2> 2크기로 보여주기 </H2> <H6> 6크기의 글씨 </H6> 주의)태그를 닫을때 닫는 태그 /H뒤의 숫자도 앞에 여는 태그의 숫자와 같이써주어야 합니다. 이번 시간은 약속한데로 색에 대해 알아보기로 합시다. 그러기 위해서 우리가 사용하는 색상체계에 대해 알아보고 넘어가겠습니다. 여러분들도 아시다시피 우리가 웹상에서 쓰고 있는 색은 빛의 3원색인 RGB(red-빨강, green-녹색, blue-파랑)를 이용한 방식입니다. 또 혹시 듣었을지도 모를 프린트 잉크에 쓰이는 방식인 CMYK(Cyan-사이안, Magneta-마젠타,Yellow-옐로우, black-블랙)가 있습니다. RGB를 가색혼합 이라고 하며 CMYK를 감색혼합이라고 합니다. 가, 감, 승, 제 아시죠? 더하고 빼고 곱하고 나누고 그때 쓰이는 가색 감색을 의미 합니다. 굳이 이것까지 알필요야 있겠습니까 만은 알면 좋지요.^^ 우리 회원님들의 집에서 이쁜 그림이 있어 프린터 했었는데 색이 모니터상에 나와 있는데로 안나와서 이상하다고 생각한적 없으신가요? 그것이 바로 잉크젯 프린터가 인쇄시 바로 CMYK색을 이용해서 프린터되기 때문입니다. 그리고 혹시 포토샵이나 일러스터 등 하시는 분이나 웹디자인 계통에서 일하시는 분들은 아마 다들 알고 있으실 것입니다. 어때요 어렵지요? ㅎㅎㅎㅎ 월래 공부가 어려운 것입니다. 여기서는 CMYK색은 공부하지 않겠습니다. 왜냐하면 여러분의 머리가 폭발할지도 모르기 때문에 강사의 최대한 배려에 의하여 안배우고 넘어가겠습니다.(절대 제가 모르는 것이 아니라서 넘어가는 것은 아님을 밝혀드립니다.(위기모면의 순간) 이제 우리가 쓰고 있는 RGB 칼라에 대하여 잠시 알고 넘어가 볼까요? 우리가 RGB칼라를 이용하는 것들은 어느것들이 있을까요? 모니터, TV등 빛을 통과시키는 방식을 이용한 영사기, 무대의 색상조명, 스테인드 글라스등 그런것들이 있습니다. 이해가 되지요.^^ 이 RGB 칼라 Red, Green, Blue 세 가지 색은 각각 256단계(0~255)를 가지고 있기 때문에 RGB 칼라모드로 표현할수 있는 색상수는 256*256*256인1,600만(16,777,216) 칼라에 이릅니다. 켁~~~엄청나지요? 과연 인간이 구별해 낼수 있는 색은 몇가지나 될까요. 오늘 집에서 날새가며 세어보세요.^^ㆀ 여기서 잠깐 쉬면서 공부하나 하고 넘어가죠.(고개만 끄덕이고 넘어가시기 바랍니다.) ◎기초상식 영어공부◎(ㅡ.ㅡ; 머냐 갑자기 영어공부라니 강사 너 일롸! 듀거써) 영어에서 수를 나타내는 전문영어이자 기초영어 입니다. 1, 2, 3,....은 ONE(원) TWO(투) THREE(쓰리) .... 이것이면 얼마나 좋을까요.^^ 전문적으로 많이 쓰는 표현방식이 있는데 알게 모르게 많이 들었던 것이 있습니다. MONO(모노) - 1을 나타내는 접두어(모노드라마 모노레일 스테레오반대인 모노 등등) BI(바이) - 2을 나타내는 접두어(바이시클-자전거, 바이너리시스템-2진법 등등) TRY(트라이) - 3을 나타내죠(트라이앵글, 속옷트라이,등등) TETRA(테트라) - 4을 나타냅니다(테트리스,...) PENTA(펜타) - 5을 ...(펜타곤-미국방성, 펜트하우스,등등) HEXA(헥사) - 6을.... . . . DECA(데카) - 10을 나타냅니다.(데카메론, 데시멀포인트-소수점등등) 여기까지......ㅎㅎㅎ 유익한 공부였지요. 잠시 영어 공부를 한것은 RGB칼라를 사용하기 위해서 16진수 코드값으로 변환시킨 것 HEX(Hexadecimal- 16진수)이 사용되기 때문입니다. 이해를 조금이나마 더해주기 위해서 였으니 너무 화내지 마세요. 이제 본격적으로 여러분이 기다리셨던 색을 외우서 사용하기 입니다.(카페 공지사항 9번 게시물 퍼온 것임) 예제1) 밑에 내용을 복사하셔서 태그연습장으로 살펴보세요. 000000 black 검정 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 밝은파랑 b0c4de 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 파란제비꽃색 8b008b darkmagenta 어두운짙은분홍색 9932cc darkorchid 어두운연보라색 9400d3 darkviolet 어두운제비꽃색 ff00ff magenta 짙은분홍색 ff00ff fuchsia 붉은빛깔이나는자줏빛 c71585 mediumvioletred 중제비꽃빨강 ba55d3 mediumorchid 중간의연보라색 9370db mediumpurple 중간의자줏빛 dc143c crimson 짙게붉은색깔 ff1493 deeppink 짙은연분홍색 ffb6c1 lightpink 밝은연분홍색 ff69b4 hotpink 강렬한연분홍색 ffc0cb pink 연분홍색 dda0dd plum 짙은 보라색 800080 purple 자줏빛 ee82ee violet 제비꽃색 d8bfd8 thistle 엉겅퀴 da70d6 orchid 연보라색 4b0082 indigo 남색 a52a2a brown 갈색 e9967a darksalmon 어두운주황색 f08080 lightcoral 밝은산호빛 cd5c5c indianred 인디언빨강 ffa07a lightsalmon 밝은주황색 db7093 palevioletred 옅은제비꽃빨강 f4a460 sandybrown 엷은갈색 fa8072 salmon 주황색 ff6347 tomato 토마토색 ff4500 ornagered 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 어두운바다녹색 90ee90 lightgreen 밝은녹색 98fb98 palegreen 옅은녹색 9acd32 yello: wgree: n 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 국화과의다년초 예제1)에 나온 것들의 칼라를 다 외우신 걸로 알고 이만 마침니다.ㅎㅎㅎㅎㅎ 잘 사용하세요. ............윽 ~ 악 ~ 퍽 퍼벅~ 켁~ 강사 죽는당! ㅡ.ㅡ; 아아 알겠습니다. 그럼 힌트를 드리죠. daa520 goldenrod 국화과의다년초 위에 것중에 color=goldenrod(골덴라드)이게 칼라군요. 뒤에 나온 daa520 이 여섯자리 영어와 숫자의 조합은????? 예제1의 다음에 나오는 곳을 유심히 관찰해 보세요. 하나같이 알파벳또는숫자로 총 6개로 이루어져 있습니다. 이것이 오늘 기다리던 RGB HEX코드값입니다. 아주 자유롭고 쉽게 사용할수 있게 만들어 드리지요. 우선 앞에서 우리는 16진수로 표시 한다고 했는데 ....어떤식으로???? 이해 잘하세요.★★★★★중요합니다.★★★★★ 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15 이렇게 16가지 진수로 사용하다보면 혼돈이 될까봐 0,1,2,3,4,5,6,7,8,9(여기까지 10개),A,B,C,D,E,F(알파벳6개) 이렇게 16진수를 사용합니다. 이렇게 만들어진 16진수를 이용해서 RGB의 256단계 칼라는 대응되는 16진수 코드값으로 변환해서 색을 표현하는 것입니다. 다시말해서 RGB의 R(빨강)의 16진수값 * G(녹색)의 16진수값 * B(파랑)의 16진수값 ---> 000000 ~ FFFFFF 이렇게 표현하는 것이지요. 이해가 안가나요? 그러니까 6자리중 앞에 두자리는R값이고 중간 두자리는G값 끝에 두자리는 B값이 되는 것이지요. 0으로 갈수록 색의 빛이 약해지고 f로 갈수록 색의 빛이 강해 색이 잘 나타나는 것입니다. 그럼 내가 빨강색만으로 글씨를 쓰려고 할때 코드값을 직접 넣어서 보여드리겠습니다. 코드값은 RGB순서이니까 FF0000 이 빨강색 코드 값입니다. R의 진수값 최고인 FF로 나머지 G,B값은 각각 제일 약한 00으로 넣은 것입니다. 그럼 순수한 녹색만으로 표현하고 싶을땐 R(00)G(FF)B(00)인 00FF00 이 되겠지요. 청색으로 글을 쓸때는 어떻게??? 바로 0000FF 그럼 노란색으로 표현하고 싶을때는 난처하나요? 빨강 녹색 파랑의 세가지 색으로 노란색을 만들려면 빨강하고 녹색을 섞으면 노란색이 되지요. 그럼 R의 색을 넣고 G의 색을 넣고 B의 색은 안넣으면 되겠네요. 그렇다면 헥사값은 FFFF00 이렇게 나오게 되겠지요. 이제좀 이해가 가시나요? 그렇다면 검정색은? 빛이 약하면 검정색이 되지요? 그렇다면 000000값이 검정색입니다. 하얀색은 새가지색이 다 밝으면 하얀색이 되겠지요? 그렇다면 FFFFFF값이 되겠습니다. 그러니까 결론 적으로 말하면 HEX색상값은 0에서9까지 수와 A에서 F까지 합한 16가지의 수와 알파벳으로 조합하여 만드는 것입니다. 정식으로는 HEX값 앞에 #을 넣어서 #22CC88 이렇게 쓰는데 #은 빼고 써도 무난합니다. 이렇듯 핵사값만 알고 있으면 굳이 영어로 이렇게 색의 이름을 직접 쓰시지 않고도 마음껏 색상을 표현할수 있다는 것이지요. 지금 배우신 HEX값이 이해가 안되시는 분은 꼭 다시 질문주시고 넘어가시기 바랍니다. 이해가 안되서 창피하다고 그냥 넘어가시면 다시 기회가 오지 않을수 있습니다. 이해가 되시는 분은 앞으로 색에 관한한 걱정없이 표현하실수 있을 것입니다. 제가 쉽게 표현한다고 나름데로 글을 썼는데 정말 이해가 쉽게 되었으면 하네요. 이상으로 색상을 이용하는 방법을 알려드렸습니다. 다음 강의에서 뵙겠습니다. 감사합니다. <p.s>이거 쓰고 정리하느라 힘들었습니다. ㅜ.ㅠ