22
✅ 완성된 도구
0
🕐 준비중 도구
5
📄 사이트 페이지
30
📁 전체 페이지 수
메인 페이지
HTML 기초 도구
HTML UI 컴포넌트
CSS 기초 도구
CSS 변수 활용법
✅ 완성
css-variables.html
색상·폰트·간격을 변수로 관리해 테마를 한 번에
Flexbox 레이아웃
✅ 완성
flexbox.html
가로·세로 정렬, 가운데 맞추기. 인터랙티브 플레이그라운드
CSS Grid 레이아웃
✅ 완성
css-grid.html
2차원 격자 배치, fr 단위, template-areas 완전 정복
다크모드 대응
✅ 완성
dark-mode.html
CSS 변수 + prefers-color-scheme 라이트/다크 테마
반응형 디자인
✅ 완성
responsive-design.html
미디어쿼리, clamp(), auto-fill로 모바일~데스크탑 대응
CSS 애니메이션
✅ 완성
css-animation.html
transition, @keyframes, transform 인터랙티브 데모 6종
SEO / 수익화 도구
JavaScript 기초 도구
사이트 정보 페이지
🤖 구글 검색엔진을 위한 XML 사이트맵
위 HTML 사이트맵은 사람이 보기 위한 것이에요. 구글이 사이트를 빠르게 색인하려면 XML 형식의 사이트맵도 필요해요. GitHub Pages에 배포한다면 루트 디렉터리에 아래 파일을 만들어 주세요.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://vibetoolkit.kr/</loc>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://vibetoolkit.kr/favicon-sample.html</loc>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://vibetoolkit.kr/google-analytics.html</loc>
<priority>0.9</priority>
</url>
<!-- ... (총 21개 URL 등록됨) -->
</urlset>
💡 파일명을 sitemap.xml로 저장하고, Google Search Console에서 제출하면 더 빠르게 색인돼요.
자세한 방법은 사이트맵 만들기 가이드에서 단계별로 안내해 드려요.