html color 속성 이용하여 색 입력하기
네 안녕하세요, 이번 포스팅에서는 html을 이용하여 색을 입력하는 방법을 알아보도록 하겠습니다.
사실 색깔은 보통 css를 이용하여 뽑아내곤 하지만,
html로도 뽑을 수 있습니다.
그래서 이번 포스팅에서는 html에서는 어떻게 색을 뽑아내는지 한 번 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. html에서의 색 표현
html과 css에서의 색은 빛의 3원 색인 RGB, 다시 말해 빨강, 초록, 파랑을 적절한 비율로 섞어서 표현을 합니다.
그래서 각각의 색깔은 코드가 존재를 하는데,
코드는 #으로 시작하는 영어와 숫자가 섞인 6자리의 코드로 입력이 되며,
다른 말로 '16진수 코드'라고 불립니다.
물론, 직접 색깔의 이름을 쓸 수도 있지만,
이건 어디까지나 색깔의 이름이 html과 css에 입력이 되어서 제공이 된다는 전제 하에 가능한 것이므로,
코드를 쓰는 것이 바람직합니다.
2. 색 입력 폼 요소 : input type = "color"
과거 html에서는 모양을 꾸미는 속성 중 하나인 bgcolor, 또는 font color ="색 이름"을 써서 나타내곤 했습니다.
하지만 현재 사용하고 있는 html 버전인 html5는 색을 꾸미는 것과 그 외 모양을 꾸미고 디자인하는 것은
모두 css를 이용하여 하도록 하고 있습니다.
그리고 html 태그에서는 컬러 다이얼로그를 사용하여 색을 입력을 받는 태그를 제공을 하고,
여기에서 색깔을 지정을 하기 위해서 value값에 색의 코드를 넣습니다.
이런 식으로 컬러를 입력하곤 합니다.
<input type="color" value="#00FF00">
이런 식으로 <input> 태그를 입력을 하여 입력을 할 속성을 type에 넣고, 그 value값을 컬러 코드로 지정하여 입력하면 됩니다.
어때요, 참 쉽죠?
그러면 간단한 예제를 통하여 한 번 같이 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>색 입력</title>
</head>
<body>
<h3>컬러다이얼로그로 색 입력</h3>
<hr>
<form>
색 선텍 <input type="color" value="#00BFFF"
onchange="document.body.style.color=this.value">
</form>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
여기서 value값은 제일 초기값인 #00BFFF로 시작을 합니다.
이 코드의 색은 하늘색입니다.
이 색이 제일 시작이 되는 색이라서 보통 초기값으로 둡니다.
그리고 여기서 보시면 onchange라는 속성이 보이실 텐데,
이건 나중에 제가 포스팅을 할 자바스크립트에서 다루는 속성입니다.
변화가 일어날 때 대응되는 것을 담는 속성입니다.
아직은 자세하게 알아두실 필요는 없고,
다음에 자바스크립트에 대하여 자세히 다룰 때 제가 제대로 설명을 드리도록 하겠습니다.
이렇게 작성한 예제의 결과 화면은 이렇게 나옵니다.
요렇게 색을 선택할 수 있는 칸이 하나 뜹니다.
그래서 여기에 마우스를 올리고 색이 표시된 칸을 클릭을 하면 이렇게 나옵니다.
이렇게 컬러 다이얼로그가 뜨게 됩니다.
여기에서 색깔, 색의 채도와 명도도 설정이 가능합니다.
이런 식으로 컴퓨터가 표현할 수 있는 모든 색깔을 뽑아낼 수 있습니다.
이런 걸 나중에 AI 퍼스널 컬러 모델을 만들 때 사용하면 좋지 않을까.. 라며 개인적으로 생각을 해봅니다.
여기까지 html로 색을 입력하는 방법에 대하여 알아보았는데요,
다음 포스팅에서는 html로 시간 정보를 입력하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자님들께 진심으로 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 (0) | 2023.03.07 |
|---|---|
| html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기 (0) | 2023.03.07 |
| html label 태그로 폼 요소의 캡션 만들기 (0) | 2023.03.06 |
| html 폼 만들기 7 - select, option 태그로 콤보박스 만들기 (0) | 2023.03.04 |
| html 폼 만들기 6 - 라디오 버튼 만들기 (0) | 2023.03.04 |
댓글