1. html, css, JavaScript로 간단한 글자 수 세기 프로그램 만들기
자주 쓰는 기능 중 하나인 '글자 수 계산' 기능을 직접 한번 만들어보았습니다. 결과 먼저 보여드리면, 아래의 심플한 '글자 수 계산기 프로그램'을 html, css, JavaScript로 만들어 보겠습니다.
1) HTML:
하나의 텍스트 영역(textarea)과 글자 수(공백 포함/공백 제외)를 보여주는 단순한 페이지를 구성하고 css로 간단히 꾸밉니다. 설명에서 css는 생략하겠습니다.
<div class="form-group">
<textarea id="input" rows="10" cols="50"></textarea>
<p class="fancy">공백 포함 글자 수: <span id="count-with-space">0</span></p>
<p class="fancy">공백 제외 글자 수: <span id="count-without-space">0</span></p>
</div>
2) JavaScript:
아래의 JavaScript 코드는 textarea를 선택하고, input 이벤트 리스너를 추가하여 사용자가 텍스트를 입력할 때마다 글자 수를 계산하고 페이지에 바로 표시합니다.
input 이벤트가 발생하면, 이벤트 핸들러는 textarea의 값을 가져와 length 속성(UTF-16 코드 유닛 기준)을 사용하여 글자 수를 계산합니다. 그런 다음 replace() 메서드를 사용하여 스페이스를 모두 제거한 문자열의 길이를 계산하여 countWithoutSpace 요소의 textContent 속성에 표시합니다. 스페이스를 포함한 글자 수는 countWithSpace 요소에 표시합니다.
const input = document.getElementById('input');
const countWithSpace = document.getElementById('count-with-space');
const countWithoutSpace = document.getElementById('count-without-space');
input.addEventListener('input', () => {
const text = input.value;
const lengthWithSpace = text.length;
const lengthWithoutSpace = text.replace(/ /g, '').length;
countWithSpace.textContent = lengthWithSpace;
countWithoutSpace.textContent = lengthWithoutSpace;
});
이제 위의 HTML과 JavaScript 코드를 조합하여 textarea에 입력된 글자 수를 계산하고 페이지에 표시하는 간단한 프로그램을 만들 수 있습니다.
글자 수를 세는 기준은 사이트마다 또는 기관마다 조금씩 다르기 때문에 좀 더 정확한 글자 수를 알고 싶으시면 각 사이트에 방문하셔서 체크해 보시는 게 좋습니다.
2. 그 외의 '글자 수 세기' 및 '맞춤법 검사' 추천 사이트
이상으로 html, css, JavaScript로 간단한 글자 수 세기 프로그램을 만들어 보았습니다.
