감성 라이트
메이커
따뜻한 분위기와 빛을 좋아하는 당신!
… 1순위 키트 (11번) …
나는 어떤 메이커?
만들닷 Makedot
감성 라이트
질문 10개로…
본문 (16px / 500)보조 설명
보조 (14px / 600, 진회색) - 질문·선택지 글자에 \n 이 있으면 그 자리에서 줄을 바꾼다 (white-space: pre-line). ===================================================================== */ .text-title { font-family: var(--font-pop); font-weight: 400; /* Bagel Fat One 은 굵기가 한 가지뿐 */ font-size: var(--text-title); line-height: var(--leading-tight); letter-spacing: -0.01em; } .text-question { font-size: var(--text-question); font-weight: var(--weight-heavy); line-height: var(--leading-snug); white-space: pre-line; text-wrap: balance; /* 줄 길이를 고르게 나눠 "…할 / 일은?"처럼 끝에 한 낱말만 넘어가지 않게 (지원 안 하는 브라우저는 무시) */ } .text-body { font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); } .text-small { font-size: var(--text-small); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-ink-sub); } /* ===================================================================== 3. 버튼 (주 버튼 · 보조 버튼) 쓰는 법: 이 키트 알아보기 두 개를 나란히:
따뜻한 분위기와 빛을 좋아하는 당신!
나에게 딱 맞는 키트
우드 무드등
나무 틀에 전구를 단 무드등을 만들어요.
개인정보는 수집하지 않아요
고르면 바로 다음 질문으로 넘어가요
- 14px 진회색 (크림 바탕 위 8.57:1). 시작 화면 맨 아래, 의견 남기기 아래 (D-31). ===================================================================== */ .notice { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--text-small); font-weight: var(--weight-medium); line-height: 1.4; color: var(--color-ink-sub); text-align: center; } .notice .icon { width: 16px; height: 16px; } .notice--left { justify-content: flex-start; text-align: left; } .notice--left .icon { width: 18px; height: 18px; } /* ===================================================================== 14. 움직임 (모두 한 번만, 0.3초 안팎, F-13) 쓰는 법: 움직일 요소에 클래스를 붙인다. 다시 움직이게 하려면 클래스를 뗐다가 다시 붙인다. .anim-slide-in 다음 질문이 오른쪽 24px에서 밀려 들어옴 (0.3초) .anim-slide-back 이전 질문으로 돌아갈 때는 왼쪽 24px에서 들어옴 (0.3초). 왜: 앞으로 = 오른쪽에서, 뒤로 = 왼쪽에서 오면 "되돌아갔다"는 것을 몸으로 느낀다 (03 조사 Top 10 4번, Material "같은 축" 전환) .anim-stick 결과 캐릭터가 0.92 → 1.04 → 1배로 "툭" 붙음 (0.4초, 한 번만 튕김) .anim-rise-in 유형 이름이 0.1초 늦게 6px 아래에서 올라오며 나타남 .anim-rise-late 1순위 키트 상자가 0.25초 늦게 8px 아래에서 올라오며 나타남 ("착" 끼워짐) .anim-twinkle 반짝이 별이 0.25초 늦게 작게 → 제 크기로 "반짝" (한 번만) .anim-hop 분석 중 아이콘이 통통 튐 (1.5초 한 바퀴, 2·3번째는 animation-delay 로 차례로). 분석 중 화면은 1.5초만 떠 있으므로 실제로는 한 바퀴만 보인다 - 모두 "보이는 모양"만 바꾼다. 움직이는 동안에도 버튼은 그대로 누를 수 있다 (F-13 "조작이 막히면 안 됨"). - "동작 줄이기" 설정이면 tokens.css·base.css 가 움직임을 끈다 (끝 모습만 바로 보임). - 계속 도는 효과, 화면을 덮는 꽃가루 효과는 쓰지 않는다 (C안 4-8). ===================================================================== */ @keyframes slide-in { from { opacity: 0; transform: translateX(var(--slide-distance)); } to { opacity: 1; transform: none; } } @keyframes slide-back { from { opacity: 0; transform: translateX(calc(var(--slide-distance) * -1)); } to { opacity: 1; transform: none; } } /* "툭": 0.92배 → 1.04배(한 번 넘침) → 1배. 곡선은 넘치지 않는 ease-out 을 쓴다. 왜: 넘치는 곡선(--ease-pop)까지 쓰면 칸마다 한 번씩 더 넘쳐 두 번 튕긴다 (03 조사 Top 10 7번) */ @keyframes stick { 0% { opacity: 0; transform: scale(0.92) rotate(-2deg); } 55% { opacity: 1; transform: scale(1.04) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(-2deg); } } @keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes rise-late { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes twinkle { from { opacity: 0; transform: scale(0.3) rotate(-30deg); } to { opacity: 1; transform: none; } } @keyframes hop { 0%, 46%, 100% { transform: translateY(0); } 18% { transform: translateY(-8px); } 32% { transform: translateY(0); } } .anim-slide-in { animation: slide-in var(--duration-screen) var(--ease-out) both; } .anim-slide-back { animation: slide-back var(--duration-screen) var(--ease-out) both; } .anim-stick { animation: stick var(--duration-pop) var(--ease-out) both; } .anim-rise-in { animation: rise-in var(--duration-screen) var(--ease-out) var(--delay-name) both; } .anim-rise-late { animation: rise-late var(--duration-screen) var(--ease-out) var(--delay-kit) both; } .anim-twinkle { animation: twinkle var(--duration-screen) var(--ease-pop) var(--delay-kit) both; } .anim-hop { animation: hop var(--duration-analyzing) ease-in-out infinite; }