수고 하십니다.
사이트가 나이드신 분들이 이용하시다 보니
텍스트를 크게 보기하면 폰트 사이즈가 커지고
작게보기를 클릭하면 폰트가 작아지게 하는 방법이 궁금합니다.
아래 사이트 같은 방식인데
그누보드에 어떻게 설정을 해야 하는지 모르겠습니다.
조언 좀 부탁드립니다.
감사합니다.
답변 2개 / 댓글 2개
먼저 뷰페이지에 이를 수정을해볼수가 있습니다.
첫째 이런식으로먼저 어썸폰트아이콘으로 먼저 확대 및 축소버튼을 만들어주고.
<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>
이런식으로 처리해볼수가 있을것입니다. 참고하시고 해보세요
답변에 대한 댓글 2개
ifelse그누보드는 /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가 있을거고 조정하실 수 있습니다.
모바일 같은경우 헤더에 돋보기 검색을 누르면 나오는 화면 하단에 있습니다.
답변을 작성하려면 로그인이 필요합니다.
소스를 뷰페이지 넣어 봤지만 반응을 안 합니다.
링크가 걸리지 않아요.