CSS class를 통해 글 일부의 글꼴만 지정하는 방법이 있나요?

제 블로그에서 언어 관련 주제를 다루다보니 거의 모든 글마다 국제 음성 기호나 그리스 문자, 키릴 문자 등 특수 문자를 사용합니다. 브라우저마다 글꼴 처리 방식이 다르다 보니 이런 특수 문자가 깨져서 나온다는 사람들이 많습니다.

그래서 스킨의 CSS를 편집해서 필요한 특수 문자를 지원하는 글꼴 몇 개를 class로 지정하고 본문을 쓸 때 그 class를 불러올 생각을 했습니다. 그래서 스킨의 CSS 편집까지는 했는데 새글 쓰기 상자에서 html 입력을 통해 아무리 노력해도 새로 만든 class를 불러올 수가 없었습니다. html 입력 창에서 에디터 입력 창으로 돌아오면 아무리 span 지정을 해도 글꼴 크기를 +0으로 하는 코드로 자동 변환이 되었습니다.

제가 CSS 문외한이다 보니 제가 CSS 편집을 제대로 했는지도 잘 모르고 글을 쓸 때 CSS에서 정의한 class를 임의로 불러올 수 있는지도 잘 모르겠습니다. 이게 가능한지요?

이게 불가능하다면 CSS를 사용하지 않고서도 글 일부에 대해 글꼴 목록을 지정하는 방법이 있나요? 예를 들어 글꼴1, 글꼴2, 글꼴3의 목록을 지정하여 사용자 시스템에 글꼴1이 있으면 글꼴1을 쓰고 없다면 글꼴2를, 글꼴2도 없다면 글꼴3을 쓰도록 지정하는 것이 가능한지 알고 싶습니다. 고수님들의 조언을 기다리겠습니다.

트랙백 주소 : http://qna.egloos.com/tb/5879
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Commented by imc84 at 2009/02/24 03:17
가능합니다. 끝소리님께서 CSS를 어느정도 다루시는지 제가 잘 모르니 간단히 예시하고 설명해 보겠습니다. 체계적인 참조용 사이트를 추천해 드리자면 http://www.w3schools.com/css/default.asp 이곳이 도움이 될 것 같습니다. 각 항목에 대한 예제를 브라우저에서 실행하고 직접 수정해 볼 수 있습니다.

다음은 스킨 편집에서 css 영역에 추가할 부분입니다.
----------------------------------
.temp { font-family : 글꼴이름 ; font-size : 글꼴크기 ; font-weight : 글꼴굵기 ; }
----------------------------------
맨 앞 .temp에서 temp라는 문자열은 아시겠지만 class 이름입니다. temp 문자열 앞의 .(구두점)은 temp라는 것이 class임을 선언해 줍니다.

이어 공백문자 하나 다음에 나오는 중괄호 사이에 temp로써 지정할 CSS 속성(property)들을 넣으면 됩니다. font-family 등은 속성명이며, 콜론(:) 다음에 오는 문자열은 속성값(value)입니다. 각 속성 사이, 즉 속성값이 끝난 뒤에는 세미콜론(;)을 써서 다음에 오는 속성명과 구분합니다. 다음은 속성에 대한 각론입니다.

font-family 속성은 지정할 글꼴 이름을 쓰시면 되는데, 로마자 표기 이름을 알고 계시면 가능한한 그쪽을 쓰시는 것이 좋습니다. 아시겠지만 한글글꼴이라도 윈도 기본 글꼴들은 로마자 표기에 대응하는 이름이 따로 있습니다. 글꼴 이름을 지정할 때 공백문자가 포함되어 있다면 큰따옴표("")를 씌워 주어야 합니다.

font-size 속성은 문자로 상대적인 크기를 지정하거나, 숫자로 글꼴 크기(높이)를 정합니다. 숫자로 지정할 때 글꼴 크기 단위는 em, pt, px 따위가 있는데 글꼴만이 아니라 CSS에서 거의 모든 수치 입력에 적용이 되니 단위에 관한 자세한 설명은 따로 찾아보시는 것이 좋겠습니다.
em 단위는 현재 글꼴이 적용될 태그의 부모 영역에 견주어, 1em이면 동일, 1 초과 혹은 미만 단위일 때는 그 배율로 확대, 축소합니다.
pt 단위는 포인트, 흔히 워드프로세서에서 쓰는 것과 같습니다. px 단위는 픽셀, 모니터의 해상도 단위와 같습니다. em과 pt 단위는 브라우저에 따라서 같은 수치도 조금씩 다르게 그려줍니다. 하지만 일반적으로 한글 글꼴의 9pt 는 13px과 비슷합니다.
숫자가 아닌 문자로 지정하는 방법은 위 알려드린 참고 사이트에서 찾아보시면 되겠습니다.

