텍스트 에디터에 뭔가 추가해보자

https://koreanraichu.tistory.com/711

아주 간단한 텍스트 에디터를 만들어보자

여기서 이어진다.

 

원래 추가하려던 건 파일 불러서 파일 이름을 제목으로 하는거였는데… 씁 그건 지피티 있어야되고… 오늘 추가해볼 건 그거다. 에디터 글꼴 변경하는 거. 페이지 전체 글꼴이 아니라, 글 작성하는 부분 글꼴(인풋이랑 텍스트에리어) 말이다.

---

우선 이걸 하려면 먼저 할 일이 있다. 물론 HTML에 추가하는 것도 할 일인 건 맞는데, CSS단에서 바꾸려면 폰트 URL을 import해야 한다. 뭐 거창한 건 아니고

이거 몇 개 복사해서 CSS파일에 붙여넣기 하자.

 

<select id="fonts">
  <option value="CHOGOONCHICKENSCRATCHV7">조군 개발새발 7</option>
  <option value="nanumgothic">나눔고딕</option>
  <option value="Pretendard">프리텐다드</option>
  <option value="ridibatang">리디바탕</option>
  <option value="dosiyagi">도스이야기</option>
  <option value="mabinogiclassic">마비옛체</option>
</select>

그리고 HTML단에서는 select태그를 줬다. 저 폰트 전부 CSS에 import 된 상태여야 적용이 된다. 참고로 기본 글씨체는 온글잎 콘콘이다.

 

const fontSelection = document.querySelector('#font');

어디가요 가져와야지.

 

이거 반복문 되나…? 아니 그 전에 이거 리스트가 아닌 거 아냐?

 

아, 얘도 .value 써서 가져오는 모양이다.

 

selectedIndex도 있는데 걍 이걸로 하자. 폰트명 너무 길어… ㅡㅡ

 

아니 내가 이걸 생각한 건 맞는데… 이게 왜 됨????? 진짜 왜 되는거임?

 

이게 기본폰트(온글잎 콘콘)다.

 

그리고 마비옛체로 바꾼 결과가 이거. 아니 근데 뭘 생각하셨길래요?

 

fontSelection.addEventListener('click',()=>{
    if (fontSelection.selectedIndex == 0) {
        fontSelection.style.fontFamily = 'Ownglyph_corncorn-Rg';
        textTitle.style.fontFamily = 'Ownglyph_corncorn-Rg';
        textArea.style.fontFamily = 'Ownglyph_corncorn-Rg';
    } else if (fontSelection.selectedIndex == 1) {
        fontSelection.style.fontFamily = 'CHOGOONCHICKENSCRATCHV7';
        textTitle.style.fontFamily = 'CHOGOONCHICKENSCRATCHV7';
        textArea.style.fontFamily = 'CHOGOONCHICKENSCRATCHV7';
    } else if (fontSelection.selectedIndex == 2) {
        fontSelection.style.fontFamily = 'nanumgothic';
        textTitle.style.fontFamily = 'nanumgothic';
        textArea.style.fontFamily = 'nanumgothic';
    } else if (fontSelection.selectedIndex == 3) {
        fontSelection.style.fontFamily = 'Pretendard-Regular';
        textTitle.style.fontFamily = 'Pretendard-Regular';
        textArea.style.fontFamily = 'Pretendard-Regular';
    } else if (fontSelection.selectedIndex == 4) {
        fontSelection.style.fontFamily = 'RIDIBatang';
        textTitle.style.fontFamily = 'RIDIBatang';
        textArea.style.fontFamily = 'RIDIBatang';
    } else if (fontSelection.selectedIndex == 5) {
        fontSelection.style.fontFamily = 'DOSIyagiMedium';
        textTitle.style.fontFamily = 'DOSIyagiMedium';
        textArea.style.fontFamily = 'DOSIyagiMedium';
    } else if (fontSelection.selectedIndex == 6) {
        fontSelection.style.fontFamily = 'MabinogiClassicR';
        textTitle.style.fontFamily = 'MabinogiClassicR';
        textArea.style.fontFamily = 'MabinogiClassicR';
    }
});

이거요. forEach 돌릴까 하다가 걍 if 돌려버렸음.

---

온글잎 콘콘

 

조군 개발새발 V7

 

나눔고딕

 

프리텐다드.. 솔직히 고딕체는 딱딱해서 별로 안 좋아하지만 가장 깔끔한 것도 고딕체이긴 하다. 깔끔한건 인정. 근데 내가 고딕체를 별로 안 좋아하는 이유도 특유의 딱딱함때문임...

 

리디바탕. 바탕체중에서 개인적으로 제일 좋아하는 바탕체이다.

 

도스이야기. 왜 초딩때 했던 한컴타자가 생각나는거냐...

 

마비옛체

 

참고로 이 글꼴들을 고를 때 본인 기준으로 한자 지원 안 하는 폰트는 다 빠진다. 이게 단순히 지원만 안 하는거면 구글 웹폰트에서 일본 폰트 긁어와서 쓰면 되는데 한자 지원을 안하면서 한자를 공백으로 표기하면 골치아파짐… 특히나 괴담수사대에는 제목이나 본문에 한자가 들어가는 경우도 있어서 그런 폰트는 기피된다.