당신의 블로그 글을 검색 엔진이 사랑하게 만들 팁: 단어 빈도 분석기 활용

HTML 코드 주요 요소

• `<textarea id="editor">`: 사용자가 블로그 글을 입력하는 공간입니다.
• `<div id="wordStats">`: 입력된 텍스트의 단어 빈도 분석 결과를 보여주는 공간입니다.

CSS 코드 & 자바스크립트

```html
	  <style>
            .example {
                max-width: 900px;
                margin: 20px auto;
                background: #fff;
                padding: 30px;
                border-radius: 8px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                display: flex;
                gap: 20px;
            }
	    .example strong, .c_tip strong, .c_warning strong {
		font-size: 14px;
		line-height: 20px;
	    }
            textarea#editor {
                width: 100%;
                flex: 2;
                padding: 15px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 16px;
                min-height: 400px;
                resize: vertical;
                box-sizing: border-box;
                line-height: 1.5;
                font-family: inherit;
            }
            #wordStats {
                flex: 1;
                background-color: #eef7f4;
                padding: 20px;
                border-radius: 6px;
                border: 1px solid #d8ede7;
                align-self: flex-start;
            }
            #wordStats h4 {
                color: #2c3e50;
                margin-top: 0;
                margin-bottom: 5px;
                font-size: 14px;
                border-bottom: 2px solid #5cb85c;
                padding-bottom: 5px;
            }
            #wordStats ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            #wordStats ul li {
                padding: 8px 0;
                border-bottom: 1px dashed #e0e0e0;
                display: flex;
                justify-content: space-between;
                align-items: center;
		line-height: 20px;
		height: 24px;
		font-size: 14px;
            }
            #wordStats ul li:last-child {
                border-bottom: none;
            }
            #wordStats ul li strong {
                color: #337ab7;
            }
            @media (max-width: 768px) {
                .example {
                    flex-direction: column;
                }
                textarea#editor {
                    min-height: 300px;
                }
            }
        </style>
		
	<script>
        function getWordFrequency(text) {
            const words = text
                .toLowerCase()
                .replace(/[^\w가-힣\s]/g, '') // 특수문자 제거 (한글 포함)
                .split(/\s+/)
                .filter(word => word.length >= 2); // 글자 수 2자 이상만

            const freq = {};
            words.forEach(word => {
                freq[word] = (freq[word] || 0) + 1;
            });

            const sorted = Object.entries(freq)
                .sort((a, b) => b[1] - a[1])
                .slice(0, 20); // 상위 20개 단어만

            return sorted;
        }

        document.getElementById('editor').addEventListener('input', function () {
            const text = this.value;
            const wordCounts = getWordFrequency(text);

            let html = `<h4>자주 등장하는 단어:</h4><ul>`;
            if (wordCounts.length === 0) {
                html += `<li>내용을 입력해주세요.</li>`;
            } else {
                wordCounts.forEach(([word, count]) => {
                    html += `<li><strong>${word}</strong>: ${count}회</li>`;
                });
            }
            html += `</ul>`;

            document.getElementById('wordStats').innerHTML = html;
        });

        // 초기 로드 시 한 번 실행하여 placeholder 텍스트에 대한 정보가 없도록 함
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('wordStats').innerHTML = `<h4>자주 등장하는 단어:</h4><ul><li>내용을 입력해주세요.</li></ul>`;
        });
        </script>
        

코드 실행 결과