JWEB2 
PROJECT INQUIRY

Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

총 110건의 글

CSS 25.07.12 조회 563

CSS border-image로 이미지 테두리 만들기

CSS border-image 속성으로 이미지를 이용한 테두리를 만드는 CodePen 예제다. border-image-source에 이미지 URL을 지정하고 border-image-slice 값으로 9슬라이스 영역을 나누면, 이미지가 요소 테두리 전체에 자연스럽게 늘어나며 모서리와 변이 각각 다른 방식으로 표시된다.

See the Pen border-image by H J (@H-J-the-typescripter) on CodePen.

#css #border-image #border #image
CSS 25.07.12 조회 563

CSS fit-content 속성으로 콘텐츠 크기에 맞는 박스 만들기

CSS의 fit-content 속성을 활용해 박스 크기를 콘텐츠에 맞추는 CodePen 예제다. width나 height에 fit-content를 적용하면 요소가 내용물 크기만큼만 공간을 차지하도록 자동 조절된다. 버튼·배지·레이블 등 유연한 크기의 레이아웃을 만들 때 유용하다.

See the Pen fit-content by H J (@H-J-the-typescripter) on CodePen.

#css #fit-content #sizing #layout
CSS 25.07.06 조회 567

자바스크립트 없이 CSS popovertarget로 팝업창 만들기

JavaScript 없이 CSS의 popover 속성과 popovertarget 속성만으로 팝업창을 여닫는 방법을 보여주는 CodePen 예제다. 버튼 요소에 popovertarget="id"를 지정하고 대상 요소에 id와 popover 속성을 설정하면, 브라우저 기본 팝업 동작으로 모달을 구현할 수 있다.

See the Pen popovertarget by H J (@H-J-the-typescripter) on CodePen.

#css #popover #popup #html
jQuery 25.06.21 조회 473

jquery.counterup - 스크롤 진입 시 숫자 카운트 애니메이션

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 #counterup #waypoints #counter


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.

PROJECT INQUIRY