사이트 관리
게시판 본문에 포트 크기 조정 버튼을 넣어보자 ( + - 기본 )
페이지 정보
작성자
WilliamCho쪽지보내기
메일보내기
홈페이지
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 2회
작성일 25-06-30 17:32
본문
반영하고자 하는 게시판 스킨 중 'view.skin.php' 파일과 그 게시판의 'style.css' 두개를 수정해야 한다.
1. view.skin.php 수정
<script>
(function () {
const fontSize = localStorage.getItem('fontSizePercent') || '150';
document.write(`
<style>
#bo_v_con {
font-size: ${fontSize}%;
}
</style>
`);
})();
</script>
본문 최 상단에 <script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script> 스크립트나 이 비슷한 그누보드를 소환할 때 바로 그 밑에 넣어주면 된다. 역할은 본문 최초 로딩 시, 정해진 폰트 크기로 본문을 불러오게 하는 역할이다.
그리고, 본문 내용시작을 의미하는 <div id="bo_v_con" > 부분을 찾아서 바로 위에 버튼을 삽입해주도록 한다. 혹시 본문 이름이 저게 아니라면 F12를 눌러 콘솔창에서 올바른 이름을 찾아가도록 하자.
<!-- 본문 글자크기조절 토글버튼 -->
<div class="font-size-wrapper">
<div id="fontSizeControls">
<button id="decreaseFont" type="button">-</button>
<button id="increaseFont" type="button">+</button>
<button id="resetFont" type="button">기본</button>
</div>
</div>
<!-- 본문 글자크기조절 토글버튼 끝 -->
그리고 파일 최 하단에는 대부분 자바 스크립트들이 모여 있는데, 거기에도 몇가지를 추가해 주자.
<script>
document.addEventListener('DOMContentLoaded', function () {
const content = document.querySelector('#bo_v_con'); // 본문 ID
let currentSize = parseInt(localStorage.getItem('fontSizePercent')) || 150; // 초기 크기 설정
const updateFontSize = () => {
if (content) {
content.style.fontSize = currentSize + '%'; // 폰트 크기 설정
localStorage.setItem('fontSizePercent', currentSize); // 로컬 저장
}
};
// 글자 크기 증가
document.getElementById('increaseFont').addEventListener('click', () => {
if (currentSize < 300) {
currentSize += 16;
updateFontSize();
}
});
// 글자 크기 감소
document.getElementById('decreaseFont').addEventListener('click', () => {
if (currentSize > 50) {
currentSize -= 16;
updateFontSize();
}
});
// ✅ 기본 크기로 초기화
document.getElementById('resetFont').addEventListener('click', () => {
currentSize = 150; // 초기값과 동일하게
updateFontSize();
});
// 초기 폰트 크기 적용
updateFontSize();
});
</script>
여기까지만 하면 view파일의 수정은 끝이다.
2. Style.css 수정
스타일 파일의 제일 마지막에 추가를 하면 땡이다.
.font-size-wrapper {
display: flex;
justify-content: flex-end; /* 우측 정렬 */
width: 100%;
margin-bottom: 10px;
}
#fontSizeControls {
display: flex;
gap: 5px;
}
#fontSizeControls button {
font-size: 18px;
padding: 4px 10px;
border: 1px solid #ccc;
background: #f9f9f9;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s;
}
#fontSizeControls button:hover {
background: #eee;
}
/* 모바일 대응 */
@media (max-width: 768px) {
#fontSizeControls button {
font-size: 16px;
padding: 3px 8px;
}
}
챗 지피티에게 압도적인 감사를....
---- 집은 장소가 아니라 사람이다. 먹고 자고 떠들고 머무는 물리적 장소가 아니라, 함께 먹고 자고 떠드는 사람들이 있어야 비로소 정의 내릴 수 있는 어떤 것이다.
댓글목록
등록된 댓글이 없습니다.