반응형
웹 페이지의 배경색을 동적으로 변경하는 것은 사용자 경험을 향상시키는 데 유용합니다. 자바스크립트를 사용하여 배경색을 변경하는 다양한 방법을 소개합니다.
1. 웹 페이지 전체 배경색 변경하기
웹 페이지 전체의 배경색을 변경하려면 document.body.style.backgroundColor 속성을 사용합니다.
<!DOCTYPE html>
<html>
<head>
<title>배경색 변경 예제</title>
</head>
<body>
<button onclick="changeBackgroundColor()">배경색 변경</button>
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor = 'lightblue';
}
</script>
</body>
</html>위 예제에서 버튼을 클릭하면 페이지의 배경색이 lightblue로 변경됩니다.
JS 응용 | 배경색상 변경하기
배경 색상을 단색, 그라데이션으로 변경해본다.
velog.io
2. 특정 HTML 요소의 배경색 변경하기
특정 요소의 배경색을 변경하려면 해당 요소를 선택한 후 style.backgroundColor 속성을 설정합니다.
<!DOCTYPE html>
<html>
<head>
<title>특정 요소 배경색 변경 예제</title>
</head>
<body>
<div id="myDiv" style="width: 100px; height: 100px; border: 1px solid black;">
클릭하여 배경색 변경
</div>
<script>
const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
myDiv.style.backgroundColor = 'lightgreen';
});
</script>
</body>
</html>위 예제에서 myDiv 요소를 클릭하면 해당 요소의 배경색이 lightgreen으로 변경됩니다.
3. 사용자 입력을 통한 배경색 변경하기
사용자가 색상을 선택하여 배경색을 변경할 수 있도록 하려면 <input type="color"> 요소를 활용합니다.
<!DOCTYPE html>
<html>
<head>
<title>사용자 색상 선택 배경색 변경 예제</title>
</head>
<body>
<input type="color" id="colorPicker">
<button onclick="changeBackgroundColor()">배경색 변경</button>
<script>
function changeBackgroundColor() {
const color = document.getElementById('colorPicker').value;
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>위 예제에서 사용자가 색상을 선택하고 버튼을 클릭하면 페이지의 배경색이 선택한 색상으로 변경됩니다.
4. 랜덤 색상으로 배경색 변경하기
배경색을 랜덤하게 변경하려면 랜덤 색상 코드를 생성하여 적용합니다.
<!DOCTYPE html>
<html>
<head>
<title>랜덤 배경색 변경 예제</title>
</head>
<body>
<button onclick="changeBackgroundColor()">랜덤 배경색 변경</button>
<script>
function changeBackgroundColor() {
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
document.body.style.backgroundColor = randomColor;
}
</script>
</body>
</html>위 예제에서 버튼을 클릭하면 페이지의 배경색이 랜덤한 색상으로 변경됩니다.
주의사항
- 색상 값 지정: 색상은 색상 이름(
'red'), RGB 값('rgb(255, 0, 0)'), HEX 코드('#FF0000'), HSL 값('hsl(0, 100%, 50%)') 등 다양한 형식으로 지정할 수 있습니다. - 브라우저 호환성: 대부분의 최신 브라우저는 위의 방법들을 지원하지만, 구형 브라우저에서는 일부 기능이 제한될 수 있습니다.
- 스타일 적용 우선순위: 인라인 스타일은 외부 스타일시트보다 우선 적용되므로, 자바스크립트로 설정한 스타일이 다른 스타일시트의 설정을 덮어쓸 수 있습니다.
이러한 방법들을 활용하여 자바스크립트로 웹 페이지의 배경색을 동적으로 변경할 수 있습니다.
반응형