플랫폼에 맞는 링크박스 테스트하기

가나톡ganaTOK
가나톡ganaTOK

플랫폼에 맞는 링크박스 - 로컬 환경에서 미리보기 테스트

로컬 환경에서 HTML, CSS, JavaScript 코드를 실행한 뒤 티스토리나 블로그스팟에 적용하는 방법입니다.

codePEN활용하기

로컬 테스트를 위한 단계

1. 코드 파일 생성

  • index.html, styles.css, script.js 세 파일을 만듭니다.

2. HTML 코드 삽입 (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>링크 박스 미리보기</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <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>
  </div>

  <script src="script.js"></script>
</body>
</html>
3. CSS 코드 삽입 (styles.css)
.link-title a {
  font-family: 'Arial', sans-serif; /* 경기도체는 티스토리에서는 직접 호스팅 필요 */
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  transition: background-color 0.3s, width 0.3s, font-size 0.3s;
  text-align: center;
}

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

.controls {
  margin-top: 20px;
  font-size: 16px;
}

4. JavaScript 코드 삽입 (script.js)
  1. 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 = '100px';
          link.style.fontSize = '28px';
          break;
        case 'medium':
          link.style.width = '200px';
          link.style.fontSize = '32px';
          break;
        case 'large':
          link.style.width = '300px';
          link.style.fontSize = '34px';
          break;
      }
      link.style.backgroundColor = color;
    }
5.HTML 파일 열기
  • 로컬에서 index.html 파일을 더블 클릭해 브라우저에서 열어 확인합니다.

2. CodePen 또는 JSFiddle에서 미리보기

코드를 온라인으로 테스트할 수 있는 서비스로 CodePen과 JSFiddle을 사용할 수 있습니다.

CodePen 사용 방법

  1. CodePen에 접속합니다.
  2. HTML, CSS, JavaScript 각각의 탭에 해당 코드를 붙여 넣습니다.
  3. 미리보기 창에서 코드의 동작을 실시간으로 확인합니다.

3. 티스토리와 블로그스팟에서 코드 적용 및 테스트

  • 티스토리: 스킨 편집에서 HTML, CSS, JavaScript를 올바르게 삽입합니다.
    • 일부 자바스크립트 코드는 글 본문에서 사용하기 위해 <script> 태그로 감싸야 합니다.
  • 블로그스팟: 테마 HTML 편집과 게시물 작성 시 HTML 모드에서 코드를 삽입합니다.
    • 자바스크립트는 <script> 태그로 감싸 삽입합니다.

4. 주의 사항

  1. 외부 스크립트 차단: 티스토리와 블로그스팟은 보안상 외부 자바스크립트 실행을 제한할 수 있습니다.
  2. CORS 문제: 폰트나 이미지 같은 외부 리소스를 불러올 때 문제가 발생할 수 있습니다. 이 경우 직접 호스팅하거나 경고를 무시할 수 있는 리소스를 사용해야 합니다.

이렇게 하면 로컬 또는 CodePen에서 코드를 먼저 테스트한 후, 티스토리와 블로그스팟에 안전하게 적용할 수 있습니다.  안전이 제일입니다.  안전!! 

Related Posts

로드 중…

댓글 쓰기