티스토리 블로그 꾸미기 본문 텍스트 확대/축소/인쇄 버튼 만들기

국내외 큰 언론보도 사이트를 보다보면 본문의 텍스트 사이즈를 확대/축소 하고 인쇄를 할수 있거나 폰트를 변경할 수 있는 기능들을 쉽게 찾아 볼 수 있습니다. 이는 접근성에 관련한 기능들이며 작은 글씨가 보기 어려우신 노인 그리고 시각 장애우를 위한 기능들입니다.

구현 하는 방법은 여러가지가 있지만 소스를 간결하게 하기 위해 제이쿼리(Jquery)를 이용해 작성하였습니다.

위에 언급한 기능은 현재 보고 계신 제 블로그에도 적용되어 있는 기능들이며, 아주 쉽게 적용이 가능하니 따라해 보세요.

먼저 관리자 HTML/CSS 페이지를 열어 </head> 위쪽에 제이쿼리를 불러옵니다.

제이쿼리 불러오기

아래는 제이쿼리를 사용해 폰트의 사이즈를 제어하는 스크립트입니다.

원하는 곳 어디든 소스를 삽입하셔도 됩니다만, 일반적으로 스크립트는 소스페이지 제일 아래부분 바디가 끝나는 부분에 삽입해 주는게 가장 좋습니다.

본문 폰트사이즈 제어 스크립트

위의 스크립트를 HTML/CSS 페이지 skin.html 제일 하단 </body> 위에 삽입해 주세요.

해당 스크립트는 티스토리를 위해 작성된 코드이므로 혹 다른 사이트나 블로그를 위해 삽입하실거라면 12번 18번줄에

.article 이라는 클래스명을 원하시는 클래스명을으로 변경해주시면 되겠습니다.

인쇄 버튼 동작시 본문페이지만을 인쇄하기 위해 본문이 출력되는 div에 id값을 하나 설정해줍니다.

 본문출력 치환자 ##_article_rep_desc_## 

자 이제 본문에 위에 스크립트를 동작시킬 버튼을 만들어보겠습니다.

버튼출력 HTML 코드

확대축소인쇄

저는 span 태그에 클래스와 아이디를 주었지만, 개인 취향에 따라 div,li 태그를 이용해 작성하셔도 괜찮습니다.

버튼이 출력되었으면 하는 위치에 삽입해주세요. 개인적으로 본문 제목 아래쪽에 출력되는걸 권장합니다.

이제 버튼을 꾸며주고 정확한 위치를 잡아주기 위해 CSS를 작성해보겠습니다.

아래의 코드를 HTML/CSS 페이지 style.css에 삽입해 주세요.

버튼출력 CSS 코드

/* 본문 텍스트 제어 */
#zoomin {
	width:23px;
	height:25px;
	display: inline-block;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	background: url(images/ico_comm.png) no-repeat;
	text-indent: -9999px;
	vertical-align: middle;
	background-position: 0 0;
        cursor:pointer;
        margin-left:10px;
}
#zoomout {
	width:23px;
	height:25px;
	display: inline-block;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	background: url(images/ico_comm.png) no-repeat;
	text-indent: -9999px;
	vertical-align: middle;
	background-position: -23px 0;
        cursor:pointer;
}
#aprint {
	width:24px;
	height:25px;
	display: inline-block;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	background: url(images/ico_comm.png) no-repeat;
	text-indent: -9999px;
	vertical-align: middle;
	background-position: -46px 0;
        cursor:pointer;
}
@media print {
body div {display:none;}
body .printable {display:block;}
}

자 이제 마지막으로 css에 사용될 스프라이트 버튼 이미지 파일을 다운받아 HTML/CSS 페이지 > 파일업로드를 이용해 업로드 해주면 끝이납니다.

위의 이미지를 따로 저장하셔서 업로드 해주세요.

궁금하신 점은 댓글로 달아주시면 답변 드리겠습니다.