실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 108건의 글
CSS의 fit-content 속성을 활용해 박스 크기를 콘텐츠에 맞추는 CodePen 예제다. width나 height에 fit-content를 적용하면 요소가 내용물 크기만큼만 공간을 차지하도록 자동 조절된다. 버튼·배지·레이블 등 유연한 크기의 레이아웃을 만들 때 유용하다.
See the Pen fit-content by H J (@H-J-the-typescripter) on CodePen.
JavaScript 없이 CSS의 popover 속성과 popovertarget 속성만으로 팝업창을 여닫는 방법을 보여주는 CodePen 예제다. 버튼 요소에 popovertarget="id"를 지정하고 대상 요소에 id와 popover 속성을 설정하면, 브라우저 기본 팝업 동작으로 모달을 구현할 수 있다.
See the Pen popovertarget by H J (@H-J-the-typescripter) on CodePen.
jquery.counterup 플러그인으로 요소가 화면에 들어올 때 숫자를 카운트업하는 방법이다. waypoints와 counterup 스크립트를 로드하고 HTML에 class를 지정한 뒤 jQuery로 초기화한다. delay(카운트 지연), time(애니메이션 시간), offset(시작 시점), beginAt(시작 숫자), formatter(숫자 포맷) 등 파라미터를 설명한다.
<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- 回调函数用于格式化数字
jQuery의 animate 메서드로 숫자가 0부터 목표값까지 올라가는 카운팅 업 애니메이션 예제다. .count 요소마다 Counter 속성값을 요소의 텍스트까지 4초 동안 애니메이션하고, step 콜백에서 Math.ceil과 toLocaleString으로 천 단위 구분자가 있는 정수로 표시한다. HTML·CSS·JS 전체 코드를 제공한다.
<!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>jquery.incremental-counter 플러그인을 이용해 숫자가 점점 올라가는 애니메이션 카운터를 만드는 예제다. jQuery와 플러그인 파일을 로드하고, .incremental-counter 요소에 data-value 속성으로 목표 숫자를 지정한 뒤 incrementalCounter()를 호출하면 페이지 진입 시 숫자가 증가하며 표시된다.
<!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>프로젝트 문의 및 견적 요청은 언제든 환영합니다.