ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
-
recentPost
-
popularPost
-
Archive
-
recentComment
티스토리 - 현재 페이지 해당하는 메뉴 CSS로 제어하기
예전에 한번 포스트 한 적이 있는 내용에 응용한 번 해보면 어떨까 싶어서 해보니 자바스크립트로 하는 것 보다는 좋은 것 같아 이렇게 포스트 합니다.
예전 포스트 보기 : 2019/05/24 - 티스토리에서 body의 id 값과 그 결과 이용하기
검색창에 '현재 URL 주소 값 메뉴 제어하기'라고 이야기하면 많은 소스가 나옵니다. 그것을 이용하면 간단하게 자바스크립트를 사용하여 가능합니다. 그런데 저는 왠지 로딩 시간이 걸리더군요. 그래서 CSS로 할 방법이 없을까 생각 중에 body의 id 값이 생각나서 해보니 가능성이 있더군요.
1. 소스 보기
설명은 소스 보시면 쉽게 아실 것입니다.
<body id="tt-body-page" class="티스토리 - 현재 페이지 해당하는 메뉴 CSS로 제어하기">티스토리 스킨 가이드를 보면 공통에 body_id 값과 page_title의 설명이 있습니다. 이것을 이용하여 CSS파일에 정의하면 됩니다.
이쯤하면 된 것입니다. 각 페이지나 메뉴에 따라 body_id가 달라지면 page_title이 표시됩니다. 이때 띄어쓰기를 하셨으면 각각의 class명으로 간주하기 때문에 각각의 class명으로 해주시면 됩니다.
1-1. 예를 들어
a. 첫페이지면 (index)
<body id="tt-body-index" class="블로그이름">첫 페이지에서는 body_id값 tt-body-index, page_title값 블로그이름으로 표시됩니다. (저 같은 경우 ' AneOK'로 표시됩니다) 이때 참고로 body_id의 값이 tt-body-index이지만 공지사항의 값도 같은 tt-body-index입니다. 따라서, .class값도 같이 입력하여야 구분이 됩니다. 그러면 CSS값으로는 밑에처럼 적으시면 됩니다.
body#tt-body-index.aneOK ul li a {}
b. 페이지 화면 제목이 'About AneOK'이면
<body id="tt-body-page" class="About AneOK">페이지화면에 제목이 'About AneOK'이면, .class값이 'About AneOK'이 입력됩니다. (위에처럼) id값도 다르게 입력된 것을 확인할 수 있습니다. 이때는 CSS값을 밑에처럼 입력하시면 됩니다.
body#tt-body-page.About.AneOK ul li a {}참고 : .class값만 주면 안되나 싶지만, 위의 예제 2개에서 보듯이 둘다 .class값이 .AneOK가 들어갑니다. 그러니 id값도 같이 주어 구분합니다.
이제 쉽게 구분하여 자기 스킨에 맞게 사용하시면 됩니다. (참고로 전 공통만 되더군요. 카테고리를 하려니 되지가 않아 고민입니다. ^^;)
