스크립트 & 소스코드 공유

사이트맵(Sitemap)과 RSS 피드는 검색 엔진이 사이트의 구조와 새로운 콘텐츠를 빠르게 파악하도록 돕는 중요한 도구입니다. 요청하신 http://box-story.com/ 사이트의 구조를 바탕으로 표준 형식의 파일을 구성해 드립니다.

1. 사이트맵 (sitemap.xml)

사이트맵은 웹사이트의 모든 페이지 목록을 담은 XML 파일입니다. 아래 코드를 복사하여 sitemap.xml이라는 이름의 파일로 저장한 뒤, 웹사이트의 최상위 경로(루트 디렉토리)에 업로드하세요.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <!-- 메인 페이지 -->
  <url>
    <loc>http://box-story.com/</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <!-- 회사 소개 -->
  <url>
    <loc>http://box-story.com/company</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <!-- 포트폴리오/제품소개 -->
  <url>
    <loc>http://box-story.com/portfolio</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  <!-- 견적 문의 -->
  <url>
    <loc>http://box-story.com/contact</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
</urlset>

2. RSS 피드 (rss.xml)

RSS는 사이트의 최신 업데이트 정보를 배포하는 형식입니다. 아래 내용을 rss.xml 파일로 만들어 루트 디렉토리에 업로드하시면 됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>박스스토리 (Box Story)</title>
    <link>http://box-story.com/</link>
    <description>단상자, 칼라박스, 패키지 제작 전문 박스스토리입니다.</description>
    <language>ko-kr</language>
    <pubDate>Thu, 20 Aug 2026 09:12:39 +0900</pubDate>

    <item>
      <title>박스스토리 홈페이지 오픈</title>
      <link>http://box-story.com/</link>
      <description>맞춤형 패키지 제작 서비스를 시작합니다.</description>
      <pubDate>Thu, 20 Aug 2026 09:12:39 +0900</pubDate>
    </item>
  </channel>
</rss>

네이버 서치어드바이저 등록 방법

파일을 만드신 후에는 반드시 네이버 검색 엔진에 알려주어야 효과가 나타납니다.

1. 파일 업로드: 위에서 만든 두 파일을 홈페이지 서버의 메인 폴더(index 파일이 있는 곳)에 올립니다.
2. 서치어드바이저 접속: 네이버 서치어드바이저에 로그인합니다.
3. 사이트 선택: 등록된 http://box-story.com/ 사이트 관리 화면으로 들어갑니다.
4. 요청 > 사이트맵 제출: sitemap.xml 경로를 입력하고 확인을 누릅니다.
5. 요청 > RSS 제출: rss.xml 경로를 입력하고 확인을 누릅니다.

이 과정을 마치면 네이버 로봇이 사이트의 메뉴 구조를 더 정확하게 수집하게 되며, 시간이 지나면 검색 결과에 서브링크(메뉴)가 나타날 가능성이 높아집니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>

<script src="jquery.counterup.min.js"></script>

HTML

With default values from plugin instantiation.

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

jQuery

$('.counter').counterUp();

or with extra parameters

$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});

delay- 每次计数的延迟（以毫秒为单位）

time- 倒计时动画的总时长

offset- 计数器开始的视口百分位数（默认情况下为 100，这意味着它在元素进入视口的那一刻触发）

beginAt- 从其开始计数的数字

formatter- 回调函数用于格式化数字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Number Counting Up Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
.header { margin-top: 150px; text-align: center; }
.header h1{
text-align: center;
font-size: 50px;
margin: 0;
font-family: 'Inter';
}
.counter-flex {
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
}
.counter-box {
width: 350px;
}
.counter-box h2 {
font-size: 70px;
text-align: center;
font-family: 'Inter';
margin: 0;
}
.counter-box p{
text-align: center;
font-family: arial;
}
</style>
<body>
<div class="counter-flex">
<div class="counter-box">
<h2><span class="count">7000</span></h2>
<p>
Veterans Served<br />
Annually
</p>
</div>
<div class="counter-box">
<h2><span class="count">10000</span></h2>
<p>Lorem Ipsum</p>
</div>
<div class="counter-box">
<h2><span class="count">30000</span></h2>
<p>Lorem Ipsum</p>
</div>
<div class="counter-box">
<h2><span class="count">100000</span></h2>
<p>Lorem Ipsum</p>
</div>
</div>

