반응형
링크에 블록 버튼 효과를 추가하는 방법
티스토리 블로그에서 링크에 블록 버튼 효과를 추가하는 방법을 알려드리겠습니다. HTML, CSS, 그리고 JavaScript를 사용하여 이 기능을 구현할 수 있습니다.
1 HTML과 CSS로 기본 구조
먼저, HTML과 CSS로 기본 구조를 만들고, JavaScript로 동작을 추가하겠습니다.
티스토리 링크블록 버튼 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>티스토리 링크 블록 버튼</title>
<style>
.link-block {
display: inline-block;
padding: 10px 20px;
background-color: #f0f0f0;
color: #333;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.link-block:hover {
transform: scale(1.05);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<a href="https://example.com" class="link-block">링크 텍스트</a>
<script>
document.addEventListener('DOMContentLoaded', function() {
var links = document.querySelectorAll('a');
links.forEach(function(link) {
if (!link.classList.contains('link-block')) {
link.classList.add('link-block');
}
});
});
</script>
</body>
</html>위 코드 첨부 파일::
2. 기능 구현
이 코드는 다음과 같은 기능을 구현합니다:
- 모든 링크에 link-block 클래스를 추가합니다.
- 링크가 블록 형태로 표시됩니다.
- 마우스를 올리면 링크 블록이 약간 커지고 그림자가 생깁니다.
- 클릭하면 해당 링크로 이동합니다.
3. 구현 단계
티스토리에 적용하려면 다음 단계를 따르세요:
- 티스토리 관리자 페이지에서 '스킨 편집' 메뉴로 이동합니다.
- HTML 편집기에서 </head> 태그 바로 앞에 <style> 부분을 붙여넣습니다.
- </body> 태그 바로 앞에 <script> 부분을 붙여넣습니다.
이렇게 하면 블로그의 모든 링크에 블록 버튼 효과가 적용됩니다. 특정 링크에만 적용하고 싶다면, 해당 링크에 직접 link-block 클래스를 추가하면 됩니다.
감사합니다. 오늘도 메섹톡이었습니다. 네 생각은 뭐니?
반응형