본문 바로가기
Programming/CSS

[CSS] 한글, 영어, 한자, 기호 CSS 개별 적용하기

by 가가가가가가 2024. 7. 24.
반응형

1. :lang()

    - html 요소의 'lang' 속성에 지정된 언어를 기반으로 스타일 적용

    - 모든 요소를 lang()에 설정된 언어로 인식

    - 언어만 가능하기에 기호는 따로 설정 불가

 

 

 

2. unicode-range

    - 특정 Unicode 문자 범위에 대해 폰트를 정의할 때 사용

    - @font-face 규칙 내에서만 사용

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>한글, 영어, 한자, 기호 따로 CSS 적용하기</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Dongle&family=Kalnia+Glaze:wght@100..700&family=Zhi+Mang+Xing&display=swap');

        /* 한글 */
        @font-face {
            font-family: '양진체';
            src: url('https://fastly.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff') format('woff');
            unicode-range: U+AC00-D7A3;
        }

        /* 영어 */
        @font-face {
            font-family: 'Ownglyph_UNZ-Rg';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2406-1@1.0/Ownglyph_UNZ-Rg.woff2') format('woff2');
            unicode-range: U+0020-007F;
        }

        /* 한자 */
        @font-face {
            font-family: "Zhi Mang Xing", cursive;
            unicode-range: U+4E00-9FFF;
        }

        /* 기호 */
        @font-face {
            font-family: 'EF_jejudoldam';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-EF@1.0/EF_jejudoldam.woff2') format('woff2');
            unicode-range: U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;
        }
    
        .kor {
            font-family: "양진체";
        }
        .chi {
            font-family: "Zhi Mang Xing";
        }
        .eng {
            font-family: "Ownglyph_UNZ-Rg";
        }
        .sym {
            font-family: "EF_jejudoldam";
        }
        .test {
            font-family: "Dongle";
        }
    </style>
</head>
<body>
    <b>* 한글</b>
    <p class="kor">가나다라마바사아자차카타파하</p>    
    <br>

    <b>* 영어</b>
    <p class="eng">abcdefghijklmnopqrstuvwxyz</p>    
    <br>

    <b>* 한자</b>
    <p class="chi">一二三四五六七八九十</p>    
    <br>

    <b>* 기호</b>
    <p class="sym">!@#$%^&*()</p>

    <b>* 테스트</b>
    <p class="test">dfjskdf 가나다라</p>
</body>
</html>

 

 

 

    ❕참고) 자주 사용될 수 있는 unicode-range 종류

기본값, 모든 글자 unicode-range: U+0-10FFFF;
영문 숫자, 특수문자, unicode-range: U+0020-007E;
영문 대문자 unicode-range: U+0041-005A;
영문 소문자 unicode-range: U+0061-007A;
특수문자 unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
숫자 unicode-range: U+0030-0039;
한글 unicode-range: U+AC00-D7A3;
일본어 unicode-range: U+3000-30FF;  
일본어(반각 가타카나 포함) unicode-range: U+3000-30FF, U+FF61-FFEF;  
한중일 통합 한 unicode-range: U+4E00-9FAF;

 

 

 

3. javascript  

    - selector를 통해 각 문자를 식별하고 스타일을 동적으로 적용

    - 조건문을 통해 언어 종류 감지

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>한글, 영어, 한자, 기호 따로 CSS 적용하기</title>
  <style>
    .hangul {
      color: red;
    }
    .chinese {
      color: green;
    }
    .english {
      color: blue;
    }
    .symbols {
      color: yellow;
    }
  </style>
</head>
<body>
  <b>* 한글</b>
  <p class="text">가나다라마바사아자차카타파하</p>  
  <br>

  <b>* 영어</b>
  <p class="text">abcdefghijklmnopqrstuvwxyz</p>  
  <br>

  <b>* 한자</b>
  <p class="text">一二三四五六七八九十</p>  
  <br>

  <b>* 기호</b>
  <p class="text">!@#$%^&*()</p>

  <script>
    document.querySelectorAll('.text').forEach(p => {
      const text = p.innerText;
      let newText = '';

      for (let char of text) {
        if (/[가-힣]/.test(char)) { // 한글
          newText += `<span class="hangul">${char}</span>`;
        } else if (/[一-龥]/.test(char)) { // 한자
          newText += `<span class="chinese">${char}</span>`;
        } else if (/[a-zA-Z]/.test(char)) { // 영어
          newText += `<span class="english">${char}</span>`;
        } else { // 기호
          newText += `<span class="symbols">${char}</span>`;
        }
      }

      p.innerHTML = newText;
    });
  </script>
</body>
</html>

 

 

 

 

 

 

 

참고

반응형
저작자표시 비영리 변경금지

댓글

티스토리툴바