<script>
$(".count").each(function () {
$(this).prop("Counter", 0).animate({
Counter: $(this).text(),
},{
duration: 4000,
easing: "swing",
step: function (now) {
now = Number(Math.ceil(now)).toLocaleString('en');
$(this).text(now);
},
});
});
</script>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Incremental Counter Plugin Demo</title>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.incremental-counter.js"></script>

<style>
body { background-color:#384047;}
.container { margin:150px auto; max-width:500px; text-align:center}
h1 { margin-bottom:30px; color:#fff; text-align:center;}
.incremental-counter{margin:1%}
.incremental-counter .num {
background: #eee;
border: 1px solid #fff;
border-radius: 4px;
color: #384047;
display: inline-block;
height: 64px;
line-height: 62px;
margin: 0 4.5px;
position: relative;
text-align: center;
top: -1px;
width: 50px;
font-size: 45px;
font-size: 3.72625em;
font-weight: 700;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
font-family: "Open Sans",Arial,Helvetica,sans-serif;
}
.incremental-counter .num::before {
background: #384047;
content: "";
display: block;
height: 1px;
left: -1px;
margin: -0.5px 0 0;
position: absolute;
right: -1px;
top: 50%;
width: auto;
}
</style>
</head>

<body>

<div class="container">
<div class="incremental-counter" data-value="55650"></div>
<div class="incremental-counter" data-value="360"></div>
<div class="incremental-counter" data-value="36200"></div>
</div>
<script>
$(".incremental-counter").incrementalCounter();
</script>

</body>
</html>

因需求要做一个，横向的文字从右到左的跑马灯 ,鼠标移动上去暂停，参考其他大大的跑马灯不太适用所以，自己再次封装了一个跑马灯，分享给大家也方便自己下次直接使用，我自己用的JQ版本为3.3.1（jquery-3.3.1.min.js）
先上效果图

代码部分为

HTML部分

<div style="padding: 0 1rem;">
<div id="container_small_tip">
<div id="content_small_tip"></div>
</div>
</div>

CSS部分

#container_small_tip{
background:#ffffff;
position:relative;
overflow:hidden;
width:100%;
height:36px;
line-height:36px;
}
#content_small_tip{
position:absolute;
left:0;
top:0;
white-space:nowrap;
color: #EBEEF7;
}

JS部分

调用方式为

var content = "自8888年8月8日起原基础强化班和原全面提升班合并升级为全面提分班，原全面提升班和原全面提升班所剩课时在升级后的全面提分班自动顺延";
$("#content_small_tip").html(content);
roll(2,"#container_small_tip","#content_small_tip");

跑马灯函数封装为

//跑马灯插件start
function roll(speed=1,fatherselect,select){
if ($(fatherselect) == null) return;
var $container = $(fatherselect);//#container_small_tip
var $content = $(select);//#content_small_tip
var init_left = $container.width();
$content.css({ left: parseInt(init_left) + "px" });
var This = this;
var time = setInterval(function () {move($container, $content, speed); }, 20);                //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装

$container.bind("mouseover", function () {
clearInterval(time);
});
$container.bind("mouseout", function () {
time = setInterval(function () {move($container, $content, speed); }, 20);
});
// setTimeout(function () { $("#container").slideUp(); }, 30000);  //毫秒单位，显示30s后消失
return this;
};
function move($container, $content, speed){
var container_width = $container.width();
var content_width = $content.width();
if (parseInt($content.css("left")) + content_width > 0) {
$content.css({ left: parseInt($content.css("left")) - speed + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
else {
$content.css({ left: parseInt(container_width) + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
}
//跑马灯插件end