HTML DOM에서 Italic 객체는 문서 내의 <i> 요소를 나타내는 인터페이스입니다. <i> 태그로 감싸인 텍스트는 브라우저에서 기본적으로 기울임꼴(이탤릭체)로 표시되며, 자바스크립트를 사용하면 이러한 요소를 동적으로 생성하고 조작할 수 있습니다.
문법(Syntax)
<i> 요소를 새로 만들 때는 document.createElement() 메서드를 사용합니다. 기본 문법은 다음과 같습니다.
var italicObject = document.createElement("I");예제
아래 예제는 입력 필드에 작성한 텍스트를 버튼 클릭 한 번으로 기울임꼴로 변환하여 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>Italic Object</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>Italic Object</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function convertItalic() {
var italicObject = document.createElement("I");
var italicText = document.createTextNode(textSelect.value);
italicObject.appendChild(italicText);
divDisplay.appendChild(italicObject);
}
</script>
</body>
</html>코드 동작 원리
이 예제의 핵심 로직은 convertItalic() 함수 안에 있습니다.
1. document.createElement("I")로 새로운 <i> 요소를 생성합니다.
2. document.createTextNode()로 입력 필드의 값을 담은 텍스트 노드를 만듭니다.
3. appendChild()를 사용해 텍스트 노드를 <i> 요소에, 그리고 <i> 요소를 출력 영역(<div>)에 차례로 추가합니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Check' 버튼을 클릭하기 전 – 입력 필드만 표시된 초기 화면입니다.
'Check' 버튼을 클릭한 후 – 입력한 텍스트가 기울임꼴로 변환되어 아래 영역에 출력됩니다.
참고 사항
<i> 태그는 단순히 시각적인 스타일링을 위한 요소입니다. 콘텐츠에 의미론적 강조를 부여하려면 <em>(emphasis) 태그를 사용하는 것이 좋으며, 스크린 리더 등 보조 기술에서 서로 다르게 해석될 수 있습니다. 또한 Italic 객체는 표준 HTMLElement의 모든 속성과 메서드를 상속받으므로, 스타일 변경·클래스 추가 등 일반적인 DOM 조작도 자유롭게 수행할 수 있습니다.