일단 웹 접근성 향상을 위한 폰트 관련 기능을 어떻게 사용하는지 모르는 분들이 많을 것 같아, 그 부분부터 먼저 설명을 드려야겠습니다.


사실 저는 현직 웹퍼블리셔인데도 지금까지 그 방법을 모르고 있었습니다. ㅡㅡ; 우리 회사에 제가 하는 일을 같이 하는 사람이 없으니 누구한테 배울 수도 없는 노릇이고 말이죠.




1. 인터넷 익스플로러에서


이건 그나마 아는 사람들이 좀 계실 겁니다.



메뉴에서 <보기> 들어가서 <텍스트 크기> 를 설정해 주면 됩니다.


익스플로러에선 5단계가 있지요.


2. 크롬에서


크롬에서는 단계 구분 없이 자유롭게 폰트크기 설정이 가능한 대신, 폰트를 설정하는 방법이 조금 더 어려운 편입니다.



크롬 메뉴에서 <설정>에 들어갑니다.



<설정>누르면 나오는 메뉴에서 하단의 <고급 설정 표시>를 누릅니다.



아래쪽의 <웹 콘텐츠> 부분을 찾아서 <글꼴 맞춤 설정>을 눌러 주십시오.



여기서 표준 글꼴의 사이즈를 바꿀 수 있습니다.




참고로 구글 도움말에도 이 부분 설명이 꽤 잘 되어 있습니다.


https://support.google.com/chrome/answer/96810?hl=ko






3. 부끄럽지만 알려야 할 내용


부끄럽지만 지금까지 제가 만든 티스토리 스킨 nQuark는 최근까지 이러한 설정에 따라서 폰트 크기가 바뀌지 않았습니다.


제가 이 방법을 아예 모르고 있었으니, 확인을 하지 못했던 것이지요.


그래서 nQuark 2.1 버전부터 이 부분을 적용, 지원하게 되었습니다.


이미 웹 접근성 부분을 이론적으로는 알고있었고, 고려를 하고 있었으므로, 한 부분만 코드를 바꾸면 적용 되는 거였는데 말입니다.


바로 이 부분입니다.


본문 공통 부분에서


이전 설정 (~nQuark 2.0)


body,th,td,input,select,textarea,button,h1,h2,h3,h4,h5,h6 {font:12px/1.5 '돋움',dotum,Tahoma,AppleGothic,Sans-serif;color:#7b7366;}


현재 설정 (nQuark 2.1~)


body,th,td,input,select,textarea,button,h1,h2,h3,h4,h5,h6 {font:0.8em/1.7 '돋움',dotum,Tahoma,AppleGothic,Sans-serif;color:#7b7366;}


이번에는 폰트 크기만 상대치로 바꾼 게 아니라, 기본 폰트의 line-height값이 좀 작은 것 같아 늘리기도 했습니다.


이 부분을 제외한 다른 부분은 모두 em단위이니, 기본적으로 거의 모든 부분이 비율적으로 적용이 될 것입니다만, 몇몇 부분은 비율이 안맞아서 크기 조정이 필요할 수 있습니다. (nQuark 2.1은 그런 크기조정을 다 해 놨습니다.)


만약 nQuark 2.0 이하 버전에서 웹 접근성 향상을 위한 폰트 작업을 하고 싶으시다면, style.css에서 위의 부분에 해당되는 부분을 바꾸시면 되겠습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 2016.01.14 09:24  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 책덕후 화영 2016.01.14 09:45 신고  댓글주소  수정/삭제

      아... 그건... 유튜브 소스를 조금 바꿔서 넣으셔야 합니다. <p>태그 등의 태그 안에 넣는게 아니라 아이프레임만 넣으면 이상하게 보일겁니다. 조만간 좀 더 자세한 가이드라인을 설명드리겠습니다. 유튜브를 반응형으로 만들기 위한 소스코드 때문인데, 미리 말씀드리지 못해서 죄송합니다.

    • 책덕후 화영 2016.01.14 10:10 신고  댓글주소  수정/삭제

      기술적인 관련내용은 다음과 같습니다.

      http://blog.koyeseul.net/442

    • 책덕후 화영 2016.01.14 10:16 신고  댓글주소  수정/삭제

      이 문제에 대한 해결 방법이라면... 코딩을 해봐야겠지만, 지금 상황이라면 가능할 것 같습니다. 그때는 내공이 부족했구요 ㅡㅡ;

    • 아더킹 2016.01.14 10:36 신고  댓글주소  수정/삭제

      앞으로 소스를 바꿔서 넣는건 문제가 안되는데....
      여태까지 올렸던 유튜브는 그럼 어찌되는가요?
      그게 좀 걸리네요..

    • 책덕후 화영 2016.01.14 10:38 신고  댓글주소  수정/삭제

      그죠? 이제까지 넣었던 유투브 소스코드가 많으면 바꾸기가 좀 곤란하실 겁니다. 저는 처음부터 맞춰서 넣었던지라 제 블로그에서는 어지간한 동영상 들어간 포스팅 다 정상적으로 보일테지만... 다음 버전 만들때 보완할 수 있도록 작업해 보겠습니다. 죄송해요.

    • 책덕후 화영 2016.01.14 22:49 신고  댓글주소  수정/삭제

      음... 일단 해결방법은 찾았습니다. 근데 배포하기까지는 시간이 좀 걸릴 것 같아서 일단 간단히 방법만 전달해 드릴게요.
      스킨의 html 코드 부분 찾아 들어가셔서 다음 구문을 찾습니다.

      $(this).parent().addClass("embed-container");

      위의 코드 없애고 그 자리에 대신 이 코드를 넣습니다.

      $(this).wrap("<p class='embed-container'></p>");

      이 방법으로 해결되실 겁니다. 직접 테스트 해 봤습니다.
      만약 이해가 안되신다거나 적용이 잘 안되시면, 이 부분이 적용된 소스코드가 포함된 nQuark 스킨 작업 진행중인 파일이 있으니, 비밀글로 이메일주소 남겨주시면 스킨 파일 첨부해서 보내드리겠습니다.

    • 아더킹 2016.01.15 10:31 신고  댓글주소  수정/삭제

      ㅋ 감사합니다.
      제 테스트 블로그에 적용해보니 정상적으로 되네요.

티스토리 툴바