'인터넷 관련 글/HTML과 CSS'에 해당되는 글 1건

안녕하십니까? 수성비입니다. 오늘은 이론 강좌로 돌아왔습니다. 원래 수성비 전자방이 컴퓨터 강좌를 올리기 위한 목적으로 개설되었는데 앱 소개 글이 좀 많죠.. 오늘 소개할 이론은 웹 색상 코드 머릿속으로 생각해 내는 꿀팁입니다.(포토샵, 네이버 등의 도움을 받지 않을 겁니다.)

먼저 웹 색상 코드가 무엇일까요? 웹 안전 컬러, 웹 표준 색상, HTML 색상 등 다양한 단어로 불리는 이것은 웹(HTML)을 제작할 때 쓰이는 코드입니다.

[예시1)포토샵]

포토샵 써 보신 분은 위 사진에 제가 표시한 것처럼 '#00baff' 같은 것을 보신 적이 있을 겁니다. 이것이 바로 웹 색상 코드입니다. 그냥 옆에 색깔을 마우스로 클릭하면 되지 굳이 왜 이 복잡한 웹 색상 코드를 쓰느냐 하면 (순수한) 파란색 같은 것들은 마우스로 선택이 힘들 수 있습니다. 그럴 때 웹 색상 코드를 쓰시면 손쉽게 빛의 삼원색 중 파란색을 정확하게 선택하실 수 있습니다.(물론 포토샵은 웹 색상코드 위의 RGB 숫자를 입력하셔도 됩니다.)

[예시2)티스토리 글 쓰기]

위 사진은 티스토리 글 쓸 때 색깔 선택하는 창입니다. 여기서도 웹 색상 코드를 보실 수 있습니다. 여기서는 RGB 숫자를 입력하는 칸이 없기 때문에 키보드로 정확한 색깔을 선택하기 위해 웹 색상 코드를 입력하셔야 합니다.

 

[본론! 웹 색상 코드를 이해합니다.]

그런데 웹 색상 코드(예를 들면 '#00baff')는 그냥 보면 어려워 보입니다. 세상에 색은 많고 그에 따른 웹 색상 코드도 많을텐데 어떻게 그 많은 웹 색상 코드를 암기할까요? 웹 색상 코드를 이해하면 쉽습니다.

 

위 사진을 봅시다. 웹 색상 코드를 분리해 놓았습니다. #, 빨강, 초록, 파랑으로 나뉘어 있는데, 먼저 보통 웹 색상 코드를 쓸 때 #을 씁니다.

그 다음 빨강, 초록, 파랑은 빛의 삼원색입니다(색의 삼원색과 다르니 주의! 중2 과학 시간에 빛에 대해서 배우는 것으로 알고 있습니다.)

빛의 혼합에 대해 잘 모르신다면 여기를 클릭하세요.

 

웹 색상 코드에서 빨강, 초록, 파랑의 값을 숫자로 입력하시면 되는데요. 문제는 16진수로 입력하셔야 된다는 점입니다. 우리가 흔히 쓰는 10진수와 다릅니다. 그래도 조금만 알아두면 기본적인 색상들은 만들어낼 수 있는데 아래 설명을 보겠습니다.

최소:00

최대:ff

최소는 '00', 최대는 'ff'라는 것을 알아 두신다면 쉽게 이용하실 수 있습니다.

예를 들어 빨강은 R만 있으면 되므로 #ff0000 입니다. 파랑은 B만 있으면 되므로 #0000ff 입니다.

노랑은 R+G이므로 #ffff00 입니다. 백색광은 R, G, B 모두 필요하므로 #ffffff 입니다.

검정은 빛을 완전히 끄면 어두워지죠? #000000 입니다.

 

도움이 되길 바라며 오늘 강좌 마치겠습니다.

오류, 오타, 질문 있다면 댓글 남겨주세요. 다음에 만나요!





 

블로그 이미지

수성비

컴퓨터 관련 누리사랑방인 수성비 전자방입니다. 가끔씩 기독교, 전철 관련 정보도 올라옵니다. 수성비 전자방 카카오그룹: http://group.kakao.com/soosungbi

댓글을 달아 주세요