텍스트 크기 조정이란?
텍스트 크기 조정을 통해 외부 장애가 있는 경우 내용의 수용성과 유용성을 유지하면서 보조적 혁신 없이 내용의 크기를 확장할 수 있습니다. 텍스트 크기를 조정하는 기술을 제공하면 웹 콘텐츠가 WCAG 2.0 AA 지침 1.4.4를 충족할 수 있습니다. 규칙 1.4.4에서는 텍스트 크기를 첫 번째 크기의 최대 200%까지 조정할 수 있다고 예상합니다. 이 규칙은 크기 조정을 제공하는 특정 기술을 보여주지 않으며 '최상의' 접근 방식이 결정되지도 않습니다.
이점
다음은 텍스트 조정 기능을 추가할 경우 얻어지는 이점입니다.
- 사용자는 설정을 변경하기 위해 페이지 컨트롤이 어디에 있는지 알 필요가 없습니다.
- 클라이언트 텍스트 치수 설정은 프로그램에서 전체적으로 한 번만 설정할 수 있으며 각 사이트 전제에 대해 설정할 필요가 없습니다.
- 대부분의 경우 단일 템플릿만 필요합니다.
- 제한된 크기의 프리젠테이션 및 소형 가젯에 표시되면 콘텐츠가 자연스럽게 리플로우될 수 있습니다.
- 콘텐츠는 명시적 텍스트 크기 방법을 활용하여 결정된 과거 추가 항목의 크기를 조정할 수 있는 기능을 제공할 수 있습니다.
- 페이지 디자인 및 설정에 대해 많은 명령을 제공합니다.
- 클라이언트는 프로그램의 확대/축소 및 텍스트 크기 설정에 대해 알 수 없습니다.
- 주어진 프로그램의 기본 텍스트 크기에 의존하지 않기 때문에 수많은 프로그램에 대한 도움말을 제공합니다.
- 모든 프로그램 확대/축소 하이라이트에서 안정적으로 작동합니다.
- 페이지에 다양한 텍스트 크기를 제공해야 한다는 의무를 전달합니다.
추가방법
이제 다음 단계를 따라 튜토리얼을 시작하겠습니다.
1단계
- 우선 로그인하세요. 블로거 대시보드.
- 블로거 대시보드에서 테마를 클릭하세요.
- '맞춤설정' 버튼 옆에 있는 화살표 아이콘'▼'을 클릭하세요.
- HTML 편집을 클릭하면 편집 페이지로 리디렉션됩니다.
- 검색(Cntrl + F)
</head>또는</head> - 이제
</head>또는</head>바로 위에 아래 CSS 코드를 붙여 넣습니다.
<style>
/* Text Resizer */
.Tresizerts{position:fixed;right:25px;bottom:150px;background:#ffffff;box-shadow:0 0 5px #000000;border-radius:5px;box-sizing:border-box;z-index:1;transition:all .3s linear}
.darkMode .Tresizerts{background:#121212;color:#ffffff;box-shadow:0 0 5px #ffffff}
#Ifont,#Dfont{font-size:18px;padding:10px;box-sizing:border-box;background:#ffffff;color:#000000}
.darkMode #Ifont,.darkMode #Dfont{background:#121212;color:#ffffff;border-color:#ffffff}
#Ifont{border-radius:5px 5px 0 0;border-bottom:.5px solid #000000}
#Dfont{border-top:.5px solid #000000} #Dfont{border-radius:0 0 5px 5px}
#Ifont:hover,#Dfont:hover{background:linear-gradient(to right,#f81894,#0000ff);color:#ffffff}
</style>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
2단계
- CSS 코드를 붙여 넣은 후
- 검색(Cntrl + F)
</body>또는</body> - 이제
</body>또는</body>바로 위에 아래 HTML 및 자바스크립트 코드를 붙여 넣습니다. - 완료
<b:if cond='data:view.isPost'>
<div class='Tresizerts'>
<div id='Ifont'>A+</div>
<div id='Dfont'>A-</div>
</div>
</b:if>
<script>/*<![CDATA[*/
$("").ready(function(){$("#Ifont").click(function(){curSize=parseInt($(".postBody").css("font-size"))+1,curSize<=20&&$(".postBody").css("font-size",curSize)}),$("#Dfont").click(function(){curSize=parseInt($(".postBody").css("font-size"))-1,curSize>=10&&$(".postBody").css("font-size",curSize)})});
/*]]>*/</script>
3단계
마지막으로 이 아이콘을 클릭하여 변경 사항을 저장하고 확인합니다.
결론
위 게시물은 블로거에서 텍스트 크기 조정 기능을 추가하는 방법에 대한 튜토리얼이었습니다. 어떤 섹션에서든 문제가 발생하거나 질문이 있는 경우 댓글에 문의해 주세요. 감사합니다.