참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* 이 자바스크립트 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
// 화면 크기가 변경될 때마다 실행되는 함수
function adjustLayout() {
const title = document.querySelector('.liberty-content-header .title');
const contentTools = document.querySelector('.liberty-content-header .content-tools');
const contentSub = document.querySelector('.liberty-content-header .contentSub');
if (window.innerWidth <= 1022.4) {
// 화면 크기가 1022.4px 이하일 경우, title, content-tools, contentSub 순으로 배치
if (title && contentTools && contentSub) {
const parent = title.parentNode;
// 순서가 이미 바뀌어 있는지 확인하여 중복 실행 방지
if (parent.firstChild !== title) {
// title을 먼저, content-tools를 두 번째, contentSub를 세 번째로 배치
parent.appendChild(title); // title을 먼저 배치
parent.appendChild(contentTools); // content-tools를 두 번째로 배치
parent.appendChild(contentSub); // contentSub를 세 번째로 배치
}
}
} else {
// 화면 크기가 1022.4px 이상일 경우, 원래의 순서로 복원
const libertyContentHeader = document.querySelector('.liberty-content-header');
if (libertyContentHeader && title && contentTools && contentSub) {
// 원래 순서대로 복원: content-tools → title → contentSub
libertyContentHeader.prepend(contentTools); // content-tools을 첫 번째로 배치
libertyContentHeader.append(title); // title을 두 번째로 배치
libertyContentHeader.appen