편리한 서식들

첫 글자를 크게 하기 위해서.

<span class="drop">동</span> 네대장 ㅇㅇㅇㅇㅇ에 온것을 환영합니다.

세 개의 점이 단락을 분리하고 다음과 같은 간격을 띄울 수 있다.

<div class="center"> <hr/> </div>

기본적으로 채우기 표시(배경 색)가 있습니다. 기본 코드는 다음과 같습니다.

<button>Button</button>

링크가 있는 경우 (권장):

<a class="button" href="https://www.google.com" rel="noopener" target="_blank" title="Google">Google</a>

링크와 아이콘이 있는 경우:

<a class="button download" href="https://www.google.com" rel="noopener" target="_blank" title="Download">Download</a>

사용 class 아이콘과 뷰를 수정하기 위해 아래와 같이 안내 드립니다.

클래스 사용성
outline 선을 그을 수 있는 버튼을 만들기 위해서.
round 둥근 모서리를 만들기 위해
download 다운로드 아이콘을 표시합니다
demo 데모 아이콘을 표시합니다.
contact 연락처 아이콘을 표시합니다.

여러 가지를 합칠 수 있고 class 버튼 위에요. 예:

<a class="button outline round contact" href="https://www.google.com" rel="noopener" target="_blank" title="Contact">Contact</a>

또는:

<a class="button outline round contact" href="https://www.google.com" rel="noopener" target="_blank" title="Contact">Contact</a>

사용자 지정 아이콘이 있는 단추
단추에 아무 아이콘이나 삽입할 수 있습니다. SVG 코드는 명시적으로 작성되어야 합니다.
중요! 클래스 이름 "다운로드", "데모", "연락처"를 추가하지 마십시오.

<a class="button" href="https://www.google.com" rel="noopener" target="_blank" title="Anything"><svg viewBox="0 0 24 24"><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"/><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M8 11v-4a4 4 0 1 1 8 0v4"/></svg>Anything</a>

다운로드 상자
이미지를 사용하려면 이 코드를 사용하십시오.

<div class="downloadbox"> <div>Nama File</div> <div class="inner"> <div class="icon"> <img src="URL Gambar"/> </div> <div class="info"> Size: 1 GB<br/> Updated: 1 May 2025<br/> File Type: .rar </div> <div class="go"> <a class="button download" href="URL File" rel="noopener" target="_blank" title="Judul">Download</a> </div> </div> </div>

색상에 따라 다음 코드 중 하나를 선택합니다.

<div class="box">Kotak bawaan</div>

<div class="box outline">Kotak garis</div>

<div class="box green">Kotak hijau</div>

<div class="box blue">Kotak biru</div>

<div class="box red">Kotak merah</div>

<div class="box yellow">Kotak kuning</div>

배지 : 중요도를 강조하기 위해 텍스트 위에 간단한 표시기. 여러 가지 색상 선택사항이 있습니다.

색상에 따라 다음 코드 중 하나를 선택합니다. 코드를 텍스트 옆에 놓습니다.

<span class="badge">Sesuai warna tema</span>

<span class="badge green">Hijau</span>

<span class="badge blue">Biru</span>

<span class="badge red">Merah</span>

<span class="badge yellow">Kuning</span>

블록쿼트

<blockquote>TEXT TEXT TEXT</blockquote>

아코디언 싱글 : 콘텐츠를 숨기거나 표시합니다. FAQ(Frequently Asked Question) 섹션에서 흔히 볼 수 있다.

<details class="accordion"> <summary>아코디언 제목</summary> <!-- 아코디언 글자넣기 / --> </details>

아코디언 멀티 : 기본적으로 열려면 다음 코드를 추가하십시오.

<div class="accordion multi"> <details> <summary>Judul</summary> <!-- 내용넣기 --> </details> <details> <summary>Judul</summary> <!-- 내용넣기 --> </details> </div>

