태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
용산철거민살인진압규탄

웹페이지 가독성 향상 '글자크기 조정기능 달기'

2010. 2. 16. 15:27
웹서핑을 하다보면, 글자가 너무 작거나 문단이 따닥따닥 붙어 있어서 읽고싶은 마음이 싹 달아나는 웹페이지들이 많음을 알수있다. 그런데 웹페이지는 종이 매체에 비해 눈에 주는 피로도가 더 심한 만큼 최적의 가독성을 제공할 필요가 있다.

정보들이 넘쳐나는 웹의 특성상 가독성이 떨어지는 웹페이지는 읽히는 문서가 될 확률이 희박해 질 수 밖에 없기 때문이다. 조금만 검색해 보면 비슷한 정보가 무한정 쏟아지는 정보의 바다를 놔두고 굳이 가독성 개판인 웹사이트를 펼쳐놓고 시력감퇴를 감수하면서 까지 시간을 낭비하고 있을 이유가 없다는 것이다.

이처럼 웹페이지의 가독성은 곧 경쟁력이며, 이 사실을 증명하는 사례는 무수히 많다. 각종 인터넷 매체들이 글자크기 조절 기능을 앞다퉈 제공하고 있는 것은 말할것도 없고 최근에 등장하는 대부분의 웹브라우저 역시 확대/축소 기능을 기본으로 내장하고 있는 추세이니 말이다.

브라우저가 확대 축소기능을 제공한다하여 웹문서의 글자 크기를 신경쓸 필요가 없다는 안일한 생각은 말아야 한다. 웹브라우저의 확대기능을 이용할 경우에는 레이아웃이 일그러지기 때문에 브라우징에 불편을 초래할 뿐 아니라, 웹 소비자들은 Ctrl+를 누르는 것조차 귀찮아 할만큼 아쉬울게 없는 인터넷의 주인이기 때문이다. 물론 주인을 노예부리 듯 하는 삼성같은 조폭 공급자를 최고 소비선호도로 화답할 정도로 등신스런 작자들이 한국 소비자들이긴 하지만, 당신은 삼성이 아니라 점을 상기해얄 것이다.



블로그에 글자크기 조절기능 설치하기

        └ HTML편집을 지원하는 태터툴즈 기준,
            
결국 개이버 노예를 자처하는 네이버블로거들은 해당사항 없다는 말.

(1) 티스토리 로그인 > 스킨 > HTML/CSS 편집

(2) 아래 스크립트를 skin.html의 <body>코드 바로 앞에 붙여넣는다.
<!-- 글씨 크기 조정 스크립트 -->
<script language='javascript'>
var CurrentFontSize = 10
var CurrentLineHeight = 10
function SetFontSize(SizeFlag) {
obj = document.getElementById("guljasize")
if (SizeFlag == 'B') {
CurrentFontSize = CurrentFontSize + 1
CurrentLineHeight = parseInt(CurrentFontSize*1.5)
obj.style.fontSize = CurrentFontSize + "pt"
obj.style.lineHeight = CurrentLineHeight + "pt"}
else {
if (CurrentFontSize>0) {
CurrentFontSize = CurrentFontSize - 1
CurrentLineHeight = parseInt(CurrentFontSize*1.5)}
obj.style.fontSize = CurrentFontSize + "pt"
obj.style.lineHeight = CurrentLineHeight + "pt"}}
function SetSummarySize() {
if (strlength == 'strshort') {
document.getElementById("img_more").Style.display = 'none';}}
</script>
<!-- 글씨 크기 조정 스크립트 -->

<body> 미주알 고주알 쏼라 쌸라~ </body>

(3) 적당한 위치에 글자크기 조절기를 설치한다.

<!-- 글자크기 조절기 -->
<a href=javascript:SetFontSize('B')>글씨 크게</a> <a href=javascript:SetFontSize('S')>글씨 작게</a>
<!-- 글자크기 조절기 -->
# 위치정렬을 원하면 <div align="right"> </div>로 묶어주면 된다. (예: align=right OR center)
# "글씨크게"를 <img src="./images/그림파일명" title="글씨크게">로 대체하면 그림으로 표시된다.

(4) 글자크기 조정이 적용될 대상을 지정한다.

본문에만 적용하려면 '##_article_rep_desc_##'코드를 다음과 같은 span코드로 감싸주면 된다.
<!-- 글자크기 조절범위 -->
<span id="guljasize"> </span>
<!-- 글자크기 조절범위 -->


