LUVGUIDE

러브인포 · 페이지

HTML 페이지와 블록

직접 만든 HTML을 페이지 통째로, 또는 보통 페이지 안의 블록으로 넣을 수 있습니다. 스크립트도 실행됩니다.

넣는 법

미리보기에서 찾기 · 고치기

알아둘 것

사진 자리img/li-html-page.png
HTML 페이지 편집 화면 — 페이지 폭 아래에 방명록 · 배너 자리 안내
사진 자리img/li-obg.png
페이지 설정 「바깥 바탕색」 — 자동 · 홈 색 그대로 · 직접 고르기

방명록 · 배너 자리

HTML 페이지는 보안 때문에 분리된 프레임에서 돌아가서, 방명록 마크업을 그대로 가져와도 작동하지 않습니다. 대신 자리만 두면 그 자리에 진짜 방명록 · 배너 블록이 들어갑니다.

<div data-li-slot="gb"></div>   <!-- 이 자리에 방명록 -->
<div data-li-slot="bn"></div>   <!-- 이 자리에 배너 -->
사진 자리img/li-slot-html.png
탭이 있는 HTML 페이지 — GUESTBOOK 탭 자리에 진짜 방명록(왼쪽 · 크림), BANNER 탭 자리에 진짜 배너(오른쪽 · 미드나잇)

스크롤 칸 · 팝업 안 자리

자리를 overflow: auto처럼 안에서 스크롤되는 상자(팝업 · 창 · 목록 칸)에 넣어도 됩니다. 배너가 많아도 창은 작게 두고 안에서 넘겨 보게 할 수 있어요.

<div style="max-height: 320px; overflow-y: auto;">
  <div data-li-slot="bn"></div>
</div>
사진 자리img/li-slot-scroll.png
팝업 창 안 스크롤 칸에 넣은 배너 — 칸 밖은 잘리고, 휠을 굴리면 칸만 넘어가요

✎ 자리의 블록 고치기

사진 자리img/li-slot-edit.png
편집 모드에서 배너 자리 위 「✎ 배너 편집」 → 누르면 배너 블록 편집창이 바로 열려요

방명록 · 배너 모양 꾸미기

자리에 들어오는 블록은 HTML 페이지 위에 따로 그려집니다. 그래서 HTML 페이지에 쓴 CSS는 방명록 · 배너에 닿지 않아요. 모양은 원본 블록(자리 위 ✎ 버튼으로 열리는 그 블록)에서 바꿉니다.

🤖 AI에게 맡기기

다른 AI(Claude · ChatGPT 등)는 이 규칙을 모릅니다. 부탁할 때 아래 안내문을 그대로 함께 붙여 넣어 주세요. 지금 쓰는 HTML이나 원하는 분위기(색 · 글꼴 · 참고 이미지)를 같이 주면 더 잘 맞춰 줍니다.

① HTML 페이지를 만들 때

러브인포 HTML 페이지용
· 방명록 자리 → <div data-li-slot="gb"></div>
· 배너 자리 → <div data-li-slot="bn"></div> (두 번째 배너 블록은 data-li-slot="bn:2")
· 자리 안은 비워 두기 · 방명록 · 배너 모양 직접 만들기 금지
· 자리 높이 고정 금지 · 너비는 정해도 됨
· position: fixed · transform 애니메이션 금지 (스크롤되는 상자 · 팝업 안에 자리 넣는 건 괜찮음)
· 탭을 만들 경우 숨긴 탭은 display: none
· 방명록 · 배너 모양은 따로 「블록 CSS」 · 「HTML 틀」로 꾸밈 (이 HTML 안에서 꾸미지 않음)

② 방명록 모양을 만들 때

