저장소 이관
DUCK JIN
BIN
favicon/bar-black.png
Normal file
|
After Width: | Height: | Size: 196 B |
BIN
favicon/bar-blue.png
Normal file
|
After Width: | Height: | Size: 193 B |
BIN
favicon/bar-gray.png
Normal file
|
After Width: | Height: | Size: 196 B |
BIN
favicon/bar-green.png
Normal file
|
After Width: | Height: | Size: 200 B |
BIN
favicon/bar-mint.png
Normal file
|
After Width: | Height: | Size: 161 B |
BIN
favicon/bar-orange.png
Normal file
|
After Width: | Height: | Size: 200 B |
BIN
favicon/bar-purple.png
Normal file
|
After Width: | Height: | Size: 201 B |
BIN
favicon/bar-red.png
Normal file
|
After Width: | Height: | Size: 189 B |
BIN
favicon/bar-white.png
Normal file
|
After Width: | Height: | Size: 189 B |
BIN
favicon/bar-yellow.png
Normal file
|
After Width: | Height: | Size: 197 B |
BIN
favicon/default.png
Normal file
|
After Width: | Height: | Size: 407 B |
BIN
favicon/line-black.png
Normal file
|
After Width: | Height: | Size: 165 B |
BIN
favicon/line-blue.png
Normal file
|
After Width: | Height: | Size: 162 B |
BIN
favicon/line-gray.png
Normal file
|
After Width: | Height: | Size: 165 B |
BIN
favicon/line-green.png
Normal file
|
After Width: | Height: | Size: 170 B |
BIN
favicon/line-mint.png
Normal file
|
After Width: | Height: | Size: 191 B |
BIN
favicon/line-orange.png
Normal file
|
After Width: | Height: | Size: 170 B |
BIN
favicon/line-purple.png
Normal file
|
After Width: | Height: | Size: 171 B |
BIN
favicon/line-red.png
Normal file
|
After Width: | Height: | Size: 161 B |
BIN
favicon/line-white.png
Normal file
|
After Width: | Height: | Size: 161 B |
BIN
favicon/line-yellow.png
Normal file
|
After Width: | Height: | Size: 166 B |
BIN
favicon/triangle-down-black.png
Executable file
|
After Width: | Height: | Size: 683 B |
BIN
favicon/triangle-down-blue.png
Executable file
|
After Width: | Height: | Size: 583 B |
BIN
favicon/triangle-down-gray.png
Executable file
|
After Width: | Height: | Size: 633 B |
BIN
favicon/triangle-down-green.png
Executable file
|
After Width: | Height: | Size: 655 B |
BIN
favicon/triangle-down-mint.png
Normal file
|
After Width: | Height: | Size: 470 B |
BIN
favicon/triangle-down-orange.png
Executable file
|
After Width: | Height: | Size: 663 B |
BIN
favicon/triangle-down-purple.png
Executable file
|
After Width: | Height: | Size: 672 B |
BIN
favicon/triangle-down-red.png
Executable file
|
After Width: | Height: | Size: 440 B |
BIN
favicon/triangle-down-white.png
Executable file
|
After Width: | Height: | Size: 516 B |
BIN
favicon/triangle-down-yellow.png
Executable file
|
After Width: | Height: | Size: 649 B |
BIN
favicon/triangle-up-black.png
Executable file
|
After Width: | Height: | Size: 616 B |
BIN
favicon/triangle-up-blue.png
Executable file
|
After Width: | Height: | Size: 570 B |
BIN
favicon/triangle-up-gray.png
Executable file
|
After Width: | Height: | Size: 603 B |
BIN
favicon/triangle-up-green.png
Executable file
|
After Width: | Height: | Size: 621 B |
BIN
favicon/triangle-up-mint.png
Executable file
|
After Width: | Height: | Size: 477 B |
BIN
favicon/triangle-up-orange.png
Executable file
|
After Width: | Height: | Size: 627 B |
BIN
favicon/triangle-up-purple.png
Executable file
|
After Width: | Height: | Size: 636 B |
BIN
favicon/triangle-up-red.png
Executable file
|
After Width: | Height: | Size: 443 B |
BIN
favicon/triangle-up-white.png
Executable file
|
After Width: | Height: | Size: 515 B |
BIN
favicon/triangle-up-yellow.png
Executable file
|
After Width: | Height: | Size: 626 B |
354
index.html
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Bookmark Divider</title>
|
||||||
|
<link id="favicon" rel="icon" href="./favicon/default.png">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 id="site-title">Bookmark Divider</h1>
|
||||||
|
<div>북마크를 깔끔하게 정리하기 위해 만든 사이트입니다.</div>
|
||||||
|
<div>아래 색상 블록을 드래그하여 원하는 북마크 사이에 놓기만 하면 쉽게 등록할 수 있습니다.</div>
|
||||||
|
<div>폴더로 구분된 북마크에도 가로 또는 아이콘형 북마크와 이름을 추가하여 보기 좋게 섹션을 구성할 수 있습니다.</div>
|
||||||
|
|
||||||
|
<div class="line-container">
|
||||||
|
<div class="section-line">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>가로 라인</h2>
|
||||||
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
||||||
|
<div style="margin-bottom: 10px;">sample)</div>
|
||||||
|
<img src="./favicon/line-green.png" alt="가로 라인">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-container">
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="blue">Blue</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="blue" href="?type=line-blue" draggable="true"
|
||||||
|
style="background-color:#3498db;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="red">Red</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="red" href="?type=line-red" draggable="true"
|
||||||
|
style="background-color:#e74c3c;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="green">Green</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="green" href="?type=line-green" draggable="true"
|
||||||
|
style="background-color:#2ecc71;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="yellow">Yellow</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="yellow" href="?type=line-yellow" draggable="true"
|
||||||
|
style="background-color:#f1c40f;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="orange">Orange</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="orange" href="?type=line-orange" draggable="true"
|
||||||
|
style="background-color:#e67e22;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="purple">Purple</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="purple" href="?type=line-purple" draggable="true"
|
||||||
|
style="background-color:#9b59b6;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="gray">Gray</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="gray" href="?type=line-gray" draggable="true"
|
||||||
|
style="background-color:#7f8c8d;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="mint">Mint</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="mint" href="?type=line-mint" draggable="true"
|
||||||
|
style="background-color:#00ffff;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="black">Black</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="black" href="?type=line-black" draggable="true"
|
||||||
|
style="background-color:#222222;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="line" data-color="white">White</span>
|
||||||
|
<a class="color-block" data-type="line" data-color="white" href="?type=line-white" draggable="true"
|
||||||
|
style="background-color:#ffffff;"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-bar">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>세로 라인</h2>
|
||||||
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
||||||
|
<div style="margin-bottom: 10px;">sample)</div>
|
||||||
|
<img src="./favicon/bar-green.png" alt="세로 라인">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-container">
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="blue">Blue</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="blue" href="?type=bar-blue" draggable="true"
|
||||||
|
style="background-color:#3498db;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="red">Red</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="red" href="?type=bar-red" draggable="true"
|
||||||
|
style="background-color:#e74c3c;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="green">Green</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="green" href="?type=bar-green" draggable="true"
|
||||||
|
style="background-color:#2ecc71;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="yellow">Yellow</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="yellow" href="?type=bar-yellow" draggable="true"
|
||||||
|
style="background-color:#f1c40f;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="orange">Orange</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="orange" href="?type=bar-orange" draggable="true"
|
||||||
|
style="background-color:#e67e22;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="purple">Purple</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="purple" href="?type=bar-purple" draggable="true"
|
||||||
|
style="background-color:#9b59b6;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="gray">Gray</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="gray" href="?type=bar-gray" draggable="true"
|
||||||
|
style="background-color:#7f8c8d;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="mint">Mint</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="mint" href="?type=bar-mint" draggable="true"
|
||||||
|
style="background-color:#00ffff;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="black">Black</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="black" href="?type=bar-black" draggable="true"
|
||||||
|
style="background-color:#222222;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="bar" data-color="white">White</span>
|
||||||
|
<a class="color-block" data-type="bar" data-color="white" href="?type=bar-white" draggable="true"
|
||||||
|
style="background-color:#ffffff;"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="line-container">
|
||||||
|
<div class="section-bar">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>삼각형 (아래로)</h2>
|
||||||
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
||||||
|
<div style="margin-bottom: 10px;">sample)</div>
|
||||||
|
<img src="./favicon/triangle-down-green.png" alt="삼각형 다운">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-container">
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="blue">Blue</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="blue" href="?type=triangle-down-blue"
|
||||||
|
draggable="true" style="background-color:#3498db;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="red">Red</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="red" href="?type=triangle-down-red"
|
||||||
|
draggable="true" style="background-color:#e74c3c;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="green">Green</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="green" href="?type=triangle-down-green"
|
||||||
|
draggable="true" style="background-color:#2ecc71;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="yellow">Yellow</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="yellow" href="?type=triangle-down-yellow"
|
||||||
|
draggable="true" style="background-color:#f1c40f;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="orange">Orange</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="orange" href="?type=triangle-down-orange"
|
||||||
|
draggable="true" style="background-color:#e67e22;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="purple">Purple</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="purple" href="?type=triangle-down-purple"
|
||||||
|
draggable="true" style="background-color:#9b59b6;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="gray">Gray</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="gray" href="?type=triangle-down-gray"
|
||||||
|
draggable="true" style="background-color:#7f8c8d;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="mint">Mint</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="mint" href="?type=triangle-down-mint"
|
||||||
|
draggable="true" style="background-color:#00ffff;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="black">Black</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="black" href="?type=triangle-down-black"
|
||||||
|
draggable="true" style="background-color:#222222;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-down" data-color="white">White</span>
|
||||||
|
<a class="color-block" data-type="triangle-down" data-color="white" href="?type=triangle-down-white"
|
||||||
|
draggable="true" style="background-color:#ffffff;"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="section-bar">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>삼각형 (위로)</h2>
|
||||||
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
||||||
|
<div style="margin-bottom: 10px;">sample)</div>
|
||||||
|
<img src="./favicon/triangle-up-green.png" alt="삼각형 다운">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-container">
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="blue">Blue</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="blue" href="?type=triangle-up-blue"
|
||||||
|
draggable="true" style="background-color:#3498db;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="red">Red</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="red" href="?type=triangle-up-red" draggable="true"
|
||||||
|
style="background-color:#e74c3c;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="green">Green</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="green" href="?type=triangle-up-green"
|
||||||
|
draggable="true" style="background-color:#2ecc71;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="yellow">Yellow</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="yellow" href="?type=triangle-up-yellow"
|
||||||
|
draggable="true" style="background-color:#f1c40f;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="orange">Orange</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="orange" href="?type=triangle-up-orange"
|
||||||
|
draggable="true" style="background-color:#e67e22;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="purple">Purple</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="purple" href="?type=triangle-up-purple"
|
||||||
|
draggable="true" style="background-color:#9b59b6;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="gray">Gray</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="gray" href="?type=triangle-up-gray"
|
||||||
|
draggable="true" style="background-color:#7f8c8d;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="mint">Mint</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="mint" href="?type=triangle-up-mint"
|
||||||
|
draggable="true" style="background-color:#00ffff;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="black">Black</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="black" href="?type=triangle-up-black"
|
||||||
|
draggable="true" style="background-color:#222222;"></a>
|
||||||
|
</div>
|
||||||
|
<div class="color-row">
|
||||||
|
<span class="color-name" data-type="triangle-up" data-color="white">White</span>
|
||||||
|
<a class="color-block" data-type="triangle-up" data-color="white" href="?type=triangle-up-white"
|
||||||
|
draggable="true" style="background-color:#ffffff;"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Coupang -->
|
||||||
|
<div class="ads_coupang">
|
||||||
|
<iframe
|
||||||
|
src="https://ads-partners.coupang.com/widgets.html?id=915533&template=carousel&trackingCode=AF6561083&subId=&width=1280&height=128&tsource="
|
||||||
|
width="100%" height="128" frameborder="0" scrolling="no" referrerpolicy="unsafe-url" browsingtopics></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const favicon = document.getElementById('favicon');
|
||||||
|
const siteTitle = document.getElementById('site-title');
|
||||||
|
|
||||||
|
// 왼쪽 이름 클릭 → URL & 파비콘 변경
|
||||||
|
const colorNames = document.querySelectorAll('.color-name');
|
||||||
|
colorNames.forEach(name => {
|
||||||
|
name.addEventListener('click', () => {
|
||||||
|
const type = name.dataset.type;
|
||||||
|
const color = name.dataset.color;
|
||||||
|
const combined = `${type}-${color}`;
|
||||||
|
const newUrl = `${window.location.pathname}?type=${combined}`;
|
||||||
|
|
||||||
|
history.pushState(null, '', newUrl);
|
||||||
|
favicon.href = `favicon/${combined}.png`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 오른쪽 색상 블록 클릭은 아무 동작 없이 드래그만 가능
|
||||||
|
const colorBlocks = document.querySelectorAll('.color-block');
|
||||||
|
colorBlocks.forEach(block => {
|
||||||
|
block.addEventListener('click', e => e.preventDefault()); // 클릭 무시
|
||||||
|
});
|
||||||
|
|
||||||
|
// 사이트명 클릭 → 디폴트 상태
|
||||||
|
siteTitle.addEventListener('click', () => {
|
||||||
|
history.pushState(null, '', window.location.pathname);
|
||||||
|
favicon.href = 'favicon/default.png';
|
||||||
|
updateSelectedBlock();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 페이지 로드 시 쿼리 읽어서 파비콘 적용
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const typeParam = params.get('type');
|
||||||
|
if (typeParam) {
|
||||||
|
favicon.href = `favicon/${typeParam}.png`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelectedBlock() {
|
||||||
|
// 기존 선택 표시 제거
|
||||||
|
document.querySelectorAll('.color-block.selected').forEach(el => el.classList.remove('selected'));
|
||||||
|
|
||||||
|
// URL 쿼리 확인
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const typeParam = params.get('type');
|
||||||
|
|
||||||
|
if (!typeParam) return;
|
||||||
|
|
||||||
|
const selectedBlock = document.querySelector(`.color-block[href="?type=${typeParam}"]`);
|
||||||
|
if (selectedBlock) selectedBlock.classList.add('selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 이름 클릭 시 선택 표시 업데이트
|
||||||
|
colorNames.forEach(name => {
|
||||||
|
name.addEventListener('click', () => {
|
||||||
|
const type = name.dataset.type;
|
||||||
|
const color = name.dataset.color;
|
||||||
|
const combined = `${type}-${color}`;
|
||||||
|
const newUrl = `${window.location.pathname}?type=${combined}`;
|
||||||
|
|
||||||
|
history.pushState(null, '', newUrl);
|
||||||
|
favicon.href = `favicon/${combined}.png`;
|
||||||
|
|
||||||
|
updateSelectedBlock();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('load', updateSelectedBlock);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
194
style.css
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
/* 기본 바디 설정 */
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
color: #2c3e50;
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 1rem 9rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 사이트 제목 */
|
||||||
|
#site-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#site-title:hover {
|
||||||
|
color: #2ecc71;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 소개글 */
|
||||||
|
body>div {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 섹션 제목 */
|
||||||
|
h2 {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #2ecc71;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 색상 컨테이너: 표 형태 */
|
||||||
|
.color-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
width: 100%;
|
||||||
|
gap: 0.5rem;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 10px 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 한 줄(row) */
|
||||||
|
.color-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 셀 스타일 */
|
||||||
|
.color-name,
|
||||||
|
.color-block {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-block {
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-block.selected::after {
|
||||||
|
content: "선택됨";
|
||||||
|
position: absolute;
|
||||||
|
right: 0.25rem;
|
||||||
|
bottom: 0.25rem;
|
||||||
|
font-size: 10px;
|
||||||
|
color: white;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hover 시 살짝 커짐 + 그림자 */
|
||||||
|
.color-block:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 색상 이름 */
|
||||||
|
.color-name {
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1rem;
|
||||||
|
user-select: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-name:hover {
|
||||||
|
color: #2ecc71;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 색상 블록 */
|
||||||
|
.color-block {
|
||||||
|
width: 50px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: grab;
|
||||||
|
border: 2px solid #ecf0f1;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
margin-left: auto;
|
||||||
|
/* span과 색상 블록 사이 공간 확보 후 블록 오른쪽으로 배치 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-block:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 테이블 스타일링 */
|
||||||
|
.color-row:nth-child(odd) {
|
||||||
|
background-color: #ecf0f1;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-row:nth-child(even) {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 반응형: 좁은 화면에서는 세로 정렬 */
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.color-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-name,
|
||||||
|
.color-block {
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-block {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 672px) {
|
||||||
|
.line-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ads_coupang {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.ads_coupang iframe {
|
||||||
|
max-height: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 640px) {
|
||||||
|
.ads_coupang {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ads_coupang iframe {
|
||||||
|
max-height: 128px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header img {
|
||||||
|
width: 36px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||