HTML DOM S 객체 – 취소선(<s>) 요소를 JavaScript로 생성하고 제어하는 방법

HTML DOM S 객체는 HTML 문서 내의 <s> 요소를 나타내는 객체입니다. <s> 태그는 텍스트에 취소선(strikethrough)을 적용하여 더 이상 정확하지 않거나 관련이 없는 내용을 표시할 때 사용됩니다.

JavaScript의 document.createElement() 메서드를 사용하면 동적으로 S 객체를 생성하여 페이지에 추가할 수 있습니다.

S 객체 생성 문법

S 객체를 생성하는 기본 문법은 다음과 같습니다.

document.createElement("S");

S 객체 활용 예제

다음 예제는 버튼을 클릭하면 <s> 요소를 동적으로 생성하여 화면에 추가하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#fff;
        color:#0197F6;
    }
    h1{
        color:#23CE6B;
    }
    .drop-down{
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
    }
    .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;
    }
    p{
        font-size:1.2rem;
        background-color:#db133a;
        color:#fff;
        padding:8px;
    }
</style>
</head>
<body>
<h1>DOM S 객체 데모</h1>
<button onclick="createS()" class="btn">S 객체 생성하기</button>
<script>
    function createS() {
        var sElement = document.createElement("S");
        sElement.innerHTML = "안녕하세요! 저는 HTML의 <s> 요소입니다";
        document.body.appendChild(sElement);
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM S 객체 – 취소선( s ) 요소를 JavaScript로 생성하고 제어하는 방법

화면 중앙의 “S 객체 생성하기” 버튼을 클릭해 보세요.

HTML DOM S 객체 – 취소선( s ) 요소를 JavaScript로 생성하고 제어하는 방법

버튼을 클릭하면 createS() 함수가 실행되어 새로운 <s> 요소가 만들어지고, 해당 요소에는 취소선이 그려진 텍스트가 포함되어 페이지 하단에 추가됩니다.

핵심 정리

<s> 요소는 텍스트에 취소선을 표시하는 HTML 태그입니다.
document.createElement("S")로 S 객체를 동적으로 생성할 수 있습니다.
innerHTML 속성으로 내용을 지정한 뒤, appendChild()를 사용해 문서에 추가합니다.
삭제된 정보를 의미론적으로 표현해야 한다면 <del> 태그 사용도 고려해 볼 수 있습니다.

HTML DOM S 객체 – 취소선() 요소를 JavaScript로 생성하고 제어하는 방법

S 객체 생성 문법

S 객체 활용 예제

실행 결과

핵심 정리