HTML DOM에서 밑줄(Underline) 객체는 HTML의 <u> 요소를 나타냅니다. 이 객체를 활용하면 JavaScript를 통해 텍스트에 밑줄을 적용하는 요소에 동적으로 접근하고, 스타일이나 속성을 자유롭게 변경할 수 있습니다.
<u> 요소 생성하기
JavaScript의 createElement() 메서드를 사용하면 새로운 <u> 요소를 만들 수 있습니다.
var uObject = document.createElement("U")이렇게 생성한 요소는 appendChild() 등의 메서드로 문서에 추가하여 사용할 수 있습니다.
밑줄 요소 활용 예제
아래 예제는 문서에 이미 존재하는 <u> 요소를 가져온 뒤, 버튼 클릭 시 배경색과 글자색을 변경하여 강조 효과를 주는 방법을 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Underline</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Underline</legend>
<h2 ><u id="Underline">Warning: </u>This is a Demo Example</h2>
<input type="button" value="Show" onclick="getBetterDisp()">
</fieldset>
</form>
<script>
var uObject = document.getElementById("Underline");
function getBetterDisp() {
uObject.style.backgroundColor = '#DC3545';
uObject.style.color = '#FFF';
}
</script>
</body>
</html>코드 설명
- getElementById("Underline"): id가 "Underline"인
<u>요소를 가져와 변수에 저장합니다. - getBetterDisp() 함수: 버튼을 클릭하면 실행되며, 해당 요소의 배경색을 붉은색(
#DC3545)으로, 글자색을 흰색(#FFF)으로 변경합니다.
실행 결과
Show 버튼 클릭 전 – 기본 상태에서는 일반적인 밑줄 텍스트만 표시됩니다.
Show 버튼 클릭 후 – 클릭하는 순간 밑줄 부분의 배경색과 글자색이 변경되어 경고 문구가 한눈에 들어오도록 강조됩니다.
정리
HTML DOM의 밑줄 객체를 사용하면 <u> 요소를 동적으로 생성하거나 기존 요소의 스타일을 자유롭게 제어할 수 있습니다. 특히 경고 메시지나 강조가 필요한 텍스트를 인터랙티브하게 표현할 때 유용하게 활용할 수 있습니다.