레이블이 플랫폼에 맞는 링크박스 테스트하기인 게시물을 표시합니다. 모든 게시물 표시
레이블이 플랫폼에 맞는 링크박스 테스트하기인 게시물을 표시합니다. 모든 게시물 표시

2024년 10월 18일 금요일

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

By 

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

로컬 환경에서 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에서 코드를 먼저 테스트한 후, 티스토리와 블로그스팟에 안전하게 적용할 수 있습니다.  안전이 제일입니다.  안전!! 

Share:  Facebook Twitter Google+
Read More