HTML DOM의 backgroundSize 속성은 요소의 배경 이미지 크기를 설정하거나 가져오는 데 사용됩니다. 자바스크립트를 통해 배경 이미지의 크기를 동적으로 제어할 수 있어 다양한 인터랙티브 웹 페이지 제작에 활용됩니다.
문법(Syntax)
backgroundSize 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.backgroundSize = "auto|length|cover|contain|initial|inherit"
속성 값(Property Values)
backgroundSize 속성에 사용할 수 있는 값들은 아래 표와 같습니다.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | auto 배경 이미지가 원래 크기 그대로 표시됩니다. 이 값이 기본값(default)입니다. |
| 2 | length 배경 이미지의 너비와 높이를 직접 지정합니다. 첫 번째 값은 너비(width), 두 번째 값은 높이(height)에 적용되며, 하나의 값만 입력하면 나머지 값은 자동으로 auto로 처리됩니다. |
| 3 | percentage(백분율) 배경 이미지의 너비와 높이를 백분율(%)로 지정합니다. 백분율은 부모 요소의 너비와 높이를 기준으로 계산되며, 첫 번째 값은 너비, 두 번째 값은 높이를 설정합니다. 하나의 값만 주어지면 생략된 값은 auto로 기본 설정됩니다. |
| 4 | cover 배경 이미지를 배경 영역 전체를 완전히 덮을 수 있도록 최대한 확대하여 표시합니다. |
| 5 | contain 이미지의 너비와 높이가 콘텐츠 영역 안에 모두 들어갈 수 있도록 크기를 조절합니다. |
| 6 | initial 해당 속성을 초기값으로 설정합니다. |
| 7 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
HTML DOM 스타일 backgroundSize 속성의 실제 사용 예제를 살펴보겠습니다. 버튼을 클릭하면 div 요소의 배경 이미지 크기가 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
box-shadow: 0 2px 0 4px mintcream;
padding: 45px;
background: url("https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
background-size: 150px 150px;
}
</style>
<script>
function changeBackSize(){
document.getElementById("DIV1").style.backgroundSize="100px 100px";
document.getElementById("Sample").innerHTML="배경 이미지 크기가 축소되었습니다.";
}
</script>
</head>
<body>
<h2>PL/SQL Tutorial</h2>
<div id="DIV1"></div>
<p>아래 버튼을 클릭하여 위 div의 배경 이미지 크기를 변경해 보세요.</p>
<button onclick="changeBackSize()">CHANGE SIZE</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE SIZE 버튼을 클릭하면 배경 이미지 크기가 100px × 100px로 축소되는 것을 확인할 수 있습니다.
정리
backgroundSize 속성은 CSS의 background-size와 동일하게 작동하며, 자바스크립트로 배경 이미지 크기를 실시간으로 조절해야 하는 경우 유용하게 활용할 수 있습니다. 특히 cover와 contain 값은 반응형 웹 디자인에서 배경 이미지를 깔끔하게 처리하는 데 자주 사용되므로 함께 익혀두면 좋습니다.