3kA8GD003CQns244HawBAMzNlxcPDQWJOFjBfi0M
Bookmark

이그니플렉스 원소

 

1. 중심 요소

페이지 중앙에 모든 요소를 배치합니다.

CARA MENGGUNAKAN:

<div> 요소를 생성하고 클래스 센터를 추가합니다.

<div class="center">
  <!-- Kode kamu. Bisa berupa tombol, gambar, atau lainnya. -->
</div>

2. 단락 브레이크 (도츠)

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

CARA MENGGUNAKAN:

<hr/>

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

CARA MENGGUNAKAN:

<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>

4. 신스 하이라이터

코드가 들어 있는 상자를 표시합니다. PENTING! 구문 분석/탈출 코드를 입력해야 합니다!

4.1. 휴대

CARA MENGGUNAKAN:

<pre class="html"><code>Parsed code goes here</code></pre>

작성된 코드 종류에 따라 클래스 이름을 변경할 수 있습니다. 사용 가능한 클래스는 다음과 같습니다. html, css, js.

예:

<pre class="html"><code>Parsed code goes here</code></pre>
<pre class="css"><code>Parsed code goes here</code></pre>
<pre class="js"><code>Parsed code goes here</code></pre>

어떤 수업 없이도 할 수 있습니다. 예:

<pre><code>Parsed code goes here</code></pre>

4.2. 번호 지정하지 않음

CARA MENGGUNAKAN:

클래스의 nonum 이름을 추가합니다.

<pre class="nonum"><code>Parsed code goes here</code></pre>

4.3. 번호 매기기 및 복사 버튼 없음

CARA MENGGUNAKAN:

nonumnocopy 클래스 이름을 추가합니다.

<pre class="nonum nocopy"><code>Parsed code goes here</code></pre>

4.4. 멀티탭

CARA MENGGUNAKAN:

<div class="tabs syntax">
  <ul>
    <li class="current">HTML</li>
    <li>CSS</li>
    <li>JS</li>
  </ul>
  <div class="content visible">
    <pre class="html"><code>Tab 1 content</code></pre>
  </div>
  <div class="content">
    <pre class="css"><code>Tab 2 content</code></pre>
  </div>
  <div class="content">
    <pre class="js"><code>Tab 3 content</code></pre> 
  </div>
</div>

5. 단추

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

<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연락처 아이콘을 표시합니다.

CARA MENGGUNAKAN:

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

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

또는:

<button class="outline round contact">Contact</button>

사용자 지정 아이콘이 있는 단추

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

CARA MENGGUNAKAN:

<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>

또는:

<button><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</button>

6. 다운로드 상자

이미지를 사용하려면 이 코드를 사용하십시오.

CARA MENGGUNAKAN:

<div class="downloadbox">
  <div>Nama File</div>
  <div class="inner">
    <div class="icon">
      <img src="URL Gambar"/>
    </div>
    <div class="info">
      <-- Deskripsi File -->
      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>

또는 SVG 아이콘을 사용하려면 이 코드를 사용하십시오. 원하는 대로 SVG 아이콘을 변경할 수 있습니다.

CARA MENGGUNAKAN:

<div class="downloadbox">
  <div>Nama File</div>
  <div class="inner">
    <div class="icon noimg">
      <svg viewBox="0 0 24 24"><path d="M6 20.735a2 2 0 0 1 -1 -1.735v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1"/><path d="M11 17a2 2 0 0 1 2 2v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a2 2 0 0 1 2 -2z"/><path d="M11 5l-1 0"/><path d="M13 7l-1 0"/><path d="M11 9l-1 0"/><path d="M13 11l-1 0"/><path d="M11 13l-1 0"/><path d="M13 15l-1 0"/></svg>
    </div>
    <div class="info">
    <-- Deskripsi File -->
    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>

7. 상자

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

<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>

8. 배지

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

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

<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>

9. 블록쿼트

CARA MENGGUNAKAN: (Bawaan)

<blockquote>TEXT TEXT TEXT</blockquote>

CARA MENGGUNAKAN: (Dengan Penulis)

<blockquote>TEXT TEXT TEXT
  <footer>Author</footer>
</blockquote>

10. 탭 (멀티 탭)

무제한 콘텐츠로 멀티탭 만들기 제목을 이동할 수 있으므로(디스플레이를 파괴하지 않음) 원하는 탭 수를 추가할 수 있습니다.

9.1. 수평 (하위)

CARA MENGGUNAKAN:

<div class="tabs">
  <ul>
    <li class="current">Tab Pertama</li>
    <li>Tab Kedua</li>
    <li>Tab Ketiga</li>
    <!-- dst -->
  </ul>
  <div class="content visible">
    Isi dari tab pertama (1st).
  </div>
  <div class="content">
    Isi dari tab kedua (2nd).
  </div>
  <div class="content">
    Isi dari tab ketiga (3rd).
  </div>
  <!-- dst -->
</div>

10.2. 수직

수직 멀티탭. PENTING! 화면 크기가 480px 이하에서 자동으로 수평으로 변경됩니다.

CARA MENGGUNAKAN:

