List

기본 사용

• 리스트 표현
• 사용 태그 : ul, ol

<ul class="gn-list">
  <li>Ad nisi excepteur nostrud in.</li>
  <li>Commodo duis anim excepteur qui.</li>
  <li class="is-center">Centered Text</li>
</ul>

크기

<ul class="gn-list is-small">
  <li>Ad nisi excepteur nostrud in.</li>
  <li>Commodo duis anim excepteur qui.</li>
  <li>Centered Text</li>
</ul>
<ul class="gn-list is-medium">
  <li>Ad nisi excepteur nostrud in.</li>
  <li>Commodo duis anim excepteur qui.</li>
  <li>Centered Text</li>
</ul>
<ul class="gn-list is-large">
  <li>Ad nisi excepteur nostrud in.</li>
  <li>Commodo duis anim excepteur qui.</li>
  <li>Centered Text</li>
</ul>

테두리 스타일

<ul class="gn-list is-border is-inline-block">
  <li>is-border</li>
  <li>is-border</li>
  <li>is-border</li>
</ul>
<ul class="gn-list is-stripe is-inline-block">
  <li>is-stripe</li>
  <li>is-stripe</li>
  <li>is-stripe</li>
</ul>
<ul class="gn-list is-borderless is-inline-block">
  <li>is-borderless</li>
  <li>is-borderless</li>
  <li>is-borderless</li>
</ul>
<ul class="gn-list is-border is-stripe is-inline-block">
  <li>is-border is-stripe</li>
  <li>is-border is-stripe</li>
  <li>is-border is-stripe</li>
</ul>
<ul class="gn-list is-borderless is-stripe is-inline-block">
  <li>is-borderless is-stripe</li>
  <li>is-borderless is-stripe</li>
  <li>is-borderless is-stripe</li>
</ul>

inline Display

<ul class="gn-list is-inline-block" style="width: 49%">
  <li>첫번째 리스트</li>
  <li>display inline-block으로 표기</li>
  <li>Voluptate pariatur magna proident nisi ex tempor enim mollit.</li>
</ul>
<ul class="gn-list is-inline-block is-clickable" style="width: 49%">
  <li>두번째 리스트</li>
  <li>display inline-block으로 표기</li>
  <li>Voluptate pariatur magna proident nisi ex tempor enim mollit.</li>
</ul>

중첩 사용

<ul class="gn-list">
  <li>Ad nisi excepteur nostrud in.</li>
  <li>Commodo duis anim excepteur qui.</li>
  <li>Nested item
    <ul class="gn-list">
      <li>Ad nisi excepteur nostrud in.</li>
      <li>Commodo duis anim excepteur qui.</li>
      <li>Voluptate pariatur magna proident nisi ex tempor enim mollit.</li>
    </ul>
  </li>
  <li>Commodo duis anim excepteur qui.</li>
</ul>

순서 표기

<ol class="gn-list has-number">
  <li>Ad nisi excepteur nostrud in.</li>
  <li>Commodo duis anim excepteur qui.</li>
  <li>Voluptate pariatur magna proiAliquip ea exercitation culpa exercitation elit nostrud eiusmod exercitation.Officia incididunt nulla ad sint ea id irure.dent nisi ex tempor enim mollit.</li>
</ol>

정의 목록 사용

<dl class="gn-list is-border has-divid">
  <dt>Genian NAC</dt>
  <dd>BYOD 환경에서 유무선을 아우르는 내부 보안 관리 체계를 운영할 수 있는 '네트워크 접근제어(NAC : Network Access Control) 솔루션'</dd>
  <dt>Genian Insights E</dt>
  <dd>내부 네트워크와 단말에 대한 악성 행위를 파악하고 이상 징후를 빠르게 탐지할 수 있는 '단말 이상행위 탐지 및 대응 솔루션</dd>
  <dt>Genian GPI</dt>
  <dd>PC의 보안 취약점을 점검하고 사용자가 스스로 조치할 수 있도록 행동 변화를 유도해 보안 체질을 개선할 수 있는 'PC 보안 수준 진단 솔루션'</dd>
</dl>

<dl class="gn-list is-border is-stripe is-inline-block">
  <dt>제목</dt>    
  <dd>기생충</dd>
  <dt>개봉일</dt>
  <dd>2019년 5월 30일 (대한민국)</dd>
  <dt>감독</dt>
  <dd>봉준호</dd>
  <dt>수상</dt>
  <dd>아카데미 작품상, 황금종려상, 아카데미 감독상...</dd>
</dl>
<div style="display: inline-block; width: 50%">
  <dl class="gn-list is-arrange is-borderless">
    <dt>제목</dt>    
    <dd>기생충</dd>
  </dl>
  <dl class="gn-list is-arrange is-borderless">
    <dt>개봉일</dt>
    <dd>2019년 5월 30일 (대한민국)</dd>
  </dl>
  <dl class="gn-list is-arrange is-borderless">
    <dt>감독</dt>
    <dd>봉준호</dd>
  </dl>
  <dl class="gn-list is-arrange is-borderless">
    <dt>수상</dt>
    <dd>아카데미 작품상, 황금종려상, 아카데미 감독상...Sunt pariatur proident id ipsum magna qui nulla esse sunt fugiat deserunt.</dd>
  </dl>
</div>