HTML DOM Subscript 객체 이해하기 – 요소 생성과 활용법

HTML DOM의 Subscript 객체는 HTML 문서 내에서 요소를 나타내는 객체입니다. 요소는 일반 텍스트보다 아래쪽에 작게 표시되는 첨자(subscript) 텍스트를 정의할 때 사용되며, 화학식이나 수학 공식 등을 표현할 때 유용합니다.

Subscript 객체 생성 방법

JavaScript의 document.createElement() 메서드를 사용하면 동적으로 subscript 객체를 생성할 수 있습니다.

문법(Syntax)

document.createElement("SUB");

예제 코드

다음은 HTML DOM subscript 객체를 생성하는 전체 예제입니다. 버튼을 클릭하면 새로운 요소가 만들어져 페이지에 추가됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        text-align: center;
        background-color: #fff;
        color: #0197F6;
    }
    h1 {
        color: #23CE6B;
    }
    .btn {
        background-color: #fff;
        border: 1.5px dashed #0197F6;
        height: 2rem;
        border-radius: 2px;
        width: 60%;
        margin: 2rem auto;
        display: block;
        color: #0197F6;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM subscript Object Demo</h1>
<button onclick="createSub()" class="btn">Create a subscript object</button>
<script>
    function createSub() {
        var subElement = document.createElement("SUB");
        subElement.innerHTML = "This is a subscript element"
        document.body.appendChild(subElement);
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Subscript 객체 이해하기 – sub 요소 생성과 활용법

“Create a subscript object” 버튼을 클릭해 보세요. 클릭하는 즉시 JavaScript 함수가 실행되어 새로운 subscript 객체가 생성되고, 해당 텍스트는 일반 줄보다 반 글자만큼 아래에 작게 표시됩니다.

HTML DOM Subscript 객체 이해하기 – sub 요소 생성과 활용법

핵심 정리

요소는 기준선보다 아래에 위치하는 첨자 텍스트를 나타냅니다.
document.createElement("SUB")로 동적으로 생성할 수 있습니다.
appendChild() 메서드를 통해 생성한 요소를 문서에 추가합니다.