HTML의 oncut 이벤트 속성은 사용자가 HTML 문서 내 특정 요소의 내용을 잘라내기(Cut)할 때 실행되는 이벤트 핸들러입니다. 텍스트를 선택한 후 Ctrl+X(또는 Cmd+X)로 잘라내기 작업을 수행하면, 해당 요소에 등록된 oncut 속성의 스크립트가 자동으로 호출됩니다.
oncut 이벤트 속성 문법
oncut 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname oncut="script"></tagname>
- tagname: oncut 이벤트를 적용할 HTML 요소
- script: 잘라내기 이벤트가 발생했을 때 실행할 JavaScript 코드
HTML oncut 이벤트 속성 예제
아래 예제는 단락(p) 요소에 oncut 이벤트 속성을 적용하여, 사용자가 텍스트를 잘라내면 페이지 배경색이 변경되도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
p {
font-size: 1.1rem;
}
</style>
</head>
<body>
<h1>HTML oncut Event Attribute Demo</h1>
<p oncut="get()">I'm a paragraph HTML element with some dummy text.</p>
<p style="color:#db133a;">Now try to cut above paragraph text.</p>
<div class="show"></div>
<script>
function get() {
document.body.style.background = "lightblue";
}
</script>
</body>
</html>코드 설명
- 첫 번째 <p> 요소에
oncut="get()"속성이 지정되어 있습니다. - 사용자가 해당 단락의 텍스트를 선택하고 잘라내기를 실행하면
get()함수가 호출됩니다. get()함수는document.body.style.background값을lightblue로 변경하여 페이지 전체 배경색을 바꿉니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
이제 단락 요소의 텍스트를 직접 잘라내기 해보세요. oncut 이벤트가 발생하면서 페이지 배경색이 하늘색(lightblue)으로 변경되는 것을 확인할 수 있습니다.
정리
oncut 이벤트 속성은 클립보드 관련 이벤트 중 하나로, 콘텐츠 보호나 사용자 상호작용 피드백을 제공하는 데 활용할 수 있습니다. 유사한 이벤트로는 복사 시 발생하는 oncopy, 붙여넣기 시 발생하는 onpaste가 있으며, 이들과 함께 사용하면 더욱 풍부한 사용자 경험을 구현할 수 있습니다.