-
안녕하세요, 여러분! 오늘은 웹 개발에서 색상을 다루는 방법에 대해 이야기해보겠습니다.
HTML과 CSS에서 색상 코드를 사용하는 것은 기본적이지만, 자바스크립트를 통해 색상을 동적으로 변경하거나 처리하는 방법을 배우면 웹 페이지를 더욱 매력적으로 만들 수 있습니다.
색상 코드란?
HTML에서 색상 코드는 두 가지 주요 형식으로 제공됩니다:
- Hexadecimal (Hex) 코드: #RRGGBB 형식으로, 예를 들어 #FF5733은 빨간색과 주황색이 섞인 색입니다.
- RGB 코드: rgb(R, G, B) 형식으로, 각 색상의 값은 0부터 255까지의 숫자로 표현됩니다. 예를 들어 rgb(255, 87, 51)은 동일한 색상을 나타냅니다.
자바스크립트로 색상 변경하기
자바스크립트를 사용하면 HTML 요소의 색상을 동적으로 변경할 수 있습니다.
아래의 예제를 통해 살펴보겠습니다.
예제: 버튼 클릭 시 배경색 변경하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>색상 변경 예제</title>
<style>
body {
transition: background-color 0.5s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="colorButton">색상 변경</button>
<script>
const button = document.getElementById('colorButton');
button.addEventListener('click', () => {
// 랜덤 색상 생성
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
document.body.style.backgroundColor = randomColor;
});
</script>
</body>
</html>- HTML 구조: 버튼 하나를 생성했습니다.
- CSS: 배경색 변화에 부드러운 전환 효과를 주기 위해 transition 속성을 사용했습니다.
- JavaScript: 버튼 클릭 시 Math.random()을 이용해 랜덤한 색상을 생성하고, 이를 배경색으로 적용합니다.
색상 팔레트 활용하기
자바스크립트로 특정 색상 팔레트를 활용하여 색상을 변경하는 방법도 있습니다.
예를 들어, 사전 정의된 색상 배열에서 무작위로 선택할 수 있습니다.
예제: 색상 팔레트에서 색상 선택하기
const colors = ['#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33A1'];
button.addEventListener('click', () => {
const randomIndex = Math.floor(Math.random() * colors.length);
document.body.style.backgroundColor = colors[randomIndex];
});이 코드는 미리 정의된 색상 배열에서 무작위로 색상을 선택하여 배경색으로 설정합니다.
오늘은 웹 개발에서 색상을 다루는 방법에 대해 알아보았습니다.
오늘도 즐거운 하루 되시길 바라겠습니다.
'프로그래밍 > Front-end' 카테고리의 다른 글
| 자바스크립트로 숫자만 입력받는 방법 (0) | 2024.11.21 |
|---|---|
| 자바스크립트로 입력값 검증하는 방법: 아이디, 비밀번호, 이메일 체크하기 (0) | 2024.11.14 |
| 제이쿼리를 이용한 필수 입력 체크 (0) | 2024.10.31 |
| JavaScript로 Map과 List 클래스 구현하기 (0) | 2024.10.30 |
| 자바스크립트 JSP 페이지 include 방법에 대하여! (0) | 2024.09.27 |
| 자바스크립트 EL태그와 JSTL태그의 정의와 사용법에 대하여! (0) | 2024.09.27 |
| 자바스크립트의 동기(synchronous)와 비동기(asynchronous) 처리에 대하여! (0) | 2024.09.27 |
| 자바스크립트 CORS(Corss Origin Resource Sharing)과 대처방안에 대하여! (0) | 2024.09.27 |
