4장. 다운로드용 블로그 글 구조, 한 번에 완성하기
4장. 다운로드용 블로그 글 구조, 한 번에 완성하기
3장에서 기본 구조를 살펴봤다면, 4장에서는 같은 패턴을 한 번 더 연습해 보겠습니다. 이번에는 “블로그 하단에 GitHub 예제 모음 링크를 모아서 보여주는 위젯” 예제를 기준으로, 파일 소개 섹션, 설치·사용 방법, 블로그용 샘플 본문을 처음부터 끝까지 만들어 봅니다.
4-1. 예제 시나리오와 파일 구성
이 장에서 사용할 예제는, 블로그 글 하단에 “관련 예제 더 보기” 영역을 만들어 여러 GitHub 예제 리포지토리를 한 번에 모아서 보여주는 HTML 코드입니다.
1) GitHub 쪽 파일 구성 예시
blog-github-widgets/
├─ footer-widget-basic/
│ ├─ index.html
│ ├─ widget.css
│ └─ README.md
└─ footer-widget-advanced/
├─ index.html
├─ widget.css
└─ README.md
각 폴더 안의 index.html은 “블로그 하단 위젯” 샘플 코드이고, widget.css는 디자인을 조정하는 스타일 파일입니다. README.md에는 설치·사용 방법을 정리해 둡니다.
2) 블로그에서 보여줄 파일 소개 섹션 HTML
먼저, 구독자에게 “이 예제가 어떤 역할을 하는지”를 알려 주는 소개 블록부터 만듭니다.
<h2>공유 파일 소개 – 블로그 하단 GitHub 예제 위젯</h2>
<p>
이 예제는 블로그 글 하단에 <strong>GitHub 예제 모음 위젯</strong>을
넣고 싶은 분을 위한 HTML 코드입니다.
여러 개의 예제 리포지토리를 한 번에 보여주고, 구독자가 필요한 예제만 골라볼 수 있게 만들 수 있습니다.
</p>
<ul>
<li>footer-widget-basic/index.html : 기본 위젯 구조 예제</li>
<li>footer-widget-basic/widget.css : 기본 스타일</li>
<li>footer-widget-advanced/index.html : 그리드 레이아웃이 적용된 고급 위젯</li>
<li>footer-widget-advanced/widget.css : 반응형 스타일</li>
</ul>
<p>
이 코드는 데스크톱과 모바일 블로그 화면 모두에서 자연스럽게 보이도록 구성되어 있습니다.
</p>
스크린샷 예시: 위젯 파일 소개 섹션
전자책에서는 “공유 파일 소개”라는 소제목 아래에 위와 같은 리스트가 보이는 화면을 캡처해 두면 좋습니다.
<img src="images/4-1-widget-intro.png"
alt="블로그 하단 GitHub 위젯 예제 파일 소개 화면">4-2. 설치 및 사용 방법 – 하단 위젯 적용하기
다음으로, 구독자가 예제를 그대로 자신의 블로그에 붙여 넣을 수 있도록 단계별 설치·사용 방법을 정리합니다.
1) 단계별 설치 가이드 HTML
<h2>설치 및 사용 방법</h2>
<ol>
<li>아래 다운로드 버튼을 클릭해 위젯 예제 ZIP 파일을 내려받습니다.</li>
<li>압축을 해제한 뒤, <code>footer-widget-basic/index.html</code> 파일을 엽니다.</li>
<li>코드 중 <!-- 링크 영역 시작 -->와 <!-- 링크 영역 끝 --> 사이 부분을 확인합니다.</li>
<li>각 항목의 href 속성에 자신의 GitHub 예제 리포지토리 링크를 넣습니다.</li>
<li>전체 위젯 코드를 블로그 글의 하단 또는 공통 서식 영역에 붙여넣습니다.</li>
<li>원하는 경우, <code>widget.css</code> 내용을 블로그 CSS 설정에 추가하여 디자인을 맞춥니다.</li>
</ol>
2) 위젯 HTML 코드 예시
아래는 블로그 하단에 넣을 수 있는 간단한 GitHub 예제 위젯 코드입니다.
<div class="github-widget">
<h2>관련 GitHub 예제 더 보기</h2>
<ul>
<li>
<a href="https://github.com/사용자명/blog-download-examples">
블로그 다운로드 버튼 예제
</a>
</li>
<li>
<a href="https://github.com/사용자명/blog-github-widgets">
블로그 하단 GitHub 위젯 모음
</a>
</li>
<li>
<a href="https://github.com/사용자명/blog-code-snippets">
블로그 코드 스니펫 모음
</a>
</li>
</ul>
</div>
3) 기본 스타일(CSS) 예시
위젯을 조금 더 보기 좋게 만들기 위한 최소 스타일 예시입니다.
<style>
.github-widget {
border-top: 1px solid #e0e0e0;
margin-top: 32px;
padding-top: 16px;
}
.github-widget h2 {
font-size: 1.1rem;
margin-bottom: 8px;
}
.github-widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.github-widget li + li {
margin-top: 4px;
}
.github-widget a {
color: #1a73e8;
text-decoration: none;
}
.github-widget a:hover {
text-decoration: underline;
}
</style>
스크린샷 예시: 하단 위젯이 적용된 화면
전자책에는 다음과 같은 화면을 캡처해 넣을 수 있습니다.
- 본문 끝에 “관련 GitHub 예제 더 보기” 제목과 리스트가 보이는 장면
- 모바일 화면에서 리스트가 세로로 정렬된 장면
<img src="images/4-2-footer-widget.png"
alt="블로그 하단에 GitHub 예제 위젯이 적용된 화면">4-3. 블로그용 샘플 본문 – 하단 위젯까지 포함한 완성 예시
마지막으로, 지금까지의 구성 요소를 모두 합쳐 실제 블로그에 바로 붙여넣어 쓸 수 있는 샘플 본문을 만들어 보겠습니다.
1) 전체 샘플 본문 HTML
<h1>[무료 공유] 블로그 하단에 GitHub 예제 모음 위젯 달기</h1>
<p>
블로그에 GitHub 예제를 하나둘 올리다 보면,
“이전에 공유했던 예제들”을 한 번에 보여주고 싶을 때가 있습니다.
이번 글에서는 블로그 글 하단에 <strong>GitHub 예제 모음 위젯</strong>을 설치하는 방법을 정리했습니다.
</p>
<h2>공유 파일 소개</h2>
<p>
이 자료는 블로그 하단에 여러 GitHub 예제를 한 번에 보여주는 HTML 위젯 예제입니다.
기본 버전과 고급 버전 두 가지를 제공하며, 데스크톱과 모바일에서 모두 자연스럽게 표시되도록 구성했습니다.
</p>
<ul>
<li>footer-widget-basic/index.html : 기본 위젯 구조 예제</li>
<li>footer-widget-basic/widget.css : 기본 스타일</li>
<li>footer-widget-advanced/index.html : 그리드 레이아웃 적용 버전</li>
<li>footer-widget-advanced/widget.css : 반응형 스타일</li>
</ul>
<h2>설치 및 사용 방법</h2>
<ol>
<li>아래 다운로드 버튼을 눌러 예제 ZIP 파일을 내려받습니다.</li>
<li>압축을 해제한 뒤, footer-widget-basic/index.html 파일을 엽니다.</li>
<li>코드 중 리스트 부분의 href를 자신의 GitHub 예제 링크로 교체합니다.</li>
<li>전체 <div class="github-widget"> 블록을 블로그 글 하단에 붙여넣습니다.</li>
<li>원한다면 widget.css 내용을 블로그 CSS 설정에 복사하여 디자인을 통일합니다.</li>
</ol>
<h2>예제 소스코드 다운로드</h2>
<p>아래 버튼을 눌러 위젯 예제를 통째로 받아 보세요.</p>
<a href="https://github.com/사용자명/blog-github-widgets/archive/refs/heads/main.zip"
style="display:inline-block;padding:10px 18px;
background:#1a73e8;color:#ffffff;
text-decoration:none;border-radius:4px;
font-weight:600;">
GitHub 위젯 예제 다운로드 (.zip)
</a>
<h2>블로그 하단 위젯 HTML 미리보기</h2>
<pre><code><div class="github-widget">
<h2>관련 GitHub 예제 더 보기</h2>
<ul>
<li>
<a href="https://github.com/사용자명/blog-download-examples">
블로그 다운로드 버튼 예제
</a>
</li>
<li>
<a href="https://github.com/사용자명/blog-github-widgets">
블로그 하단 GitHub 위젯 모음
</a>
</li>
</ul>
</div>
</code></pre>
<h2>마무리 안내</h2>
<p>
앞으로도 블로그에서 자주 쓰는 GitHub 예제를 계속 추가해 나갈 예정입니다.
필요한 위젯이나 버튼 유형이 있다면 댓글로 요청을 남겨 주세요.
요청이 많았던 기능은 다음 예제와 전자책 업데이트에 우선 반영하겠습니다.
</p>
2) 스크린샷 예시: 전체 구조가 보이는 화면
마지막으로, 샘플 본문을 실제 블로그에 적용했을 때 제목 → 소개 → 설치 방법 → 다운로드 → 하단 위젯 순으로 보이는 전체 화면을 한 번에 캡처합니다.
<img src="images/4-3-full-post.png"
alt="하단 GitHub 위젯까지 포함된 블로그 샘플 글 전체 화면">4장 정리
4장에서는 3장에서 다룬 구조를 다시 한 번, 다른 예제로 연습해 보면서 파일 소개, 설치·사용 방법, 샘플 본문을 하나의 “다운로드 포스트”로 완성하는 과정을 살펴봤습니다. 5장에서는 구독자 경험을 더 높이기 위해 스크린샷, FAQ, 오류 대응 섹션을 어떻게 붙여 넣을지 구체적으로 다뤄 보겠습니다.
#가나 투데이 #ganatoday
그린아프로