글자 크기 조절이 가능하게 해놓은 정도로는 방문자를 만족시킬 수 없다. 기본 글자크기 자체가 시원시원해야 하고, 문단간격도 적절해야 보다 높은 가독성을 구현할 수 있기 때문이다.


(5) 블로그 기본 글자크기와 문단간격 조절하기

'style.css'의 '.article'이란 치환자를 찾아 다음과 같이 변경한다. =>티스토리 치환자 가이드 참조
.article { font-size:1.12em; line-height:165%; margin-top:18px; text-align:justify; }
   └ 폰트-사이즈:13px이상으로(em은 상대적 크기, px은 절대적 크기);
   └ 라인하이트:150%이상; 마진탑:본문상단여백; 텍스트-얼라인:justify(문단의 좌우를 가지런히 배치)

(6) 블로그 댓글 글자크기와 문단간격 조절하기

내가 즐겨찾는 어느 블로그의 댓글란을 갈무리한 그림이다. 이건 뭐 읽으라고 달아놓은 건지, 방문자들의 눈을 고문하려고 달아놓은건지 구분이 안갈 정도로 형편없는 가독수준을 보이고 있다.

이런 형편없는 가독성을 가지 스킨이 많은 이유를 추측해 보자면, 외국의 스킨을 그대로 배껴 티스토리에 맞게 적당히 변경해서 올리는 날로먹는 스킨 개발자들이 많은 탓이 아닌가 싶다. 영문의 경우는 기본 글자크기나 기본 문단간격으로도 충분한 가독성이 확보되기 때문에 굳이 폰트값을 지정해 주지 않는 경우가 다반사란 점이 나의 추측을 뒷받침하기 때문이다.

'style.css'의 '.cmtcontent'값을 다음과 같이 변경/추가한다.(라인하이트값이 없으면 추가 해주자.)
.cmtcontent { font-size:1.1em; line-height:150%; }



㉿ 그러나, 높은 가독성을 제공해줘도 구재불능 난독증 환자는 줄어들지 않는 곳이 개한민국이라는 거..


법치살해범 삼성을 불매로 응징하기는 커녕 열혈 소비질로 방조하는 꼬레안의 방조범 습성을 지적하는 글에, 이따구 동문서답을 싸지르는 작자가 한둘이 아니다. OECD 가입 국가중 일상문서 독해력 꼴등의 위력을 거의 매일 체감하게 되는 대한민국인 거다.

, , , , ,

  1. 글자 크기 조절은 브라우저에 맡겨야 하는 거 아닐까요? 예를 들어 이북을 보는데 글자 크기 조절 버튼이 기계의 OS나 하드웨어에 있지 않고, 각각의 이북에 있다면 답답하겠죠. Firefox나 IE 모두 단축키로 손쉽게 글자크기 조절이 되는 걸로 알고 있습니다.

  2. Blog Icon
    고찰

    마지막에있는 무개념 삼성소비자는 난독이란스킬까지 배운놈이군요

    답이없는거같습니다 ㄷㄷ;

  3. Blog Icon
    나무도둑

    ㅋ 저에게는 해당사항이 없군요. 뭐 어차피 등신 꼬레안들 혈압올리기 위해 운영하는 블로그이니 가독성 향상이니 뭐니 하는 건 전혀 고려할 필요가 없겠지만..ㅋㅋ

    그건 그렇고 저도 꿈틀님처럼 컴터를 좀 배워서 멋진 블로그를 운영할 수 있어야 할텐데...그 날이 언제올지..ㅠ.ㅠ

  4. Blog Icon
    배움

    글 잘읽었습니다.

    아_ 뭔가 좀 물어보기 무서운 분위긴데요..
    글자크기조정기능 달기 글 보고 따라 하는데 안되네요ㅠ

    크게 작게 이미지까지는 뜨는데 클릭하면 "페이지오류입니다"하고 안되네요^^;;

  5. 무개념 삼성소비자는 삼성과 엘지가 파나소닉과 소니에게 이미 당한 걸 모르는 모양이네요. 소니가 작살 난 적이 없고, 그냥 안정적으로 가고 있는 걸 모른가봐요...

국가대표 범죄조직-삼성의 장물아비는 삼성소비자 년놈들
삼성소비자 년놈들이 용산참사의 배후가 삼성이란 사실을 모른 체하는 이유: