HTML - 문제 미리보기
문제 961
hard
다음 코드에서 버튼을 클릭했을 때의 결과는?
```html
<img id="myImage" src="day.jpg" alt="낮 이미지">
<p id="status" style="font-size: 16px;">현재: 낮</p>
<button onclick="changeImage()">이미지 변경</button>
<script>
function changeImage() {
document.getElementById("myImage")._____ = "night.jpg";
document.getElementById("status").innerHTML = "현재: 밤";
document.getElementById("status").style._____ = "20px";
}
</script>
```
빈칸에 `src`와 `fontSize`가 들어갈 때의 결과는?
```html
<img id="myImage" src="day.jpg" alt="낮 이미지">
<p id="status" style="font-size: 16px;">현재: 낮</p>
<button onclick="changeImage()">이미지 변경</button>
<script>
function changeImage() {
document.getElementById("myImage")._____ = "night.jpg";
document.getElementById("status").innerHTML = "현재: 밤";
document.getElementById("status").style._____ = "20px";
}
</script>
```
빈칸에 `src`와 `fontSize`가 들어갈 때의 결과는?
정답: C
이 JavaScript 함수는 세 가지 작업을 수행합니다:
1. `document.getElementById("myImage").src = "night.jpg"`: 이미지의 `src` 속성을 변경하여 다른 이미지 파일로 교체
2. `document.getElementById("status").innerHTML = "현재: 밤"`: 텍스트 내용을 변경
3. `document.getElementById("status").style.fontSize = "20px"`: 글자 크기를 16px에서 20px로 변경
JavaScript에서는 HTML 속성(`src`, `alt` 등)과 CSS 스타일(`fontSize`, `color` 등)을 모두 동적으로 변경할 수 있습니다. 이는 사용자 상호작용에 따라 웹 페이지의 모양과 내용을 실시간으로 바꾸는 핵심 기능입니다. 버튼 클릭 시 `onclick` 이벤트가 발생하여 함수가 실행됩니다.
1. `document.getElementById("myImage").src = "night.jpg"`: 이미지의 `src` 속성을 변경하여 다른 이미지 파일로 교체
2. `document.getElementById("status").innerHTML = "현재: 밤"`: 텍스트 내용을 변경
3. `document.getElementById("status").style.fontSize = "20px"`: 글자 크기를 16px에서 20px로 변경
JavaScript에서는 HTML 속성(`src`, `alt` 등)과 CSS 스타일(`fontSize`, `color` 등)을 모두 동적으로 변경할 수 있습니다. 이는 사용자 상호작용에 따라 웹 페이지의 모양과 내용을 실시간으로 바꾸는 핵심 기능입니다. 버튼 클릭 시 `onclick` 이벤트가 발생하여 함수가 실행됩니다.
💡 학습 팁
이 문제를 포함한 HTML 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.