font-weight는 굵기입니다. normal, bold, bolder, lighter 따위로 기본 굵기에 대한 상대치를 줍니다. 숫자 지정도 있는데 저도 잘 모릅니다.


다음은 글쓰실 때 추가하실 부분입니다. span 태그를 쓰실 듯하니 예시해 보겠습니다.
----------------------------------
<span class="temp">temp class를 지정할 문자열</span>
----------------------------------


하나 덧붙이면, class 이름인 temp 부분에 해당할 문자열이 스킨 내부에 원래 존재하는 다른 class와 중복되지 않는지 확인하고 지정하시는 것이 좋을 듯합니다. 이렇게만 하시면 됩니다. 도움이 되었길 바랍니다.
Commented by imc84 at 2009/02/24 03:35
어이쿠.
--------
html 입력 창에서 에디터 입력 창으로 돌아오면 아무리 span 지정을 해도 글꼴 크기를 +0으로 하는 코드로 자동 변환이 되었습니다.
--------
이게 대체 무슨말씀인지 알 수 없었는데, 익스플로러 6에서 저장된 글을 불러와 html 모드에서 클래스 지정한 뒤 에디터 입력으로 바꾸고 다시 html모드로 확인해 보니

<span class=temp>temp class를 지정할 문자열</span>가

<font size="+0">temp class를 지정할 문자열</font>

이렇게 바뀌어 있네요. 파이어폭스 브라우저를 사용하고 있는데 이런 현상이 없어서 몰랐습니다. 익스플로러 브라우저의 문제이거나 이글루스 에디터 모드가 span 태그를 잘못 인식하는 버그인 것 같습니다.

웬만하면 span 태그를 지정한 상태에서는 html 모드로 작성을 끝내시는 것이 좋을 것 같습니다만, 다른 해결방법이 있으니 트랙백 하겠습니다.
Commented by 끝소리 at 2009/02/24 04:03
imc84님 정말 감사드립니다. 덕분에 문제가 해결됐습니다.

말씀하신대로 CSS를 편집하여 class를 추가했는데 글을 쓸 때 span 태그가 입력이 안 되더군요. html 입력 모드에서 아무리 span 태그를 입력해도 자동적으로 엉뚱한 font 태그로 대체되고... 그래서 임의 class를 불러오는 span 태그 입력 자체가 불가능한 건가 하고 질문을 올렸던 것입니다.

그래서 덧글 쓰신 것을 보고 일단 제가 엉터리로 만들어 놓았던 CSS class를 좀 제대로 손질했습니다. 제가 CSS에 대해서 지극히 이론적인 내용 밖에는 아는 것이 없거든요. 그 다음 다시 span 태그 입력을 시도해봤는데 계속 안 되는 것이 아닙니까.. 그래서 내가 대체 뭘 잘못하고 있나 생각하다가 문득 다른 브라우저를 쓸 생각을 했습니다. 인터넷 익스플로러에서 무슨 문제가 있는 것이 아닌가 해서요.

그래서 파이어폭스로 시도했더니 span 태그가 아무 문제 없이 입력이 되는 겁니다.

결국 핵심은 브라우저 문제...

IE에서 이 문제가 왜 발생하는지는 모르겠지만 어쨌든 파이어폭스 덕분에 문제를 해결했습니다. 일단 가장 최근 글에 적용했더니 익스플로러에서도 특수 문자가 깨지지 않는 것 같습니다. 다른 컴퓨터에서도 테스트 해보는 것이 안전하겠지만... 그런데 크롬에서는 계속 특수 문자가 깨지더군요..

어쨌든 자세하게 설명해주신 덕분에 앞으로 CSS 잘 활용할 수 있을 것 같습니다. 감사합니다.
Commented by mineral cosmetic at 2010/01/19 06:55
mineral cosmetic

:         :

:

비공개 덧글

◀ 이전 페이지          다음 페이지 ▶

이곳은 이글루스 QnA입니다.

- 누구나 질문하고, 누구나 댓글과 트랙백으로 답변하실 수 있습니다.