티스토리 커스텀스타일 추가, 토글 버튼 추가, 블로그 커스터마이징

티스토리 블로그에서는 커스터마이징이 가능하다는 점이 큰 강점이다.

사용안해도 되지만, 여유가 되면 사용을 하는게 더 가독성을 높이고 전달력이 좋아지기 때문에 알아두는게 좋다.

✅ 결론: 실제 적용하는 방법

글을 작성할 때 HTML모드로 두고 클래스를 입힌다.

내가 작성한 클래스가 먹히기 위한 형식은 아래와 같다.

<div class="code-box"><code> 코드소스가 들어갈 부분 </code></div>

<p><button class="toggle-btn">🔽 토글버튼이름 </button></p>
<div class="toggle-content">토글내용</div>

✅ 저장하면 실제 화면에는 아래처럼 그려진다


코드소스가 들어갈 부분

토글내용

📌주의사항: 티스토리 스킨을 다른거로 설정하면 기존 소스는 지워진다.

이 경우에 기존 내 스킨을 저장해놓고 테스트해보고, 적용한다음 추가한 소스만 그대로 붙여넣으면 된다.

✅ 매 글 마다 html 로 글을 작성해서 넣는 방법

간단하게 바로 적용해 볼 수 있다.

아래 소스 코드를 글 쓸 때 html모드로 작성하기 해서 붙여넣어서 저장


<!-- 접기/펼치기 스타일 한 번만 선언 -->
<style>
.toggle-box input[type="checkbox"] { display: none; }
.toggle-box label {
  cursor: pointer; display: block;
  padding: 10px; background: #eee;
  border: 1px solid #ccc; font-weight: bold;
}
.toggle-box .content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc; border-top: none;
}
.toggle-box input[type="checkbox"]:checked ~ .content {
  display: block;
}
</style>

<!-- 1번 토글 -->
<div class="toggle-box">
  <input type="checkbox" id="toggle1">
  <label for="toggle1">1. 스프링의 핵심 개념</label>
  <div class="content">
    <p><strong>IoC/DI</strong>, <strong>AOP</strong>, <strong>트랜잭션</strong>, <strong>MVC 구조</strong>, <strong>빈(Bean)</strong> 등을 포함하는 스프링의 기초 개념을 설명합니다.</p>
  </div>
</div>

<!-- 2번 토글 -->
<div class="toggle-box">
  <input type="checkbox" id="toggle2">
  <label for="toggle2">2. Internal Flow</label>
  <div class="content">
    <p>HTTP 요청이 DispatcherServlet, FilterChain, Controller를 거쳐 Service → Repository → DB까지 전달되는 실제 흐름을 설명합니다.</p>
  </div>
</div>

✅ 공통으로 적용해서 글에서 매번 작성할 필요없이 사용하는 방법

글을 매번 쓸 때마다 스타일과 스크립트 소스를 길게 붙여넣으면 굉장한 낭비다. 공통라인에 저장해두면 여러번 재사용이 가능하다. 한 번만 잘 설정해도 이후에 계속 써먹을 수 있기 때문에 해 놓는게 나쁘지 않다.

1. 우측 상단 톱니

2. 좌측에 꾸미기>스킨편집

3. HTML편집 버튼 클릭

4. HTML/CSS 선택

스타일 CSS 소스코드 맨 하단에 클래스 추가 후 적용버튼

추가한 소스코드


/* 공통 제목 스타일 */
.custom-title {
  font-size: 1.5em;
  font-weight: bold;
  border-left: 5px solid #007bff;
  padding-left: 10px;
  margin: 20px 0 10px;
  color: #333;
}

/* 공통 토글 버튼 */
.toggle-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.toggle-btn:hover {
  background-color: #0056b3;
}

/* 토글 내용 */
.toggle-content {
  display: none;
  padding: 10px;
  background-color: #f9f9f9;
  border-left: 3px solid #007bff;
  margin-bottom: 20px;
}

5. JS 는 HTML </body> 위에 삽입 후 적용버튼 (! 닫는 body태그다)

추가한 소스코드


≶script>
document.addEventListener("DOMContentLoaded", function () {
  const toggleButtons = document.querySelectorAll(".toggle-btn");

  toggleButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      const content = btn.nextElementSibling;
      if (content && content.classList.contains("toggle-content")) {
        content.style.display =
          content.style.display === "none" || content.style.display === ""
            ? "block"
            : "none";
      }
    });
  });
});
≶/script>

실제 글 작성할 때 적용 예시

기본모드가 아닌 HTML선택 후

적용려는 내용 양 옆에 클래스 입힌 태그를 열고 닫아줌

🟦 커스텀 제목

<div class="custom-title">📌 자바스크립트 클로저란?</div>

📌 자바스크립트 클로저란?

🟦 토글 박스

여기에 숨겨질 내용이 들어갑니다.1

여기에 숨겨질 내용이 들어갑니다.2


function sayHello(name) {
  return 'Hello, ' + name;
}

토글 버튼은 수정 저장할때마다 버튼 앞뒤에 <p>태그가 붙어서 지워줘야 하는 불편함이 있다.

script를 약간 수정해서 써야함.

수정한 스크립트 코드: 가장 가까운 요소에 대해 토글을 먹도록


<script>
  

document.addEventListener("DOMContentLoaded", function () {
  const toggleButtons = document.querySelectorAll(".toggle-btn");

  toggleButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      let current = btn.closest("p"); // 버튼을 감싼 p 태그
      if (!current) return;

      let next = current.nextElementSibling;

      // 다음 요소가 .toggle-content 클래스인지 확인
      if (next && next.classList.contains("toggle-content")) {
        next.style.display =
          next.style.display === "none" || next.style.display === ""
            ? "block"
            : "none";
      }
    });
  });
});

</script>

코드블록의 경우 복사버튼을 추가 css와 script 추가


<!--코드블록 복사버튼추가-->
.code-box {
  position: relative;
  background: #272822;
  color: #fff;
  font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 20px 0;
  font-size: 1.3em;
  line-height: 1.5;
}

.code-box code {
  white-space: pre-wrap;
  display: block;
}

/* 복사 버튼 */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #444;
  color: #fff;
  border: none;
  padding: 4px 10px;
  font-size: 0.75em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}

.copy-btn:hover {
  background: #666;
}

script



<script>
  
document.addEventListener("DOMContentLoaded", function () {
  // 코드박스 안에 복사 버튼 동적 추가
  const codeBoxes = document.querySelectorAll(".code-box");

  codeBoxes.forEach((box, index) => {
    const btn = document.createElement("button");
    btn.className = "copy-btn";
    btn.innerText = "복사";
    btn.addEventListener("click", () => {
      const code = box.querySelector("code");
      if (!code) return;

      const text = code.innerText;
      navigator.clipboard.writeText(text).then(() => {
        btn.innerText = "✅ 복사됨!";
        setTimeout(() => (btn.innerText = "복사"), 1500);
      });
    });

    box.appendChild(btn);
  });
});


</script>

저작자표시

로그의 죄니