<div class="tabs vertical">
  <ul>
    <li class="current">Tab Pertama</li>
    <li>Tab Kedua</li>
    <li>Tab Ketiga</li>
    <!-- dst -->
  </ul>
  <div class="content visible">
    Isi dari tab pertama (1st).
  </div>
  <div class="content">
    Isi dari tab kedua (2nd).
  </div>
  <div class="content">
    Isi dari tab ketiga (3rd).
  </div>
  <!-- dst -->
</div>

11. 열

텍스트를 두 열로 나눕니다. PENTING! 화면 크기가 480px 이하에서 자동으로 하나의 열로 변경됩니다(경계 및 패드도 사라짐).

11.1. 선으로 (하위)

CARA MENGGUNAKAN:

<div class="column">
  <div class="content">
    <!-- Teks kolom 1 -->
  </div>
  <div class="content">
    <!-- Teks kolom 2 -->
  </div>
</div>

11.2. 줄 없음

CARA MENGGUNAKAN:

<div class="column noborder">
  <div class="content">
    <!-- Teks kolom 1 -->
  </div>
  <div class="content">
    <!-- Teks kolom 2 -->
  </div>
</div>

12. 아코르디온

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

11.1. 싱글

CARA MENGGUNAKAN:

<details class="accordion">
  <summary>Judul</summary>
  <!-- Isi teks -->
</details>

기본적으로 열려면 다음 코드를 추가하십시오.

<details class="accordion" open="open">
  ....
  <!-- sisa kode lainnya sama -->
  ....
</details>

12.2. 멀티

CARA MENGGUNAKAN:

<div class="accordion multi">
  <details>
    <summary>Judul</summary>
    <!-- Isi teks -->
  </details>
  <details>
    <summary>Judul</summary>
    <!-- Isi teks -->
  </details>
  <!-- .... dst ... -->
</div>

13. 스포

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

CARA MENGGUNAKAN:

<details class="spoiler">
  <summary>Spoiler</summary>
  Isi spoiler
</details>

14. 그림

13.1. 블로거 내장

블로거 에디터를 통해 사진을 올리면 이렇게 보입니다. 그렇기 때문에 특별한 튜토리얼이 필요하지 않습니다.

14.2. 그림

에 대한 표준 의미 HTML 코드 <figure> 함께 <figcaption>.

CARA MENGGUNAKAN:

<figure>
  <img alt="Judul" src="URL Gambar" title="Judul"/>
  <figcaption>Caption</figcaption>
</figure>

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

CARA MENGGUNAKAN:

<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"/>
    <!-- .... dst sampai tak terhingga ... -->
  </div>
  <div class="caption">Teks caption tambahan</div>
</div>

캡션을 사용하지 않으려면 다음 섹션을 삭제하십시오.

<div class="caption">Teks caption tambahan</div>

14.4. 갤러리 (스위프)

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

CARA MENGGUNAKAN:

<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"/>
    <!-- .... dst sampai tak terhingga ... -->
  </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</div>

14.5. 갤러리 (그리드)

이미지는 그리드로 표시됩니다. 이미지가 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"/>
    <!-- .... dst sampai tak terhingga ... -->
  </div>
  <div class="caption">Teks caption tambahan</div>
</div>

캡션을 사용하지 않으려면 다음 섹션을 삭제하십시오.

<div class="caption">Teks caption tambahan</div>

15. 너튜브 게으름뱅이 로드

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

CARA MENGGUNAKAN:

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

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

16. 드롭캡

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

CARA MENGGUNAKAN:

<span class="drop">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit.

17. 표

17.1. 기본값

CARA MENGGUNAKAN:

<table>
  <thead>
    <tr>
      <th>Judul</th>
      <th>Judul</th>
      <th>Judul</th>
      <!-- dst -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Isi teks</td>
      <td>Isi teks</td> 
      <td>Isi teks</td>
      <!-- dst -->
    </tr>
  </tbody>
</table>

17.2. 수평 스크롤

반응성 및 이동성(흔들림 없음) 가능한 너비 테이블을 작성하려면 다음 태그를 사용하여 랩핑하십시오.

CARA MENGGUNAKAN:

<div class="table">
  <table>
    ....
    <!-- sisa kode lainnya sama -->
    ....
  </table>
</div>

18. 목록

18.1. 사용자 지정 번호 지정

더 큰 숫자 표시기가 있는 목록입니다. 단계별 튜토리얼 설명에 적합하다.

CARA MENGGUNAKAN:

<ol class="steps">
  <li>Isi teks</li>
  <li>Isi teks</li>
  <li>Isi teks</li>
  <!-- dst -->
</ol>

18.1. 주문 목록

번호가 있는 목록.

  1. 원
  2. 둘
  3. 쓰리
  4. 포
  5. 파이브

CARA MENGGUNAKAN:

<ol>
  <li>Isi teks</li>
  <li>Isi teks</li>
  <li>Isi teks</li>
  <!-- dst -->
</ol>

18.2. 주문되지 않은 목록

번호가 없는 목록.

  • 원
  • 둘
  • 쓰리
  • 포
  • 파이브

CARA MENGGUNAKAN:

<ul>
  <li>Isi teks</li>
  <li>Isi teks</li>
  <li>Isi teks</li>
  <!-- dst -->
</ul>
댓글 쓰기