티스토리에서는 포스트 글 안에 <style> 태그를 직접 넣는 것이 기본적으로 허용되지 않습니다. 티스토리 편집기에서 HTML 모드로 <style> 태그를 입력한 후 기본 모드로 전환하면 해당 태그가 삭제됩니다. 이 <style> 태그뿐만 아니라 onclick 속성, 줄 안에 이미지, SVG 태그 등 몇몇 HTML 요소 삽입에도 제한이 있습니다. 물론 티스토리 스킨 편집 기능을 이용해 스타일을 추가할 수는 있지만, 이는 특정 글 하나에만 스타일을 적용하기에는 다소 번거로운 방법입니다.
이 문제를 해결하기 위해, HTML 소스를 수정한 후 HTML 모드에서 곧바로 완료 버튼을 눌러 저장하는 방법을 사용할 수 있습니다. 이 방법은 기본 모드로 전환하지 않기 때문에 수정 내용을 유지할 수 있게 해 줍니다. 하지만, 수정된 글을 다시 열어 편집하려고 하면, 기본 모드로 열리면서 애써 작성한 <style> 태그가 사라져 버립니다.
다행히 티스토리에서는 JavaScript를 사용할 수 있기 때문에, 이를 활용해 문제를 우회할 수 있습니다.
JavaScript로 스타일 추가하기
JavaScript를 사용해 <style> 태그를 동적으로 추가하는 방법입니다. 아래 코드는 <head> 태그에 스타일을 삽입하는 방식입니다.
<script>
const style_241145 = document.createElement('style');
style_241145.id = "style_241145";
style_241145.innerHTML = `
/* 여기에 CSS 스타일 구문이 들어갑니다. */
`;
document.head.appendChild(style_241145);
</script>
다음 방법을 이용할 수도 있습니다. <style> 태그 자체를 코드가 삽입된 글 위치에 삽입하는 방식입니다.
<script>
document.write(`
<style id="style_241145">
/* 여기에 CSS 스타일 구문이 들어갑니다. */
</style>
`);
</script>
혹시나 "style_241145" 같은 변수 이름이나 id가 다른 글이나 티스토리에서 중복 사용하여 예기치 않는 문제가 일어날 수 있으므로 저처럼 중복 가능성이 낮은 이름으로 바꾸는 것이 좋습니다.
사용예
아래는 버튼 스타일을 적용하는 예제입니다. W3Schools의 CSS Buttons(https://www.w3schools.com/css/css3_buttons.asp)의 예제를 조금 고쳐봤습니다.
소스 코드
<p data-ke-size="size16"><span>스타일이 적용 안된 버튼</span></p>
<p><button><span>Click Me</span></button></p>
<p data-ke-size="size16"><span>스타일이 적용 된 버튼</span></p>
<p data-ke-size="size16"><span>
<button class="button_241145"><span>Click Me</span></button>
<button class="button_241145"><span>눌러봐</span></button>
</span></p>
<script>
const style_241145 = document.createElement('style');
style_241145.id = "style_241145";
style_241145.innerHTML = `
.button_241145 {
display: inline-block;
padding: 15px 25px;
width: 200px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button_241145:hover {background-color: #f4511e}
.button_241145:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.button_241145 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button_241145 span:after {
content: '»'; /* \ 00bb U+00BB */
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button_241145:hover span {
padding-right: 25px;
}
.button_241145:hover span:after {
opacity: 1;
right: 0;
}
`;
document.head.appendChild(style_241145);
</script>
실행 결과
위 코드를 HTML 모드에서 붙여넣으면 다음과 같은 결과를 확인할 수 있습니다. 이 문장 바로 다음에 붙여 넣었습니다.
스타일이 적용 안된 버튼
스타일이 적용 된 버튼
마치며
위 방법을 통해 티스토리 글 안에서도 그 포스트 안에서만 사용하는 스타일을 손쉽게 추가할 수 있습니다. 궁금한 점이나 의견이 있다면 댓글로 남겨주세요! 😊
'티스토리' 카테고리의 다른 글
| 티스토리: 제목 (Hn 태그) 접기/펼치기로 글 읽기 편하게 만들기 (1) | 2024.12.30 |
|---|---|
| 티스토리: 글에서 불필요한 공백 제거하는 방법 (Bookmarklet) (0) | 2024.12.10 |
| 티스토리 Odyssey 스킨: 반응형 글 너비 조절하기 (CSS) (1) | 2024.12.06 |