본문 바로가기
티스토리 설정하기

링크박스구현하기, 다운로드 코드포함

by 강아지톡톡-아지톡 2024. 10. 18.
반응형

오늘은 티스토리(Tistory)에서 HTML, CSS, JavaScript를 활용해 링크 박스를 구현하는 구체적인 절차입니다. 블로그  플랫폼(구글스팟,티스토리등)들은 각기 특성과 제한을 고려해야합니다. 이제 티스토리의  각 단계별로 구현 절차를  설명합니다.

1. 티스토리(Tistory)에서 구현하는 방법

1.1 HTML/CSS/JavaScript 삽입 절차

  1. 티스토리 관리자 페이지에 로그인합니다.
  2. 스킨 편집 → HTML 편집으로 이동합니다.
  3. <head> 태그 안에 CSS 코드를 추가합니다.
  4. 게시물 작성 모드에서 HTML로 전환하여 HTML과 자바스크립트 코드를 삽입합니다.

1.2 코드 구현 예제

HTML 편집 시 추가할 CSS 코드

html
css.html
0.00MB
 
 
 
 
<style>
  @font-face {
    font-family: 'HYGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102@1.0/HY견고딕.woff') format('woff');
  }

  .link-title a {
    font-family: 'HYGothic', sans-serif;
    font-size: 28px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 100px;
    border-radius: 15px;
    transition: background-color 0.3s, width 0.3s;
    text-align: center;
  }

  .link-box-content {
    margin: 20px;
    display: inline-block;
  }

  .controls {
    margin-top: 20px;
    font-size: 16px;
  }
</style>

게시물 작성 시 HTML 모드에 추가할 코드

html
 
 
 
 
<div class="link-box-content">
  <h3 class="link-title">
    <a class="link-box" href="https://example.com" target="_blank">링크 제목</a>
  </h3>
</div>

<div class="controls">
  <label for="boxSize">박스 크기:</label>
  <select id="boxSize" onchange="updateBoxStyle()">
    <option value="small">작게</option>
    <option value="medium" selected>중간</option>
    <option value="large">크게</option>
  </select>

  <label for="boxColor">박스 색상:</label>
  <select id="boxColor" onchange="updateBoxStyle()">
    <option value="#FF5733">빨강</option>
    <option value="#33C4FF">파랑</option>
    <option value="#33FF57">초록</option>
    <option value="#FFC300">노랑</option>
    <option value="#8E44AD">보라</option>
  </select>

  <script>
    function updateBoxStyle() {
      const size = document.getElementById('boxSize').value;
      const color = document.getElementById('boxColor').value;
      const link = document.querySelector('.link-title a');

      switch (size) {
        case 'small':
          link.style.width = '150px';
          link.style.height = '75px';
          break;
        case 'medium':
          link.style.width = '200px';
          link.style.height = '100px';
          break;
        case 'large':
          link.style.width = '250px';
          link.style.height = '125px';
          break;
      }

      link.style.backgroundColor = color;
    }
  </script>
</div>

 

2. 실행 및 테스트

  1. 티스토리에서 위 코드를 삽입한 후 게시물을 발행합니다.
  2. 발행된 게시물에서 박스 크기와 색상을 선택해 스타일이 제대로 변경되는지 확인합니다.

링크 제목에 원하는 주소 링크합니다.   

3. 주의 사항

  • 티스토리는 보안상 일부 외부 스크립트의 실행을 제한할 수 있습니다.
  • 자바스크립트가 정상 작동하지 않으면 코드에서 <script> 태그의 위치를 조정하거나 브라우저 개발자 도구로 오류를 확인합니다.

이제 티스토리에서 HTML, CSS, JavaScript를 활용한 링크 박스 구현이 완료되었습니다! 오늘도 아지톡이었습니다.

 

반응형
저작자표시 비영리 변경금지

'티스토리 설정하기' 카테고리의 다른 글

구글 블로그 스팟, AdSense 등록  (0) 2024.07.27
영문 주소 변환하기-1  (1) 2024.07.10
가독성이란  (0) 2024.07.10
애드센스 신청 후 작업 최적화의 중요성  (0) 2024.07.10
티스토리 설정-카테고리 변경등  (0) 2024.07.08

관련글

티스토리툴바