Crazy Life on Net :: 한글과 영어 구분하여 스타일 적용하기

한글과 영어 구분하여 스타일 적용하기

IT 이야기/블로그 & HTML 2007/10/31 16:19

홈페이지를 만들다 보면 한글과 영어를 적당히 구분해서 스타일을 적용하고 싶을때가 있다. 뭐, 사실 현재 웹에서 기본 폰트인 굴림체나 돋움체의 영어 글씨가 별로 이뿌지 않기 때문일 것이다.

아이디어:
화면에 표시할 내용을 <<<content>>> , 한글과 영어에 해당되는 스타일의 클래스를 각각 "kor"과 "eng"라 하자.
기본적으로 <<<content>>>에 kor 스타일을 적용하고, <<<content>>>중에서 숫자와 영어 대소문자등을 찾아서 그 부분만 eng 스타일을 적용하게 된다.

이때, 정규식(Regular Expression)을 이용해서 숫자와 영어 대소문자를 구분한다.

JavaScript에서...

<!-- 정규식 정의 부분 -->
<script type="text/javascript" language="javascript">
    function applyEngStyle(str) {
        re   = /([0-9a-zA-Z]+)/g;
        repl = "<span class=\"eng\">$1</span>"
        return str.replace(re, repl);
    }
</script>

<!-- 사용 예 -->
<span class="kor">
    <script type="text/javascript" language="javascript">
        document.write(applyEngStyle("<<<content>>>"));
    </script>
</span>

PHP에서...

<!-- 정규식 정의 부분 -->
<?
    function applyEngStyle($str) {
        $re   = "([0-9a-zA-Z]+)";
        $repl = "<span class=\"eng\">\\1</span>";
        return mb_ereg_replace($re, $repl, $str);
    }
?>

<!-- 사용 예 -->
<span class="kor">
    <? echo applyEngStyle("<<< content >>>"); ?>
</span>

위 방법 중 JavaScript를 이용한 방법이 본 블로그에 적용되어 있다.

<h1>
    <script>
        document.write(applyEngStyle("crazybar.net에 오신걸 환영합니다."));
    </script>
</h1>

위문장을 수행한 결과가 다음과 같다. ( 참고로 h1에는 돋움체, h1 span.eng에는 Trebuchet MS가 설정되어 있음 )

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

CSS - 가로사진 & 세로사진 구분없이 정사각형 안으로 쏙 들어오는 썸네일 만들기 (4)	2008/03/26
갤러리 스킨 - Gallery (Gray) - 적용 (4)	2008/03/25
한글과 영어 구분하여 스타일 적용하기 (0)	2007/10/31
Spotplex : 실시간 블로그 랭킹 서비스 (0)	2007/10/30
스킨변경 : Plum Flavor + Urban Rose (4)	2007/10/24
구글(Google) 애드센스(Adsense) (4)	2007/04/06