JavaScript에서 요소의 배경을 설정할 때는 background 속성을 사용합니다. 이 속성은 CSS의 단축(shorthand) 속성처럼 작동하기 때문에, 배경 색상, 배경 이미지, 반복 방식, 위치 등 배경과 관련된 모든 하위 속성을 하나의 선언만으로 동시에 지정할 수 있습니다.
background 단축 속성으로 설정할 수 있는 항목
JavaScript DOM에서 style.background를 사용하면 아래와 같은 개별 속성들을 따로 작성하지 않고도 한 번에 처리할 수 있습니다.
- background-color — 배경 색상 지정
- background-image — 배경 이미지 URL 지정
- background-repeat — 이미지 반복 여부 및 방식 지정 (repeat, no-repeat 등)
- background-position — 이미지 표시 위치 지정 (right top 등)
예제 코드
아래 예제는 버튼을 클릭하면 문서 전체(body)의 배경을 한 번의 선언으로 변경하는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<button onclick="display()">Click to Set background</button>
<script>
function display() {
document.body.style.background = "url('https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg') repeat right top";
}
</script>
</body>
</html>
코드 설명
위 코드의 동작 흐름은 다음과 같습니다.
- 버튼에
onclick="display()"이벤트 핸들러가 연결되어 있어, 클릭 시display()함수가 호출됩니다. display()함수 내부에서는document.body.style.background에 값을 할당하여 body 요소의 배경을 변경합니다.- 할당된 값은 세 부분으로 구성됩니다.
url(...)은 배경 이미지를 지정하고,repeat는 이미지가 화면을 채울 때까지 반복되도록 하며,right top은 이미지가 오른쪽 상단부터 배치되도록 위치를 정합니다.
이처럼 style.background 단축 속성을 활용하면 여러 줄의 개별 속성 코드를 작성할 필요 없이, 한 줄의 선언으로 배경 스타일을 간결하게 제어할 수 있습니다.