뒤늦게라도 따라가려 노력중입니다.. ㅠㅠ
커스텀 위젯 30종 mac을 다운받았는데 메모장으로 열어서 해당 내용을 클릭하면 아래 스크린샷으로 보내드린 창으로 뜨는 데 어떻게 해야할까요..?
맥을 사용중입니다 ㅠㅠ
그리고 비포 애프터를 가지고 와서 메모장에서 열기 후에 비포 애프터를 클릭 후에 열었는데,
css가 아래처럼 나오고,
/* ============================================================
[D-3] before-after �� CSS ��
�� �ъ쭊 �� �붿냼�ㅼ� pointer-events:none �쇰줈 �먯뼱�� �쒕옒洹� �꾩튂 怨꾩궛�� �뺥솗�⑸땲��.
�� 洹쒖튃�� 吏��곗� 留덉꽭��.
============================================================ */
.nk-ba {
{{!-- @name color-frame-bg @type color @default #F0EAE1FF @label "�ъ쭊 �놁쓣 �� �먮━ ��" --}}
--nk-frame-bg: {{color-frame-bg}};
{{!-- @name color-bar @type color @default #FFFFFFFF @label "媛��대뜲 �몃줈�� ��" --}}
--nk-bar: {{color-bar}};
{{!-- @name color-knob-bg @type color @default #FFFFFFFF @label "�먯옟�� �숆렇�쇰� 諛곌꼍��" --}}
--nk-knob-bg: {{color-knob-bg}};
{{!-- @name color-knob-icon @type color @default #2B2723FF @label "�먯옟�� �붿궡�� ��" --}}
--nk-knob-icon: {{color-knob-icon}};
{{!-- @name color-tag-bg @type color @default #2B2723CC @label "BEFORE쨌AFTER �깆� 諛곌꼍��" --}}
--nk-tag-bg: {{color-tag-bg}};
{{!-- @name color-tag-text @type color @default #FFFFFFFF @label "BEFORE쨌AFTER �깆� 湲��⑥깋" --}}
--nk-tag-text: {{color-tag-text}};
{{!-- @name color-caption @type color @default #6B6259FF @label "�꾨옒 �덈궡 臾멸뎄 ��" --}}
--nk-caption: {{color-caption}};
{{!-- @name text-radius @type textfield @default "12" @label "�ъ쭊 紐⑥꽌由� �κ�湲� (�レ옄留�, 0�대㈃ 媛곸쭚)" @placeholder "12" --}}
--nk-radius: {{text-radius}}px;
{{!-- @name text-knob-size @type textfield @default "44" @label "�먯옟�� �숆렇�쇰� �ш린 (�レ옄留�, ��: 44)" @placeholder "44" --}}
--nk-knob-size: {{text-knob-size}}px;
box-sizing: border-box;
font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
font-style: normal;
}
.nk-ba * { box-sizing: border-box; }
.nk-ba__frame {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--nk-radius);
background: var(--nk-frame-bg);
aspect-ratio: 4 / 3;
touch-action: pan-y;
cursor: ew-resize;
user-select: none;
}
.nk-ba[data-ratio="1x1"] .nk-ba__frame { aspect-ratio: 1 / 1; }
.nk-ba[data-ratio="16x9"] .nk-ba__frame { aspect-ratio: 16 / 9; }
.nk-ba[data-ratio="3x4"] .nk-ba__frame { aspect-ratio: 3 / 4; }
.nk-ba__img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* �댄썑 �ъ쭊�� �ㅻⅨ履쎌뿉 蹂댁엯�덈떎. �먯옟�대� ��린硫� �먮컮�ㅽ겕由쏀듃媛� �섎━�� ��쓣 諛붽퓠�덈떎. */
.nk-ba__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip-path: inset(0 0 0 50%);
pointer-events: none;
}
.nk-ba__tag {
position: absolute;
top: 14px;
padding: 6px 12px;
border-radius: 999px;
background: var(--nk-tag-bg);
color: var(--nk-tag-text);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
pointer-events: none;
}
.nk-ba__tag--before { left: 14px; }
.nk-ba__tag--after { right: 14px; }
.nk-ba__tag:empty { display: none; }
.nk-ba__handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
background: var(--nk-bar);
pointer-events: none;
}
.nk-ba__handle:focus-visible { outline: 2px solid var(--nk-knob-icon); outline-offset: 2px; }
.nk-ba__knob {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: var(--nk-knob-size);
height: var(--nk-knob-size);
margin-top: calc(var(--nk-knob-size) / -2);
margin-left: calc(var(--nk-knob-size) / -2);
border-radius: 50%;
background: var(--nk-knob-bg);
color: var(--nk-knob-icon);
}
/* SVG �ш린 怨좎젙 �� 吏��곕㈃ �붿궡�쒓� 嫄곕��댁쭛�덈떎 */
.nk-ba__knob svg { width: 20px; height: 20px; }
.nk-ba__caption {
margin: 12px 0 0;
color: var(--nk-caption);
font-size: 13px;
font-weight: 400;
line-height: 1.6;
letter-spacing: -0.01em;
text-align: center;
}
@media (max-width: 768px) {
.nk-ba__knob { width: min(var(--nk-knob-size), 38px); height: min(var(--nk-knob-size), 38px); }
.nk-ba__tag { top: 10px; padding: 5px 10px; font-size: 11px; }
.nk-ba__tag--before { left: 10px; }
.nk-ba__tag--after { right: 10px; }
}
/* ���� �꾩젽�� �볦씤 "移�"�� �덈퉬 湲곗� 諛섏쓳�� ������������������������������������
�꾩엫�� �몄쭛�붾㈃�� 紐⑤컮�� 蹂닿린�� 釉뚮씪�곗� 李쎌씠 �꾨땲�� �꾩젽 移몃쭔 醫곸븘�몄꽌
�꾩쓽 @media 洹쒖튃�� 諛쒕룞�섏� �딆뒿�덈떎. 洹몃옒�� �먮컮�ㅽ겕由쏀듃媛� 移� �덈퉬瑜� �ъ뼱
data-w="mo"(醫곸쓬) / data-w="pc"(�볦쓬) 瑜� 遺숈뿬二쇨퀬, �꾨옒 洹쒖튃�� 洹몃븣 �곸슜�⑸땲��.
�� @media 洹쒖튃怨� �댁슜�� 媛숈뒿�덈떎. �쒖そ留� 怨좎튂硫� �붾㈃�� �닿툔�섎땲 �④퍡 怨좎튂�몄슂. */
.nk-ba[data-w="mo"] .nk-ba__knob { width: min(var(--nk-knob-size), 38px); height: min(var(--nk-knob-size), 38px); }
.nk-ba[data-w="mo"] .nk-ba__tag { top: 10px; padding: 5px 10px; font-size: 11px; }
.nk-ba[data-w="mo"] .nk-ba__tag--before { left: 10px; }
.nk-ba[data-w="mo"] .nk-ba__tag--after { right: 10px; }
html도 <> 이 그림과 함께 아래 위로 텍스트가 분리되어 나오고 있습니다. (<div> 가 없습니다..)
{{!-- ============================================================ [D-3] before-after — 전후 사진 비교 (손잡이를 좌우로 끌기) ▶ 이 파일 내용을 위젯 스튜디오 "HTML" 탭에 붙여넣으세요. ▶ 두 사진은 반드시 같은 비율·같은 구도로 찍은 것을 넣어야 자연스럽습니다. ============================================================ --}} {{!-- @name image-before @type image @label "이전 사진 (왼쪽에 보입니다)" --}} {{!-- @name image-after @type image @label "이후 사진 (오른쪽에 보입니다)" --}} {{!-- @name text-label-before @type textfield @default "BEFORE" @label "이전 사진 딱지 글씨 (비우면 안 보입니다)" --}} {{!-- @name text-label-after @type textfield @default "AFTER" @label "이후 사진 딱지 글씨 (비우면 안 보입니다)" --}} {{!-- @name text-caption @type textfield @default "손잡이를 좌우로 움직여 비교해 보세요" @label "사진 아래 안내 문구 (비우면 안 보입니다)" --}} {{!-- @name select-ratio @type select @values 4x3,1x1,16x9,3x4 @valueNames "가로형 (4:3)","정사각형 (1:1)","와이드 (16:9)","세로형 (3:4)" @default 4x3 @label "사진 비율" --}}
{{#if image-before}} {{/if}}
{{text-label-before}} {{text-label-after}}
{{#if text-caption}}
{{text-caption}}
{{/if}}
제가 초보라 .. 이해를 잘 못하고 있네요 ㅠㅠ