스포일러 : 클릭 활동을 트리거로 하여 내용을 표시/숨깁니다.

<details class="spoiler"> <summary>Spoiler</summary> 스포일러 내용넣기 </details>

캐러셀 스타일로 많이 그려져 있어요. 인스타 갤러리 스타일이랑 되게 비슷해요 탐색을 위해 스크롤(모바일에서) 또는 화살표(데스크톱에서)를 클릭합니다. 추가할 수 있는 이미지의 수는 제한되지 않습니다.

<div class="gallery carousel"> <div class="carousel-inner"> <img alt="Judul 1" src="URL Gambar 1" title="Judul 1"/> <img alt="Judul 2" src="URL Gambar 2" title="Judul 2"/> <img alt="Judul 3" src="URL Gambar 3" title="Judul 3"/> <img alt="Judul 3" src="URL Gambar 3" title="Judul 3"/> <!-- .... dst sampai tak terhingga ... --> </div> <div class="caption">Teks caption tambahan</div> </div>

캡션을 사용하지 않으려면 다음 섹션을 삭제하십시오.
div class="caption">Teks caption tambahan

갤러리 스와프 :인스타그램 스토리나 유튜브 쇼트 등 스와이프 스타일의 사진이 많다. 인스타 갤러리 스타일이랑 되게 비슷해요 캐러셀보다 가볍습니다.

<div class="gallery swipe"> <div class="swipe-inner"> <img alt="Judul 1" src="URL Gambar 1" title="Judul 1"/> <img alt="Judul 2" src="URL Gambar 2" title="Judul 2"/> <img alt="Judul 3" src="URL Gambar 3" title="Judul 3"/> <img alt="Judul 3" src="URL Gambar 3" title="Judul 3"/> </div> <div class="caption">Teks caption tambahan</div> </div>

세로/축 그림을 사용하는 경우 클래스를 추가/개인적 세로 깔끔. portrait 예:

<div class="gallery swipe portrait"> .... <!-- sisa kode lainnya sama --> .... </div>

캡션을 사용하지 않으려면 다음 섹션을 삭제하십시오. div class="caption">Teks caption tambahan

이미지는 그리드로 표시됩니다. 이미지가 4개 이상일 경우 자동으로 추가된 Show All(Expand) 기능이 있습니다. Facebook 갤러리 화면과 유사합니다.(좋음)

<div class="gallery grid"> <div class='grid-inner'> <img alt="Judul 1" src="URL Gambar 1" title="Judul 1"/> <img alt="Judul 2" src="URL Gambar 2" title="Judul 2"/> <img alt="Judul 3" src="URL Gambar 3" title="Judul 3"/> <img alt="Judul 3" src="URL Gambar 4" title="Judul 4"/> <img alt="Judul 3" src="URL Gambar 5" title="Judul 5"/> <!-- .... dst sampai tak terhingga ... --> </div> <div class="caption">Teks caption tambahan</div> </div>

캡션을 사용하지 않으려면 다음 섹션을 삭제하십시오.
div class="caption">Teks caption tambahan

동영상은 클릭 한 번으로 로드됩니다.

<div class="youtubelazy" data-embed="dN1uTXrgaDY"></div>

표시된 것은 동영상의 임베디드 ID입니다. 가져오려면 YouTube 비디오로 이동하여 Share를 클릭하고 ID를 가져옵니다(아래 그림 참조).

페이지 중앙에 모든 요소 배치

<div class="center"> <!-- 넣고싶은 글, 그림, 기타 --> </div>

외부 링크에 아이콘이 있습니다. 코드에 다음 클래스 이름을 추가합니다.

<a class="elink" href="URL Tujuan" title="Judul">Teks</a>

링크가 새 탭을 열려면 속성 추가 rel 그리고 target 이렇게.

<a class="elink" rel="noopener" target="_blank" href="URL Tujuan" title="Judul">Teks</a>