러브인포 방명록 블록 꾸미기용 — 결과물은 「이 블록 CSS」와 「글 하나 HTML 틀」 두 개
· CSS는 블록 안에만 적용 · 선택자는 블록 안 이름표부터 (.gbblk 붙이기 금지)
· 이름표: .gb-foot(글쓰기 칸) .gb-msg(입력창) .gb-cnt(글자 수) .gb-bar(아래 줄) .gb-sec(비공개 체크) .gb-send(남기기 버튼) .gb-list(목록) .gb-item(글 하나) .gb-tpl(틀을 쓴 글 하나) .who(쓴 사람 줄) .dt(날짜) .gb-re(답글) .gb-lock(비공개 문구) .gb-badge(비공개 표시) .del(삭제) .gb-rebtn(답글 버튼) .gb-tools(삭제·답글 묶음) .gb-empty(빈 목록·로그인 안내) .gb-more(더 보기)
· 목록 높이 바꾸기는 !important 필요 (.gb-list { max-height: … !important; })
· HTML 틀 값: {{who}} {{name}} {{home}} {{text}} {{date}} {{reply}} {{owner}} {{secret}} {{mine}} {{n}} {{tools}}
· 조건: {{#값}}있을 때{{/값}} · {{^값}}없을 때{{/값}}
· 글쓰기 칸은 틀 밖 — CSS로만 꾸밈
· 틀에 <script> · <style> · <svg> · <iframe> · onclick 등 금지 (자동 삭제됨) · 꾸밈은 CSS 칸에
· 색은 테마 변수 사용: var(--bg) var(--tx) var(--pri) var(--pri-ink) var(--dim) var(--mute) var(--line) var(--card) var(--radius) var(--font)
· @media · @keyframes 사용 가능 · 각각 6,000자 이내

③ 배너 모양을 만들 때

러브인포 배너 블록 꾸미기용 — 결과물은 「이 블록 CSS」와 「배너 하나 HTML 틀」 두 개
· CSS는 블록 안에만 적용 · 선택자는 블록 안 이름표부터 (.bnwrap 붙이기 금지)
· 기본 구조: .banners > a(배너 하나) > img · .tb(글자 배너) · .mut(맞배너 ♥) · .cap(핸들 캡션)
· HTML 틀을 쓰면 배너 하나는 .bn-it 상자 안에 들어감
· 크기 변수: var(--bnw) 너비 · var(--bnh) 높이
· HTML 틀 값: {{url}} {{img}} {{title}} {{handle}} {{mut}} {{ext}} {{n}}
· 조건: {{#img}}이미지 있을 때{{/img}} · {{^img}}없을 때{{/img}} · 외부 배너는 handle 이 비어 있음
· 틀에 <script> · <style> · <svg> · <iframe> · onclick 등 금지 (자동 삭제됨) · 꾸밈은 CSS 칸에
· 색은 테마 변수 사용: var(--bg) var(--tx) var(--pri) var(--dim) var(--line) var(--card) var(--radius)
· @media · @keyframes 사용 가능 · 각각 6,000자 이내

자리가 이상할 때

자리에 아무것도 안 떠요
  • 저장했는지 먼저 확인해 주세요.
  • 템플릿 갤러리 미리보기에서는 원래 비어 보입니다(편집창 미리보기에는 들어옵니다).
  • 배너는 배너 블록이 있어야 들어옵니다(없으면 주인에게만 안내가 보임). 방명록은 블록이 없어도 기본 모양으로 들어옵니다.
  • data-li-slot 철자와 값(gb · bn · bn:2, 소문자)도 확인해 주세요.
HTML 페이지 CSS가 방명록에 안 먹어요
정상입니다. 위 「방명록 · 배너 모양 꾸미기」처럼 원본 블록의 「이 블록 CSS」에서 바꿔 주세요.
블록 모양을 고쳤는데 그대로예요
「저장」한 뒤 HTML 페이지로 다시 넘어오거나 새로고침해 주세요.
틀에 넣은 <style> · <script>가 사라져요
틀에서는 자동으로 빠집니다. 꾸밈은 「이 블록 CSS」 칸에.
팝업을 닫았는데 방명록이 잠깐 남아요
서서히 흐려지며 닫히는 팝업이면 흐려지는 동안은 남아 있다가 애니메이션이 끝나는 순간 같이 사라져요 (2026.10.20부터 element.animate로 닫는 팝업도). 닫는 즉시 지우고 싶으면 닫을 때 자리를 감싼 상자에 visibility: hidden을 바로 주세요.
팝업을 열었는데 방명록이 팝업 위로 보여요
블록이 HTML 위에 겹쳐 있어서 그래요. 팝업을 열 때 방명록이 든 탭을 닫거나, 팝업을 자리와 겹치지 않는 곳에 띄워 주세요.
탭을 바꿔도 방명록이 계속 보여요
숨긴 탭이 display: none · visibility: hidden · opacity: 0 중 하나로 숨겨지는지 확인해 주세요.
자리 위 「✎」 버튼이 안 보여요
주인의 ✎ 편집 모드에서만 보입니다. 탭 안의 자리라면 그 탭을 열어야 버튼도 보여요.