본문 텍스트 크게 하기
본문
수고 하십니다.
사이트가 나이드신 분들이 이용하시다 보니
텍스트를 크게 보기하면 폰트 사이즈가 커지고
작게보기를 클릭하면 폰트가 작아지게 하는 방법이 궁금합니다.
아래 사이트 같은 방식인데
그누보드에 어떻게 설정을 해야 하는지 모르겠습니다.
조언 좀 부탁드립니다.
감사합니다.
답변 2
그누보드는 /js/common.js에
function font_resize(id, rmv_class, add_class, othis)
{
var $el = $("#"+id);
if((typeof rmv_class !== "undefined" && rmv_class) || (typeof add_class !== "undefined" && add_class)){
$el.removeClass(rmv_class).addClass(add_class);
set_cookie("ck_font_resize_rmv_class", rmv_class, 1, g5_cookie_domain);
set_cookie("ck_font_resize_add_class", add_class, 1, g5_cookie_domain);
}
if(typeof othis !== "undefined"){
$(othis).addClass('select').siblings().removeClass('select');
}
}
라는 스크립트 펑션이 있고 pc나 모바일 헤더와 푸터에 관련 소스가 적용되어 있습니다. 쿠키로 클래스를 추가시켜 해당 컨테이너 id에 글자 크기를 크게하거나 작게하는 기능입니다.
글자크기는 css에 추가되는 클래스를 찾아보시면 font-size가 있을거고 조정하실 수 있습니다.
모바일 같은경우 헤더에 돋보기 검색을 누르면 나오는 화면 하단에 있습니다.
먼저 뷰페이지에 이를 수정을해볼수가 있습니다.
첫째 이런식으로먼저 어썸폰트아이콘으로 먼저 확대 및 축소버튼을 만들어주고.
<div class="font-controls">
<i class="fas fa-search-plus" id="increase-font"></i>
<i class="fas fa-search-minus" id="decrease-font"></i>
</div>
둘째 뷰페이지의 본문 내용처리 부분의 요소를 이를 반영되게 처리를 하고자한다면
예를들어서 다음과같은 본문내용요소로 처리되어있다면? <div id="bo_v_con">
<script>
const content = document.getElementById("bo_v_con");
const increaseFontBtn = document.getElementById("increase-font");
const decreaseFontBtn = document.getElementById("decrease-font");
let fontSize = 16; //기본디폴트크기
increaseFontBtn.addEventListener("click", () => {
if (fontSize < 24) { // 최대 크기
fontSize += 2;
content.style.fontSize = fontSize + "px";
}
});
decreaseFontBtn.addEventListener("click", () => {
if (fontSize > 12) { // 최소 크기
fontSize -= 2;
content.style.fontSize = fontSize + "px";
}
});
</script>
이런식으로 처리해볼수가 있을것입니다. 참고하시고 해보세요
답변 감사합니다.
소스를 뷰페이지 넣어 봤지만 반응을 안 합니다.
링크가 걸리지 않아요.
기본 뷰페이지에서 #bo_v_con {font-size: 16px;} 이요소가 잇는지확인하시고 기본 폰트크기를 설정해보시기바랍니다. 반영을안한다면 관련 오류를 확인해보시기 바랍니다.
