로고를 흰색으로 만들기
.org .plate img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .85;
transition: opacity .2s;
}실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 110건의 글
.org .plate img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .85;
transition: opacity .2s;
}일반적인 카운팅 방식과 달리, 각 숫자가 실제 슬롯머신처럼 빠르게 회전하다가 탄성 있게 멈추는 효과가 특징입니다.
cubic-bezier 애니메이션을 사용하여 멈출 때 살짝 튕기는 듯한 리얼한 움직임을 보여줍니다.font-size나 color를 수정하여 사이트 분위기에 맞게 바로 적용할 수 있습니다.이 스크립트는 jQuery 기반으로 작성되었으며, HTML 편집 모드에서 스타일(CSS)과 스크립트(JS)를 함께 넣어 바로 사용하실 수 있습니다. 이벤트 페이지나 포인트 현황판 등에 활용해 보세요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pen</title>
</head>
<body>
<style>
.timer {
display: flex;
font-family: 'Arial Black', sans-serif;
font-size: 64px;
font-weight: bold;
color: #333;
overflow: hidden;
height: 1.2em; /* 숫자 높이 */
}
.slot-column {
display: flex;
flex-direction: column;
/* 1.2초 동안 빠르게 회전 후 탄성 있게 멈춤 */
transition: transform 2.2s ease;
}
.slot-number {
height: 1.2em;
display: flex;
align-items: center;
justify-content: center;
width: 0.8em;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
function startRichSlot($timer) {
const targetValue = $timer.text().trim();
const digits = targetValue.split('');
$timer.empty();
digits.forEach((digit, index) => {
const $column = $('<div class="slot-column"></div>');
// 숫자를 3세트 반복하여 풍성하게 만듦 (0-9, 0-9, 0-9)
// 실제 멈추는 곳은 마지막 세트의 목표 숫자
for (let s = 0; s < 3; s++) {
for (let i = 0; i <= 9; i++) {
$column.append(`<div class="slot-number">${i}</div>`);
}
}
$timer.append($column);
// 강제 리플로우 (애니메이션 준비)
$column[0].offsetHeight;
// 애니메이션 실행
setTimeout(() => {
// 20번째 위치(두 세트 뒤) + 목표 숫자만큼 이동하여 훨씬 많이 회전함
const finalPosition = 20 + parseInt(digit);
const moveY = -(finalPosition * 1.2); // 1.2em은 CSS의 height와 일치해야 함
$column.css({
'transform': `translateY(${moveY}em)`,
'transition-duration': `${1 + (index * 0.6)}s` // 뒤로 갈수록 살짝 늦게 멈춤
});
}, 50);
});
}
// 실행
$('.timer').each(function() {
startRichSlot($(this));
});
});
</script>
<div class="timer" data-value="1045">1045</div>
</body>
</html>See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
사이트맵(Sitemap)과 RSS 피드는 검색 엔진이 사이트의 구조와 새로운 콘텐츠를 빠르게 파악하도록 돕는 중요한 도구입니다. 요청하신 http://box-story.com/ 사이트의 구조를 바탕으로 표준 형식의 파일을 구성해 드립니다.
사이트맵(Sitemap)과 RSS 피드는 검색 엔진이 사이트의 구조와 새로운 콘텐츠를 빠르게 파악하도록 돕는 중요한 도구입니다. 요청하신 http://box-story.com/ 사이트의 구조를 바탕으로 표준 형식의 파일을 구성해 드립니다.
사이트맵은 웹사이트의 모든 페이지 목록을 담은 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>
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>
파일을 만드신 후에는 반드시 네이버 검색 엔진에 알려주어야 효과가 나타납니다.
http://box-story.com/ 사이트 관리 화면으로 들어갑니다.sitemap.xml 경로를 입력하고 확인을 누릅니다.rss.xml 경로를 입력하고 확인을 누릅니다.이 과정을 마치면 네이버 로봇이 사이트의 메뉴 구조를 더 정확하게 수집하게 되며, 시간이 지나면 검색 결과에 서브링크(메뉴)가 나타날 가능성이 높아집니다.
ComfyUI 업데이트 후 생성 이미지가 시커멓게 나오는 문제의 해결 방법이다. attention.py에서 optimized_attention = attention_sage를 attention_pytorch로 바꿔 PyTorch Attention을 강제로 사용하거나, Sage Attention을 2.x로 업그레이드하고, 绘世启动器 설정에서 sage attention을 끄는 방법을 단계별로 정리했다.
제공해주신 ComfyUI Sage Attention 충돌 해결 방안을 마크다운 형식으로 정리해 드립니다. 나중에 참고하시거나 다른 분들과 공유하실 때 활용하시기 바랍니다.
Z-Image 계열 모델 사용 시 발생하는 Sage Attention 충돌 문제를 해결하기 위한 가이드입니다. 업데이트 시 패치가 초기화될 수 있으므로 상황에 맞는 방법을 선택하세요.
E:\ComfyUI-aki-v3\ComfyUI\comfy\ldm\modules\attention.pySage Attention 옵션이 켜져 있어도 실제로는 PyTorch Attention을 사용하도록 강제로 우회하는 방법입니다.
"Using sage attention" 문구를 찾습니다.[변경 전]
logging.info("Using sage attention")
optimized_attention = attention_sage
[변경 후]
logging.info("Using sage attention (forced pytorch fallback)")
optimized_attention = attention_pytorch
충돌의 원인인 구버전(v1.0.6 등)을 최신 버전으로 업데이트하여 근본적인 문제를 해결합니다.
"E:\ComfyUI-aki-v3\python\python.exe" -m pip install sageattention --upgrade
업데이트 시마다 패치가 날아가는 번거로움을 피하기 위해 아예 기능을 끄는 방법입니다.
--use-sage-attention 항목을 찾아 체크 해제**
Nginx 환경에서 .html·.htm 파일에서도 PHP 코드가 실행되도록 설정하는 방법이다. /www/server/nginx/conf의 enable-php-74.conf에서 location 정규식 매칭에 html·htm을 추가하고, /www/server/php/74/etc/php-fpm.conf의 security.limit_extensions에 .html·.htm 확장자를 등록한 뒤 저장하면 된다.
由于你换了版本,Nginx 现在引用的应该是 enable-php-74.conf。
/www/server/nginx/conf/enable-php-74.confhtml 和 htm):location ~ [^/]\.(php|php5|html|htm)(/|$)
{
try_files $uri =404;
fastcgi_pass unix:/tmp/php-cgi-74.sock;
fastcgi_index index.php;
include fastcgi.conf;
include pathinfo.conf;
}
/www/server/php/74/etc/php-fpm.conf 并双击打开。security.limit_extensions = .php .php3 .php4 .php5 .php7 .html .htm프로젝트 문의 및 견적 요청은 언제든 환영합니다.