commit 66bbede536d77c3a03da51a078152cf5bf2f517d Author: DUCK JIN Date: Tue Mar 3 17:24:06 2026 +0900 저장소 이관 diff --git a/favicon/bar-black.png b/favicon/bar-black.png new file mode 100644 index 0000000..e74cf91 Binary files /dev/null and b/favicon/bar-black.png differ diff --git a/favicon/bar-blue.png b/favicon/bar-blue.png new file mode 100644 index 0000000..850c81f Binary files /dev/null and b/favicon/bar-blue.png differ diff --git a/favicon/bar-gray.png b/favicon/bar-gray.png new file mode 100644 index 0000000..ab8833e Binary files /dev/null and b/favicon/bar-gray.png differ diff --git a/favicon/bar-green.png b/favicon/bar-green.png new file mode 100644 index 0000000..76eb474 Binary files /dev/null and b/favicon/bar-green.png differ diff --git a/favicon/bar-mint.png b/favicon/bar-mint.png new file mode 100644 index 0000000..5015e7d Binary files /dev/null and b/favicon/bar-mint.png differ diff --git a/favicon/bar-orange.png b/favicon/bar-orange.png new file mode 100644 index 0000000..3989731 Binary files /dev/null and b/favicon/bar-orange.png differ diff --git a/favicon/bar-purple.png b/favicon/bar-purple.png new file mode 100644 index 0000000..44493aa Binary files /dev/null and b/favicon/bar-purple.png differ diff --git a/favicon/bar-red.png b/favicon/bar-red.png new file mode 100644 index 0000000..167411c Binary files /dev/null and b/favicon/bar-red.png differ diff --git a/favicon/bar-white.png b/favicon/bar-white.png new file mode 100644 index 0000000..cc4a0cc Binary files /dev/null and b/favicon/bar-white.png differ diff --git a/favicon/bar-yellow.png b/favicon/bar-yellow.png new file mode 100644 index 0000000..82c76c3 Binary files /dev/null and b/favicon/bar-yellow.png differ diff --git a/favicon/default.png b/favicon/default.png new file mode 100644 index 0000000..1434fa2 Binary files /dev/null and b/favicon/default.png differ diff --git a/favicon/line-black.png b/favicon/line-black.png new file mode 100644 index 0000000..a906185 Binary files /dev/null and b/favicon/line-black.png differ diff --git a/favicon/line-blue.png b/favicon/line-blue.png new file mode 100644 index 0000000..ec2a9d7 Binary files /dev/null and b/favicon/line-blue.png differ diff --git a/favicon/line-gray.png b/favicon/line-gray.png new file mode 100644 index 0000000..c647e0a Binary files /dev/null and b/favicon/line-gray.png differ diff --git a/favicon/line-green.png b/favicon/line-green.png new file mode 100644 index 0000000..2fb71f7 Binary files /dev/null and b/favicon/line-green.png differ diff --git a/favicon/line-mint.png b/favicon/line-mint.png new file mode 100644 index 0000000..f3a8fb0 Binary files /dev/null and b/favicon/line-mint.png differ diff --git a/favicon/line-orange.png b/favicon/line-orange.png new file mode 100644 index 0000000..380cfc6 Binary files /dev/null and b/favicon/line-orange.png differ diff --git a/favicon/line-purple.png b/favicon/line-purple.png new file mode 100644 index 0000000..9179c8d Binary files /dev/null and b/favicon/line-purple.png differ diff --git a/favicon/line-red.png b/favicon/line-red.png new file mode 100644 index 0000000..9a43d54 Binary files /dev/null and b/favicon/line-red.png differ diff --git a/favicon/line-white.png b/favicon/line-white.png new file mode 100644 index 0000000..04f84f9 Binary files /dev/null and b/favicon/line-white.png differ diff --git a/favicon/line-yellow.png b/favicon/line-yellow.png new file mode 100644 index 0000000..bcfdaf4 Binary files /dev/null and b/favicon/line-yellow.png differ diff --git a/favicon/triangle-down-black.png b/favicon/triangle-down-black.png new file mode 100755 index 0000000..ebb7b49 Binary files /dev/null and b/favicon/triangle-down-black.png differ diff --git a/favicon/triangle-down-blue.png b/favicon/triangle-down-blue.png new file mode 100755 index 0000000..818afd5 Binary files /dev/null and b/favicon/triangle-down-blue.png differ diff --git a/favicon/triangle-down-gray.png b/favicon/triangle-down-gray.png new file mode 100755 index 0000000..64da924 Binary files /dev/null and b/favicon/triangle-down-gray.png differ diff --git a/favicon/triangle-down-green.png b/favicon/triangle-down-green.png new file mode 100755 index 0000000..f61cc6c Binary files /dev/null and b/favicon/triangle-down-green.png differ diff --git a/favicon/triangle-down-mint.png b/favicon/triangle-down-mint.png new file mode 100644 index 0000000..9a03b1b Binary files /dev/null and b/favicon/triangle-down-mint.png differ diff --git a/favicon/triangle-down-orange.png b/favicon/triangle-down-orange.png new file mode 100755 index 0000000..b76866a Binary files /dev/null and b/favicon/triangle-down-orange.png differ diff --git a/favicon/triangle-down-purple.png b/favicon/triangle-down-purple.png new file mode 100755 index 0000000..421b909 Binary files /dev/null and b/favicon/triangle-down-purple.png differ diff --git a/favicon/triangle-down-red.png b/favicon/triangle-down-red.png new file mode 100755 index 0000000..07ea011 Binary files /dev/null and b/favicon/triangle-down-red.png differ diff --git a/favicon/triangle-down-white.png b/favicon/triangle-down-white.png new file mode 100755 index 0000000..850414f Binary files /dev/null and b/favicon/triangle-down-white.png differ diff --git a/favicon/triangle-down-yellow.png b/favicon/triangle-down-yellow.png new file mode 100755 index 0000000..73523a9 Binary files /dev/null and b/favicon/triangle-down-yellow.png differ diff --git a/favicon/triangle-up-black.png b/favicon/triangle-up-black.png new file mode 100755 index 0000000..43cc3de Binary files /dev/null and b/favicon/triangle-up-black.png differ diff --git a/favicon/triangle-up-blue.png b/favicon/triangle-up-blue.png new file mode 100755 index 0000000..236352e Binary files /dev/null and b/favicon/triangle-up-blue.png differ diff --git a/favicon/triangle-up-gray.png b/favicon/triangle-up-gray.png new file mode 100755 index 0000000..e38dca9 Binary files /dev/null and b/favicon/triangle-up-gray.png differ diff --git a/favicon/triangle-up-green.png b/favicon/triangle-up-green.png new file mode 100755 index 0000000..c9e2c22 Binary files /dev/null and b/favicon/triangle-up-green.png differ diff --git a/favicon/triangle-up-mint.png b/favicon/triangle-up-mint.png new file mode 100755 index 0000000..57a4d4c Binary files /dev/null and b/favicon/triangle-up-mint.png differ diff --git a/favicon/triangle-up-orange.png b/favicon/triangle-up-orange.png new file mode 100755 index 0000000..a48c68f Binary files /dev/null and b/favicon/triangle-up-orange.png differ diff --git a/favicon/triangle-up-purple.png b/favicon/triangle-up-purple.png new file mode 100755 index 0000000..edc7a48 Binary files /dev/null and b/favicon/triangle-up-purple.png differ diff --git a/favicon/triangle-up-red.png b/favicon/triangle-up-red.png new file mode 100755 index 0000000..39e29f2 Binary files /dev/null and b/favicon/triangle-up-red.png differ diff --git a/favicon/triangle-up-white.png b/favicon/triangle-up-white.png new file mode 100755 index 0000000..05b56a2 Binary files /dev/null and b/favicon/triangle-up-white.png differ diff --git a/favicon/triangle-up-yellow.png b/favicon/triangle-up-yellow.png new file mode 100755 index 0000000..99d6e7f Binary files /dev/null and b/favicon/triangle-up-yellow.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d7301a1 --- /dev/null +++ b/index.html @@ -0,0 +1,354 @@ + + + + + + Bookmark Divider + + + + + + +

