[티스토리] 코드 블록 디자인: 폰트 변경 및 적용하기(D2Coding)

안녕하세요! 오늘은 블로그의 코드 블록 폰트를 변경하는 과정을 소개해드리려고 합니다. 가시성 좋은 폰트를 선택함으로써 독자들에게 더 나은 가독성과 시각적 편안함을 제공하고, 전문성과 신뢰성을 높이며 다양한 기기 및 화면에 적합한 사용자 경험을 조성할 수 있습니다. 

폰트 선택

먼저, 다양한 상업적 용도에 활용 가능한 무료 폰트를 제공하는 눈누에서 원하는 폰트를 찾아보겠습니다.

눈누홈페이지에서는 폰트를 한눈에 볼 수 있고, 웹폰트로 제공되어 편리합니다. 사진처럼 '코딩체'만 따로 모아 볼 수도 있습니다.  여기서 제가 개발에 특화된 D2Coding을 선택한 이유는, 네이버에서 개발자들을 위해 디자인한 이 폰트가 코딩 시 가독성이 뛰어나다는 특징이 있기 때문입니다. 원하시는 폰트를 골라보시길 바랍니다.

 

 

웹 폰트 복사

대시보드의 카드를 클릭하면 상세 페이지로 넘어갑니다. [웹폰트로 사용] 오른쪽의 복사 아이콘을 눌러 폰트 코드를 복사해 주세요.

레이아웃 찾기

1. 이미지를 첨부한 포스팅을 열고 F12 또는 ctrl + shift + c를 눌러 개발자 도구(DevTools)를 엽니다.
2. 개발자툴의 좌측 상단에 아이콘을 클릭해주세요.
3. 아이콘을 클릭하고 포스팅창에서 마우스를 움직이면 다음처럼 오브젝트에 파란색 박스가 생기고 개발자 도구에서 해당 오브젝트의 상세 코드가 보입니다.
4. 코드블록을 클릭해서 개발자 도구 창에서 요소명을 확인합니다. 오디세이의 경우 #article-view pre code로 확인되었습니다.

 

폰트 적용

1. [블로그 관리> 꾸미기> 스킨 편집] 메뉴에서 'html 편집' 버튼을 클릭하고 CSS 탭을 선택합니다. 
2. Page Down 키를 사용하여 맨 하단으로 이동합니다.
3. 웹폰트 코드를 붙여 넣어 #article-view pre code 요소에 D2Coding을 적용하는 CSS 코드를 추가합니다. 
4. /* font setting s */ @font-face { font-family: 'D2Coding'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff'); font-weight: normal; font-style: normal; } #article-view pre code{ font-family: D2Coding, Menlo,Consolas,Monaco,monospace; } /* font setting e */​

 

폰트를 변경하기 전과 변경한 후의 화면을 비교해 보면, 특히 한글에 대해서 가독성이 향상되었습니다.

변경 전/ 변경 후

 

저장

스킨을 변경했다면, 꼭 변경된 내용을 저장해주셔야 합니다. 이는 작업한 내용을 안전하게 보관하고, 향후 스킨 변경이나 초기화가 필요한 경우에 대비하는 중요한 작업입니다.

1. [블로그 관리 > 꾸미기 > 스킨변경] 메뉴를 클릭합니다.
2. "보관" 버튼을 클릭합니다.
3. 나타나는 팝업에서 보관하려는 스킨의 이름을 입력합니다.
4. 보관함을 클릭하시면 저장한 내역을 확인할 수 있습니다.

 

고생하셨습니다! 블로그의 코드 블록 폰트를 새롭게 적용하는 과정을 함께 살펴봤습니다. 언제든지 궁금한 점이나 도움이 필요한 경우에는 댓글이나 문의를 통해 알려주세요.

감사합니다.