[꿀팁]웹 색상 코드(안전 컬러) 머릿속으로 생각해 내기

수성컴|프로그래밍/웹개발(HTML, CSS, JS 등)|2016. 11. 5. 15:56

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

먼저 웹 색상 코드가 무엇일까요? 웹 안전 컬러, 웹 표준 색상, 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 입니다.

 

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

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





 

댓글()