Bookmark Divider

+
북마크를 깔끔하게 정리하기 위해 만든 사이트입니다.
+
아래 색상 블록을 드래그하여 원하는 북마크 사이에 놓기만 하면 쉽게 등록할 수 있습니다.
+
폴더로 구분된 북마크에도 가로 또는 아이콘형 북마크와 이름을 추가하여 보기 좋게 섹션을 구성할 수 있습니다.
+ +
+
+
+

가로 라인

+
+
sample)
+ 가로 라인 +
+
+
+
+ Blue + +
+
+ Red + +
+
+ Green + +
+
+ Yellow + +
+
+ Orange + +
+
+ Purple + +
+
+ Gray + +
+
+ Mint + +
+
+ Black + +
+
+ White + +
+ + + +
+
+ +
+
+

세로 라인

+
+
sample)
+ 세로 라인 +
+
+
+
+ Blue + +
+
+ Red + +
+
+ Green + +
+
+ Yellow + +
+
+ Orange + +
+
+ Purple + +
+
+ Gray + +
+
+ Mint + +
+
+ Black + +
+
+ White + +
+
+
+
+ +
+
+
+

삼각형 (아래로)

+
+
sample)
+ 삼각형 다운 +
+
+
+
+ Blue + +
+
+ Red + +
+
+ Green + +
+
+ Yellow + +
+
+ Orange + +
+
+ Purple + +
+
+ Gray + +
+
+ Mint + +
+
+ Black + +
+
+ White + +
+
+
+ + +
+
+

삼각형 (위로)

+
+
sample)
+ 삼각형 다운 +
+
+
+
+ Blue + +
+
+ Red + +
+
+ Green + +
+
+ Yellow + +
+
+ Orange + +
+
+ Purple + +
+
+ Gray + +
+
+ Mint + +
+
+ Black + +
+
+ White + +
+
+
+
+ + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1ddd47e --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file