실시간 글자 수 계산기 html, css, 자바스크립트로 무료웹사이트도구 만들기
블로그 글을 작성할 때 최적화 된 글을 작성하기 이해서는 최종작성한 글자수를 아는것도 중요합니다. 글자수는 콘텐츠의 집중도를 높이고, 블로그에 머무는 시간이 중요하기 때문이기도 하죠. 하지만 어디가서 글자수 세기를 해야 할지 모르겠습니다. 유료로 해야 하나? 무료웹사이트도구는 없을까? 그래서 이번 글에서는 html, css를 이용해서 뼈대를 잡고 자바스크립트로 실시간 글자 수 계산하는 계산기를 구현해보도록 하겠습니다.
1. 빼대잡기 - 기본 HTML 구조
HTML은 웹 페이지의 구조를 정의하는 데 사용됩니다.
우리가 구현할 기능을 위해 필요한 HTML 요소는 매우 간단합니다.
주요 요소로는 사용자가 텍스트를 입력할 수 있는 textarea와 글자 수를 표시할 div가 있습니다.
그리고 글자수는 공백포함한 글자와 공백을 제외한 글자로 나누어서 출력을 해주도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실시간 글자 수 계산기</title>
</head>
<body>
<div class="container">
<textarea id="text-input" placeholder="여기에 글을 입력하세요..."></textarea>
<div class="charCount" id="char-count1">0 글자(공백 포함)</div>
<div class="charCount" id="char-count2">0 글자(공백 제외)</div>
</div>
</body>
</html>
2. 자바스크립트로 실시간 계산 구현
자바스크립트는 웹 페이지에 동적 기능을 추가하는 데 사용됩니다.
이 경우, 자바스크립트를 사용하여 textarea에 입력되는 텍스트의 글자 수를 실시간으로 계산하고, 그 결과를 화면에 표시하게 됩니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
var textInput = document.getElementById('text-input');
var charCountDiv1 = document.getElementById('char-count1');
var charCountDiv2 = document.getElementById('char-count2');
textInput.addEventListener('input', function() {
var text = textInput.value;
var textLength1 = this.value.length;
var textWithoutSpaces = text.replace(/\s/g, ''); // 공백 제거
var textLength2 = textWithoutSpaces.length;
charCountDiv1.textContent = textLength1 + ' 글자(공백 포함)';
charCountDiv2.textContent = textLength2 + ' 글자(공백 제외)';
});
});
</script>
- DOM 로딩: DOMContentLoaded 이벤트를 사용하여 문서 로딩 완료 후 스크립트 실행을 보장합니다.
- 요소 선택: getElementById를 통해 textarea와 글자 수를 표시할 div를 선택합니다.
- 이벤트 리스너: textarea의 input 이벤트에 대한 리스너를 설정하여 사용자의 입력을 감지합니다.
- 글자 수 계산 및 표시: 사용자가 입력할 때마다 글자 수를 계산하여 div에 표시합니다.
3. CSS 구현
단순히 표시만 해준다면 이쁘게 표현되지 않을 수 있습니다.
또한 페이지의 크기에 따라 반응형으로 출력되어야 다양한 기기에서 접속이 가능합니다.
간단한 CSS를 작성해보도록 하겠습니다.
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
width: 80%;
max-width: 600px;
}
textarea {
width: 100%;
height: 300px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
resize: none;
}
.charCount {
text-align: right;
color: #333;
font-size: 14px;
}
</style>
이 소스들을 모두 진행하면 다음과 같은 결과 화면이 나옵니다.
지금 이 블로그에 여기까지만 작성한 글자의 갯수를 알아볼께요.
아직 다 작성하지 않았지만 1808 글자나 되네요.
아무래도 소스코드가 들어가서 글자수가 많은가 봅니다.
소스코드첨부
본 글에서 만든 파일은 아래의 소스코드를 다운받으시면 됩니다.
구현한 웹사이트는 아래의 링크를 통해서 접속 할 수 있습니다.
결론
이 방법을 통해 간단하게 실시간 글자 수 계산기를 구현할 수 있습니다. 이 기능은 블로그 게시물 작성, 피드백 양식, 글자 제한이 있는 입력 필드 등 다양한 상황에서 활용될 수 있습니다. 자바스크립트와 HTML만으로 이러한 동적인 웹 페이지 기능을 구현하는 방법을 익히면, 웹 개발 능력을 한 단계 업그레이드할 수 있습니다.
간단하게 자바스크립트를 이용해서 글자수 계산하기와 같은 무료웹사이트도구 프로젝트를 간간히 진행하려고 합니다. 그냥 하는거보다 쉽고 재미있을꺼 같네요.