오늘은 구글 블로그스팟(Blogspot)에서 HTML, CSS, JavaScript를 활용해 링크 박스를 구현하는 구체적인 절차입니다. 두 플랫폼의 특성과 제한을 고려하여 각 단계별로 구현 절차를 자세히 설명합니다.
1. 블로그스팟(Blogspot)에서 구현하는 방법
1.1 HTML/CSS/JavaScript 삽입 절차
- 블로그스팟 대시보드에 로그인합니다.
- 테마 → HTML 편집으로 이동합니다.
<head>태그 내부에 CSS 코드를 추가합니다.- 게시물 작성 시 HTML 모드에서 HTML 코드와 자바스크립트를 삽입합니다.
1.2 코드 구현 예제
테마 편집에서 추가할 CSS 코드
<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 모드에 추가할 코드
1.3. 실행 및 테스트
- 블로그스팟에서 위 코드를 삽입한 후 게시물을 발행합니다.
- 발행된 게시물에서 박스 크기와 색상을 선택해 스타일이 제대로 변경되는지 확인합니다.
1.4. 주의 사항
- 블로그스팟의 보안상 일부 외부 스크립트의 실행을 제한할 수 있습니다.
- 자바스크립트가 정상 작동하지 않으면 코드에서
<script>태그의 위치를 조정하거나 브라우저 개발자 도구로 오류를 확인합니다.
이제 블로그스팟에서 HTML, CSS, JavaScript를 활용한 링크 박스 구현이 완료되었습니다!