[javascript] 드래그 앤 드롭 이벤트를 사용하여 자바스크립트로 웹 사이트 사전 검색 기능 구현 방법
웹 사이트에 사전 검색 기능을 구현하는데 드래그 앤 드롭 이벤트를 활용해보고자 합니다. 사용자가 텍스트를 드래그하여 해당 단어의 정의를 표시해주는 기능을 만들어보겠습니다.
HTML 마크업
먼저, HTML 마크업을 작성합니다. 아래와 같이 입력해주세요.
<!DOCTYPE html>
<html>
<head>
<title>사전 검색 기능</title>
</head>
<body>
<h1>웹 사이트 사전 검색 기능</h1>
<p>텍스트를 드래그하여 단어의 정의를 확인하세요.</p>
<div class="dictionary">
<p>
JavaScript는 웹 프론트엔드 개발에서 가장 일반적으로 사용되는 프로그래밍 언어입니다. JavaScript로는 동적인 웹 페이지를 제작하고 웹 애플리케이션을 개발할 수 있습니다.
</p>
<p>
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 브라우저는 HTML 문서를 해석하여 콘텐츠를 표시합니다.
</p>
<p>
CSS는 웹 페이지의 스타일링을 담당하는 스타일 시트 언어입니다. CSS를 사용하여 웹 페이지의 레이아웃, 색상, 폰트 등을 조정할 수 있습니다.
</p>
</div>
<div class="definition">
<p id="word-definition"></p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 스타일링
다음으로, CSS 스타일을 추가합니다. 아래와 같이 입력해주세요.
.dictionary {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.definition {
background-color: #f5f5f5;
padding: 10px;
}
#word-definition {
font-weight: bold;
}
JavaScript 구현
드래그 앤 드롭 이벤트를 사용하여 사전 검색 기능을 구현해보겠습니다. script.js 파일을 생성하고 아래 코드를 입력해주세요.
// 단어를 드래그하면 정의를 표시하는 함수
function displayDefinition(event) {
event.preventDefault();
const selectedText = window.getSelection().toString();
const dictionaryEntries = document.getElementsByClassName('dictionary')[0].getElementsByTagName('p');
for (let i = 0; i < dictionaryEntries.length; i++) {
const dictionaryEntryText = dictionaryEntries[i].innerText.toLowerCase();
if (dictionaryEntryText.includes(selectedText.toLowerCase())) {
const definitionParagraph = document.getElementById('word-definition');
definitionParagraph.innerText = dictionaryEntries[i].innerText;
break;
}
}
}
// 드래그 앤 드롭 이벤트 리스너 등록
document.addEventListener('mouseup', displayDefinition);
위의 코드는 displayDefinition 함수에서 드래그된 텍스트를 가져와서 사전에서 정의를 표시합니다. mouseup 이벤트 리스너를 등록하여 드래그 앤 드롭 이벤트가 발생했을 때 displayDefinition 함수를 호출합니다.
결과 확인
웹 브라우저에서 HTML 파일을 열고 텍스트를 드래그하여 정의를 확인해보세요. 드래그한 텍스트에 해당하는 단어의 정의가 표시될 것입니다.
이렇게 자바스크립트를 사용하여 드래그 앤 드롭 이벤트를 활용한 사전 검색 기능을 구현할 수 있습니다.