HTML DOM Samp 객체란?
HTML DOM의 Samp 객체는 HTML 문서 내 <samp> 요소를 나타내는 객체입니다. <samp> 태그는 프로그램이나 컴퓨터 시스템이 출력한 샘플 결과(예: 콘솔 메시지, 스크립트 실행 결과)를 화면에 표시할 때 사용하는 인라인 요소로, 기본적으로 고정폭(monospace) 글꼴로 렌더링됩니다.
자바스크립트를 활용하면 이러한 samp 객체를 동적으로 생성하여 페이지에 추가할 수 있습니다.
Samp 객체 생성 문법
새로운 samp 객체를 만들 때는 document.createElement() 메서드를 사용합니다.
document.createElement("SAMP");Samp 객체 예제
아래 예제에서는 버튼을 클릭하면 samp 객체가 생성되고, 해당 객체에 텍스트를 담아 문서 본문(body)에 추가하는 과정을 보여줍니다.
<!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 Samp Object Demo</h1>
<button onclick="createSamp()" class="btn">Create a samp object</button>
<script>
function createSamp() {
var sampElement = document.createElement("SAMP");
sampElement.innerHTML="Output of console.log(2+3) in JavaScript is 5";
document.body.appendChild(sampElement);
}
</script>
</body>
</html>코드 설명
- createSamp() 함수: 버튼 클릭 시 호출되며,
document.createElement("SAMP")로 새로운 samp 요소를 만듭니다. - innerHTML 설정: 생성된 samp 요소에 자바스크립트 콘솔 출력 예시 텍스트를 삽입합니다.
- appendChild(): 완성된 samp 요소를 문서의 body 끝에 추가하여 화면에 표시합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
여기서 "Create a samp object" 버튼을 클릭하면 samp 객체가 동적으로 생성되어 아래와 같이 페이지에 추가됩니다.
정리
HTML DOM의 Samp 객체는 <samp> 요소를 스크립트로 제어할 수 있게 해주는 인터페이스입니다. createElement("SAMP")로 새 요소를 만들고, innerHTML로 내용을 지정한 뒤 appendChild()로 문서에 추가하는 세 단계만 기억하면 누구나 손쉽게 활용할 수 있습니다. 프로그램 출력 결과를 강조해서 보여줘야 하는 문서나 튜토리얼 페이지에서 유용하게 사용해 보세요.