티스토리 댓글 입력란의 글꼴을 맑은 고딕으로 변경시키는 방법은 무엇일까?

다른 블로그들의 글을 보고 댓글을 달 때, 어떤 블로그는 굴림체로 작성되어지고, 어떤 블로그는 맑은 고딕으로 이뿌게 작성되는 것을 보고 갑자기 의문이 들었습니다. 내 블로그에 댓글을 달면, 어떤 글꼴로 표시가 될까?

■ 굴림체로 작성되어지는 내 블로그 댓글

제 블로그에 들어가서 댓글을 작성해보니, 굴림체로 작성이 되어졌습니다. 저는 기본적으로 맑은 고딕으로 작성되는 줄 알았던 터라... 적잖은 멘붕 상태로 돌입 직전이었죠... 그래서 간단하게 바꾸기 위해 해당 컨트롤의 적용 CSS를 확인해보고 싶어졌습니다. 일단 CSS가 어떻게 작성되었는지를 보려면, id 는 무엇인지, class 는 적용되어 있는지, 태그의 종류는 무엇인지... 여러가지를 염두해서 검색을 해야 합니다. 

■ 일단 F12 키를 눌러보자...

제 블로그는 오른쪽 마우스 클릭이 되지 않는 블로그입니다. 설정을 풀었는데도 어떻게 된건지 클릭이 되지가 않네요...OTL... 그래서 저는 과감하게 F12 기능키를 눌러서 해당 내용을 확인해보기 시작했습니다. 일단 F12 키를 누르게 되면, Elements 를 확인할 수 있는 개발자도구가 나타나며, 거기서 Ctrl + F (검색 단축키)를 눌러서 textarea 를 검색하기 시작했습니다. textarea를 검색하는 이유는 댓글을 작성되는 컨트롤은 한줄만 작성되는 input 컨트롤이 아닌 여러 줄을 입력 가능한 textarea 컨트롤이기 때문이죠. 그래서 저는 commentWrite 클래스 내부의 textarea 태그가 해당 댓글 컨트롤인 것을 검색했습니다. textarea 를 선택하게 되면, 제가 작성했던 댓글 컨트롤 부분이 파란색으로 되는 것을 확인할 수 있을 겁니다.

■ HTML 소스의 위치를 검색하자...

관리페이지에서 바로 찾을 수 있지만, 설명을 위해서 EditPlus 에 해당 소스를 복사하고, 찬찬히 살펴보도록 하죠... 일단 textarea 를 검색할 경우 여러개가 나올 수 있습니다. 대표적인 textarea 는 댓글과 방명록 부분인데요. 이것을 어떻게 구분하는가? 위에서 한 것 처럼 우리는 commentWrite 클래스를 가진 div 태그를 발견했었죠? 그래서 commentWrite 를 클래스로 적용되는 div 태그 하위 태그 중의 textarea 를 찾으면 되겠습니다. 말이 계속 어려워지는데요. 아무튼 guest 가 들어간 것이 아닌 rp_input_comment 를 이름으로 가지는 textarea 를 찾으면 되겠습니다.

■ 그러면 CSS 을 수정하자...

CSS 를 확인하게 되면, 블로그마다 다를 수는 있지만, 제 블로그의 경우는 commentWrite 클래스 하위 textarea 태그가 댓글 컨트롤인 것을 확인했습니다. 그러면 CSS 에서 확인해보면, .commentWrite textarea 라는 부분을 찾을 수 있는데요. 이것은 commentWrite 클래스를 가진 태그 하위에 있는 textarea 태그에 해당 CSS 를 적용하라... 라는 암묵적 해석을 할 수 있습니다. 그러면, 우리는 댓글을 맑은 고딕으로 변경하기 위해 CSS 하나를 추가하도록 하죠... 바로 font-family 입니다. 글꼴을 설정할 수 있는 CSS 인데요. 해당 컴퓨터에 맑은 고딕 글꼴이 설치되어 있다면, 정상적으로 보일 것인데요. 보통 WinXP 혹은 Win7 에서는 맑은 고딕이 기본적으로 설치되기 때문에 별 걱정은 안해도 될 것 같네요...

■ 적용된 것을 확인해보자...

자... 댓글을 작성하게 되니, 맑은 고딕으로 잘 작성되는 것을 보실 수 있을 것입니다. 다른 블로그에서는 이뿌게 작성되는 것을 부러워하신 분들도 계실텐데요... 약간의 설정으로 티스토리 댓글 입력 부분을 이뿌게 꾸며보세요...^^

이상, 초매였습니다.