러브로그 · 위젯

HTML 위젯

직접 짠 HTML 조각을 위젯 카드 안에 넣습니다. 상태창·표·배너 격자·마키 텍스트처럼 CSS만으로는 만들기 어려운 작은 블록에 씁니다.

1. 꾸미기 → 위젯 구성에서 「HTML」을 추가합니다. 홈당 7개까지입니다.
2. ✎에 코드를 붙여 넣습니다. 위젯당 10,000자까지입니다.
3. 아래 저장 바의 [저장]을 누릅니다.

• 🎞 「홈 전체 폭으로」 — 아래 다섯 자리 중 한 곳에 두면 옆 칸을 벗어나 홈 폭(헤더와 같은 폭)을 가로지릅니다.
  • 헤더 위(맨 꼭대기) · 헤더 바로 아래 · 카테고리 줄 아래 · 홈 맨 아래(사진 스트립 위) · 바닥(사진 스트립 아래 · 홈 끝)
  • 폭을 넓히는 건 코드가 아니라 이 설정입니다. 옆 칸에 둔 채로는 width:100%를 써도 그 칸 폭까지만 늘어납니다.
  함께 켤 수 있는 것:
  • ⬜ 「여백 없음 (칸 폭 꽉 채우기)」 — 카드 · 테두리 · 제목 줄 · 안쪽 여백 · 둥근 모서리를 전부 빼고 칸 끝까지 채웁니다.
  • ↔ 「화면 양쪽 끝까지」 — 띠 자리에서만. 홈 폭(최대 1320px)을 넘어 브라우저 화면 양쪽 끝까지 깔립니다.
  • ⬆ 「화면 맨 위까지 붙이기」 — 「헤더 위」 + 「양쪽 끝까지」일 때만. 홈 위쪽 여백까지 덮어 화면 맨 위에 붙습니다(오른쪽 위 LOVELOG · GUIDE 글자는 그 위에 떠 있으니 배너 윗부분 색을 신경 써 주세요).
  • ⬇ 「화면 맨 아래까지 붙이기」 — 「바닥」 + 「양쪽 끝까지」일 때만. 홈 아래쪽 여백까지 덮어 브라우저 바닥에 붙습니다. 맨 아래 「─── ◈ ─── LOVELOG」 줄은 띠 바로 위로 올리거나(기본) 숨길 수 있습니다.
  • 🖼 「대문 사진 스트립 대신」 — 「바닥」 자리일 때. 03의 사진 스트립을 접고 이 띠가 그 자리를 씁니다. 스트립 설정은 남아 있어서 체크를 풀면 돌아옵니다.
  • 오른쪽 위 LOVELOG · GUIDE 표시줄과 겹치는 게 신경 쓰이면 표시줄에서 모양 · 자리를 바꾸거나 접어 둘 수 있습니다.
  • 헤더를 통째로 HTML로 만들려면 — 구조 · 헤더에서 헤더를 「없음」으로 두고, 위 세 가지를 켠 HTML 위젯을 「헤더 위」에 둡니다. 코드 안 바깥 요소는 width:100%, 사진은 width:100%;display:block으로.
  • 흐르는 글자는 이제 📟 전광판 위젯으로 코드 없이 됩니다.
    직접 짜려면 — CSS 애니메이션 예시

    .mq{overflow:hidden;white-space:nowrap}.mq span{display:inline-block;padding-left:100%;animation:mq 18s linear infinite}@keyframes mq{to{transform:translateX(-100%)}}
  • 코드를 안 짜려면 공지 위젯 띠 배너의 「글자 흐르게」.
• 미리보기 — 편집 창이 넓게 열려, 화면 폭 980px 이상이면 코드 입력 오른쪽에 결과 미리보기가 나란히 뜹니다(좁은 화면에서는 아래). 바로 그려지고, 저장은 다른 위젯과 같이 아래 저장 바의 [저장].
• 규칙은 글 HTML 모드와 같습니다.
  • <style>은 그 위젯 안에만 적용됩니다.
  • <script> · on* 속성 · javascript:는 지워집니다.
  • 화면을 붙잡는 코드(body{} · 100vh · position:fixed)는 자동으로 액자에 격리됩니다.
• 상태창처럼 카드 없이 붙이려면 🫧 투명을 켜고, 제목 줄도 「제목 줄 숨기기」로 뺄 수 있습니다.
• 사진은 base64로 넣지 말고 갤러리에 올린 주소를 쓰세요. 용량이 금방 찹니다.
• 홈 색 변수(var(--pri) var(--ink) var(--muted) var(--line) var(--card))를 쓰면 테마·듀얼을 따라갑니다.

사진 자리img/ll-w-html.png