티스토리에서 링크 클릭 시 연결 문장 형광펜 효과 주기
티스토리 블로그에서 링크 클릭 시 강조 효과를 주고 싶으신가요? 코드를 복사 붙여넣기만 하면 되는 간단한 방법으로 방문자의 시선을 사로잡는 팁을 알려드립니다.
티스토리에서 링크 클릭 시 연결 문장 형광펜 효과 주기 (초보자 가이드)
블로그에서 링크를 누르면, 연결된 페이지의 중요한 문장이 반짝하고 형광펜으로 강조되는 효과, 궁금하지 않으셨나요? 간단한 코드로 쉽게 적용하는 방법을 알려드릴게요.
1단계: 강조할 문장 위치 확인 및 표시
- 티스토리 관리자 화면으로 이동합니다.
- 콘텐츠 > 글 관리로 이동하여 형광펜 효과를 줄 문장이 있는 글을 선택하고 수정 버튼을 클릭합니다.
- 글 편집 화면에서 HTML 편집 모드로 전환합니다. (보통 오른쪽 상단에 'HTML' 또는 '</>' 버튼이 있습니다.)
- 형광펜 효과를 줄 문장을 찾습니다. 예를 들어, "디지털 전자기기의 청색광이 뇌를 자극해 수면을 방해할 수 있기 때문입니다."라는 문장을 강조하고 싶다면, 이 문장이 포함된 <p> 태그를 찾아야 합니다. HTML 편집 모드에서는 다음과 같이 보일 것입니다.
<p>... 다른 내용 ...</p> <p>디지털 전자기기의 청색광이 뇌를 자극해 수면을 방해할 수 있기 때문입니다.</p> ←이 문장 <p>... 다른 내용 ...</p> - 해당 <p> 태그에 id를 추가합니다. id는 HTML 요소에 고유한 이름을 부여하는 것으로, 나중에 JavaScript에서 이 요소를 찾을 때 사용합니다. 원하는 id 이름을 정할 수 있지만, 여기서는 important-info로 하겠습니다. 다음과 같이 수정합니다.
<p id="important-info"> 디지털 전자기기의 청색광이 뇌를 자극해 수면을 방해할 수 있기 때문입니다.</p> ←id 추가
2단계: CSS 스타일 추가
- 티스토리 관리자 화면에서 꾸미기 > 스킨 편집 > HTML 편집으로 이동합니다.
- CSS 탭을 클릭합니다.
- CSS 코드의 맨 아래 부분에 다음 코드를 복사하여 붙여 넣습니다. 이 코드는 형광펜 효과를 나타내는 스타일을 정의합니다.
.highlight {
background-color: #ffff00; /* 형광 노란색 */
padding: 2px 5px; /* 안쪽 여백 조절 */
border-radius: 3px; /* 테두리 둥글게 */
transition: background-color 0.5s ease-in-out; /* 부드러운 전환 효과 */
}
만약 추가 CSS 스타일의 색이 마음에 안 든다면 네이버에서 '색상코드표'를 찾아서 선호하는 색으로 변경하면 됩니다.
3단계: JavaScript 코드 추가
- HTML 편집 탭으로 다시 돌아갑니다.
- </head> 태그 바로 앞에 다음 코드를 복사하여 붙여 넣습니다. 이 코드는 페이지가 로드된 후 실행되는 JavaScript 코드로, 형광펜 효과를 적용하고 2-3초 후 해제하는 역할을 합니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
const hash = window.location.hash;
if (hash) {
const targetElement = document.querySelector(hash);
if (targetElement) {
targetElement.classList.add('highlight');
setTimeout(() => {
targetElement.classList.remove('highlight');
}, 2000); // 2초 후 강조 해제
}
}
});
</script>
그리고 저장 버튼을 클릭하여 스킨 편집을 완료합니다.
4단계
이제 다른 글이나 페이지에서 해당 문장으로 연결되는 링크를 만들어 보겠습니다.
- 링크를 걸 글의 편집 화면에서 HTML 편집 모드로 전환합니다.
- 다음과 같은 형식으로 링크를 생성합니다.
<a href="[글 주소]#important-info">청색광과 수면의 관계 바로 가기</a>
- [글 주소] 부분에는 형광펜 효과를 줄 문장이 있는 글의 주소를 입력합니다. 예를 들어, https://yourblog.tistory.com/123과 같은 주소입니다.
- #important-info는 1단계에서 추가한 id입니다.
마지막으로 글을 발행하거나 저장합니다.
요약 및 추가 팁
- id 추가: 강조할 문장이 있는 태그에 id를 추가합니다.
- CSS 추가: . highlight 클래스를 CSS에 추가하여 형광펜 스타일을 정의합니다.
- JavaScript 추가: JavaScript 코드를 <head> 태그 안에 추가하여 동적으로 형광펜 효과를 적용하고 해제합니다.
- 링크 생성: href="[글 주소]#id" 형식으로 링크를 생성합니다.
이제 간단한 코드 몇 줄만으로 티스토리 블로그에 멋진 형광펜 효과를 추가할 수 있게 되었습니다. 이 팁을 활용하여 방문자들이 중요한 정보를 놓치지 않도록 도와주세요.
더욱 풍부하고 사용자 친화적인 블로그를 만드는 데 도움이 되기를 바랍니다.
댓글