Skip to content

Instantly share code, notes, and snippets.

@acidsound
Last active July 26, 2017 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acidsound/a31ef533e6960f81f9de24f7242eea1f to your computer and use it in GitHub Desktop.
Save acidsound/a31ef533e6960f81f9de24f7242eea1f to your computer and use it in GitHub Desktop.
TleCSS 기본 사용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="틀CSS/TLE CSS">
<meta charset="UTF-8">
<title>틀css</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/acidsound/Tle-CSS/master/dist/tle.css">
</head>
<body>
<h5>틀CSS 소개</h5>
<pre>
"틀"은 정말 간단한 CSS 프레임워크에요.
milligram에서 많이 가져왔지만 조금 달라요.
기본 설정은 거의 호환되요.
단추
단추 안됨
단추 외곽선
단추 외곽선 안됨
단추 투명
단추 투명 안됨
이렇게 쉬운 우리말로 표현하면 되요.
숨김
한줄 - label 한줄로 쓸 때
행 감쌈 시작 종료 중앙 늘임 바닥 붙임
열 머리 바닥 중앙
열 틈1-10 틈1-5 틈1-4 틈1-3 틈1-2 틈2-3 틈3-4 틈4-5 틈9-10
열 칸1-10 칸1-5 칸1-4 칸1-3 칸2-5 칸1-2 칸3-5 칸2-3 칸3-4 칸4-5 칸9-10
오른쪽착 왼쪽착 떨어져
요것만 알면 되요.</pre>
<hr>
<h5>공통</h5>
<p>기본 글꼴 크기는 1.6rem(16px)이고 행높이(line-height)는 1.6 (24px) 에요.</p>
<a>링크</a>
<em>강조</em>
<small>작게</small>
<strong>강하게</strong>
<u>밑줄</u>
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
<hr/>
<h5>인용</h5>
<blockquote>
<p><em>"틀"이 잘나왔어요.</em></p>
</blockquote>
<h5>단추</h5>
<a class="단추" href="#">기본</a>
<button class="단추 외곽선">외곽선</button>
<input class="단추 투명" type="submit" value="투명무테">
<button class="단추 안됨">안됨1</button>
<button class="단추 외곽선 안됨">안됨2</button>
<h5>목록</h5>
<ul>
<li>무순서 항목1</li>
<li>무순서 항목2</li>
</ul>
<!-- Ordered list -->
<ol>
<li>순서 항목 1</li>
<li>순서 항목 2</li>
</ol>
<!-- Description list -->
<dl>
<dt>목차 항목 1</dt>
<dd>목차 항목 1.1</dd>
</dl>
<h5>서식</h5>
<form>
<fieldset>
<label for="골라">골라골라</label>
<select id="골라">
<option></option>
<option></option>
<option>호랑이</option>
<option>토끼</option>
</select>
<label for="이름">이름</label>
<input type="text" placeholder="이름이 뭐니?" id="nameField">
<label for="덧글">덧글</label>
<textarea placeholder="안녕, 나는 틀이야. 틀니는 아니지." id="commentField"></textarea>
<div class="오른쪽착">
<input type="checkbox" id="복사확인">
<label class="한줄" for="복사확인">복사본을 나에게도 보내기</label>
</div>
<input class="단추" type="submit" value="보내기">
</fieldset>
</form>
<h5></h5>
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th></th>
<th>소속사</th>
</tr>
</thead>
<tbody>
<tr>
<td>쯔위</td>
<td>17</td>
<td>169cm</td>
<td>JYP</td>
</tr>
<tr>
<td>카이</td>
<td>22</td>
<td>182</td>
<td>SM</td>
</tr>
</tbody>
</table>
<h5>틀 예제</h5>
<div class="">
<h6>틀 영역</h6>
<div class="">
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="">
<div class=""></div>
<div class="열 틈1-4 칸1-2">반의반칸 뒤 반칸</div>
</div>
<div class="">
<div class="열 칸1-10">1/10</div>
<div class="열 칸2-10">2/10</div>
<div class="열 칸1-10">1/10</div>
<div class="열 칸1-10">1/10</div>
<div class="열 칸2-5">2/5(4/10)</div>
<div class="열 칸1-10">1/10</div>
</div>
</div>
<h5>인용</h5>
<pre><code>
.틀 {
color: #9b4dca;
}
</code></pre>
<h5>요소 숨김</h5>
<ul>
<li class="숨김">보임?</li>
<li>보임! 위에 사실 숨김으로 안보임</li>
</ul>
<h5>가운데 정렬</h5>
<div class="" id="중앙">
<div class="한가운데">한가운데!</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment