Container
/scss/layout/container.scss
v.0.1.0
기본 사용
- 단순 영역구분을 위한 컨테이너 (No margin)
- 사용 태그:
div, main, navibar, section 등
Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.
<div class="gn-container">
<p>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</p>
</div>
넓이제한 (is-max)
- 내부 컨텐츠의 가로 넓이가 100% 이상일 경우 스크롤로 표현
| Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna. |
Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem. |
| Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna. |
Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem. |
| Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna. |
Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem. |
<div class="gn-container is-max">
<table class="gn-table is-stripe">
<tr>
<td class="is-nowrap">Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
<td class="is-nowrap">Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
</tr>
<tr>
<td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
<td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
</tr>
<tr>
<td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
<td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
</tr>
</table>
</div>
여백포함 (has-padding)
| Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna. |
Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem. |
| Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna. |
Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem. |
| Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna. |
Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem. |
<div class="gn-container has-padding">
<table class="gn-table is-stripe">
<tr>
<td class="is-nowrap">Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
<td class="is-nowrap">Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
</tr>
<tr>
<td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
<td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
</tr>
<tr>
<td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
<td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
</tr>
</table>
</div>