티스토리 블로그에서 한글 주소를 영문으로 변환하는 JavaScript 코드를 직접 실행할 수 있도록 블로그 글을 작성하는 방법을 설명하겠습니다. 다음은 블로그 글 내에서 입력한 한글을 변환하고 결과를 출력하는 기능을 구현하는 방법입니다.
1. 블로그 글 작성 준비
- 티스토리 관리자 페이지에 로그인합니다.
- "새 글 쓰기"를 클릭하여 새 블로그 글을 작성합니다.
2. HTML과 JavaScript 코드를 블로그 글에 추가
블로그 글 내용에 HTML과 JavaScript 코드를 직접 추가하여 한글을 영문으로 변환하는 기능을 구현합니다. 아래의 코드를 복사하여 블로그 글의 HTML 편집 모드에 붙여넣습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>한글 주소를 영문 주소로 변환하기</title>
<script>
// 한글을 로마자로 변환하는 함수
function hangulToRoman(hangul) {
const map = {
'가': 'ga', '나': 'na', '다': 'da', '라': 'ra', '마': 'ma', '바': 'ba', '사': 'sa', '아': 'a', '자': 'ja', '차': 'cha', '카': 'ka', '타': 'ta', '파': 'pa', '하': 'ha',
'거': 'geo', '너': 'neo', '더': 'deo', '러': 'reo', '머': 'meo', '버': 'beo', '서': 'seo', '어': 'eo', '저': 'jeo', '처': 'cheo', '커': 'keo', '터': 'teo', '퍼': 'peo', '허': 'heo'
// 필요에 따라 더 많은 한글 자음과 모음을 추가
};
return hangul.split('').map(char => map[char] || char).join('');
}
// URL 형식에 맞게 슬러그로 변환하는 함수
function convertToSlug(text) {
return text
.toString()
.toLowerCase()
.trim()
.replace(/\s+/g, '-') // 공백을 대시로 변환
.replace(/[^\w\-]+/g, '') // 알파벳과 숫자, 대시가 아닌 문자 제거
.replace(/\-\-+/g, '-') // 연속된 대시를 하나의 대시로 변환
.replace(/^-+/, '') // 문자열 앞의 대시 제거
.replace(/-+$/, ''); // 문자열 끝의 대시 제거
}
// 한글 주소를 영문 주소로 변환하는 함수
function koreanToEnglishUrl() {
const koreanUrl = document.getElementById('koreanUrl').value;
// 한글을 로마자로 변환
const romanizedText = hangulToRoman(koreanUrl);
// 로마자 텍스트를 URL 슬러그로 변환
const englishUrl = convertToSlug(romanizedText);
document.getElementById('englishUrl').innerText = englishUrl;
}
</script>
</head>
<body>
<h1>한글 주소를 영문 주소로 변환하기</h1>
<p>한글 주소를 입력하세요:</p>
<input type="text" id="koreanUrl" placeholder="한글 주소 입력">
<button onclick="koreanToEnglishUrl()">변환</button>
<p>영문 주소:</p>
<p id="englishUrl"></p>
</body>
</html>
-----html편집모드로 바꿉니다.--------
한글 주소를 영문 주소로 변환하기
한글 주소를 입력하세요:
영문 주소:
3. 블로그 글 작성 및 게시
- 위의 코드를 블로그 글의 HTML 편집 모드에 붙여넣습니다.
- "저장" 또는 "발행" 버튼을 클릭하여 블로그 글을 게시합니다.
4. 블로그 글 확인
- 블로그에 접속하여 게시한 글을 확인합니다.
- 한글 주소를 입력하고 "변환" 버튼을 클릭하여 영문 주소가 제대로 출력되는지 확인합니다.
이 과정에서 JavaScript 코드가 블로그 글 내에서 제대로 실행되어 한글 주소를 영문으로 변환하고 결과를 출력하게 됩니다.