1. 텍스트 비교기가 뭔가요?
텍스트 비교기(Text Diff Tool)는 두 개의 텍스트를 비교해서 달라진 부분을 표시해주는 유용한 도구입니다. 개발자나 문서 편집자, 학생 등 다양한 사람들이 사용하며, 코드 비교나 문서 수정 확인 등에 자주 활용됩니다.
2. 필요한 기술 스택
- HTML: 기본 구조 정의
- CSS: 스타일링
- JavaScript: 비교 로직 구현
3. HTML 기본 구조 만들기
먼저, 두 개의 텍스트 입력창과 비교 버튼을 HTML로 작성합니다.
<textarea id="text1"></textarea>
<textarea id="text2"></textarea>
<button onclick="compareText()">비교하기</button>
<div id="result"></div>
4. JavaScript로 비교 로직 구현
간단하게 줄 단위로 비교하여 다른 줄을 강조하는 스크립트를 작성할 수 있습니다.
function compareText() {
const text1 = document.getElementById('text1').value.split('\n');
const text2 = document.getElementById('text2').value.split('\n');
let result = '';
const maxLines = Math.max(text1.length, text2.length);
for (let i = 0; i < maxLines; i++) {
const line1 = text1[i] || '';
const line2 = text2[i] || '';
if (line1 === line2) {
result += '<div>' + line1 + '</div>';
} else {
result += '<div style="background:#ffe0e0">' + line1 + ' ≠ ' + line2 + '</div>';
}
}
document.getElementById('result').innerHTML = result;
}
5. 간단한 CSS 추가
보기 좋게 입력창과 결과 창에 스타일을 추가해줍니다.
textarea {
width: 45%;
height: 150px;
margin: 5px;
}
#result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
6. 마무리
이제 간단한 텍스트 비교기가 완성되었습니다! 이처럼 HTML, CSS, JavaScript만으로도 실용적인 도구를 직접 만들 수 있습니다. 이러한 툴을 제작해보는 경험은 프론트엔드 역량을 키우는 데 큰 도움이 됩니다.