Kotton.css
한글이 잘 어울리는 스타일시트
한글 문서에 적합한 HTML 5 Classless 스타일시트
한글을 위한 문서 스타일시트
한글을 기준으로 만들어진 CSS 스타일
영어를 위한 멋진 CSS가 필요하듯이
한글에도 잘 어울리는 CSS가 필요합니다
문서 구조에 집중하세요
CLASS를 최소한으로 사용하는 스타일 시트입니다.
번잡하고 불필요한 클래스 이름을 기억하지 마세요.
당신과 기업 모두 자유롭게
Kotton.css는 개인*기업 모두 자유롭게 사용 할 수 있으며, 상업적으로 자유롭게 활용이 가능합니다
사용한 외부 폰트(본고딕, 나눔명조)와 tablericons 역시 자유로운 라이선스를 사용합니다 (아이콘과 폰트는 해당 라이선스를 따릅니다)
Kotton.css 사용하기
NPM
npm으로 사용하기
npm i kotton-css link style sheet
link style 등록
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kotton-css@1.0.1/dist/kotton-style.min.css"> 적용하기
HTML 문서의 BODY에 kotton-style 클래스를 추가합니다.
<body class="kotton-style">
....
</body> Tags
제목
Heading
<h1>제목입니다</h1>
<h2>제목입니다</h2>
<h3>제목입니다</h3>
<h4>제목입니다</h4>
<h5>제목입니다</h5>
<h6>제목입니다</h6> 제목입니다
제목입니다
제목입니다
제목입니다
제목입니다
제목입니다
제목 그룹
Heading group
<hgroup>
<h1>제목입니다</h1>
<h1>Heading</h1>
</hgroup>
<hgroup>
<h1>제목입니다</h1>
<h2>부연소제목</h2>
</hgroup> 제목입니다
Heading
제목입니다
부연소제목
문장 인용
Blockquote
<blockquote>
<p>
Blockquote 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다. 사용 일람 인용문의 들여쓰기를 바꾸려면 CSS margin-left와 margin-right, 혹은 margin 단축 속성을 사용하세요. 별도의 블록을 쓰지 않아도 될 짧은 인용문은 요소를 사용하세요
</p>
<footer>
MDN
</footer>
</blockquote> Blockquote 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다. 사용 일람 인용문의 들여쓰기를 바꾸려면 CSS margin-left와 margin-right, 혹은 margin 단축 속성을 사용하세요. 별도의 블록을 쓰지 않아도 될 짧은 인용문은 요소를 사용하세요
단락 내부 인용
inline quote
<p>
이것은 인라인 인용구입니다.<q>태그로는 q로 사용할 수 있습니다</q> Blockquote와 달리 글 중간에 사용하기에 적합합니다
</p> 이것은 인라인 인용구입니다.태그로는 q로 사용할 수 있습니다
Blockquote와 달리 글 중간에 사용하기에 적합합니다
단락
Paragraph
<p>
이것은 단락입니다
</p> 이것은 단락입니다
가로선
Horizonbar
<hr /> 강조
Mark
<p>
컬러는 <mark>기본</mark>이나 <mark class="pink">pink</mark>를 지원합니다
</p> 단락의 내용중 중요한 부분이 있다면 사용합니다.
컬러는 기본이나 pink를 지원합니다
하이퍼링크
Hyperlink
<a href="https://github.com/cloverhearts/kotton-css">효과있는 링크</a>
<a href="https://github.com/cloverhearts/kotton-css" class="no-hover">마우스 효과 없음</a>
기본적인 A link입니다.
버튼
Buttons
<button>기본 버튼</button>
<button class="primary">Primary 버튼</button>
이미지
Image
<figure>
<img src="./assets/kotton-logo.png" alt="cotton with shadow" />
<figcaption> figure 태그와 figcaption을 이용해, 그림자와 이미지 주석을 달 수 있습니다</figcaption>
</figure> 
목록
Lists
<ul>
<li>아이템</li>
<li>아이템</li>
<li>아이템</li>
<li>아이템</li>
<li>아이템
<ul>
<li>아이템</li>
<li>아이템</li>
<li>아이템</li>
<li>아이템</li>
</ul>
</li>
</ul>
- 아이템
- 아이템
- 아이템
- 아이템
- 아이템
- 아이템
- 아이템
- 아이템
- 아이템
<ol>
<li>순번 아이템</li>
<li>순번 아이템</li>
<li>순번 아이템</li>
<li>순번 아이템</li>
<li>순번 아이템
<ol>
<li>순번 아이템</li>
<li>순번 아이템</li>
<li>순번 아이템</li>
<li>순번 아이템</li>
</ol>
</li>
</ol>
- 순번 아이템
- 순번 아이템
- 순번 아이템
- 순번 아이템
- 순번 아이템
- 순번 아이템
- 순번 아이템
- 순번 아이템
- 순번 아이템
테이블
Table
<table>
<thead>
<th>첫번째 컬럼 제목</th>
<th>두번째 컬럼 제목</th>
<th>세번째 컬럼 제목</th>
<th>네번째 컬럼 제목</th>
</thead>
<tbody>
<tr>
<td>아이템</td>
<td>아이템</td>
<td>아이템</td>
<td>아이템</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>아이템</td>
<td>아이템</td>
<td>아이템</td>
<td>아이템</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
</tbody>
</table> | 첫번째 컬럼 제목 | 두번째 컬럼 제목 | 세번째 컬럼 제목 | 네번째 컬럼 제목 |
|---|---|---|---|
| 아이템 | 아이템 | 아이템 | 아이템 |
| Item | Item | Item | Item |
| 아이템 | 아이템 | 아이템 | 아이템 |
| Item | Item | Item | Item |
한글이 잘 어울리는 CSS가 있었으면 좋을것 같아요
날이 좋아 집근처 산을 오르고 있었을 때였을 겁니다
고민이 있을때에는 산을 오르곤 해요
산을 오른다해서, 고민이 땀과 함께 씻겨져 내려가는 것은 아니지만
가빠지는 숨과 함께
한걸음, 한글음을 내딛고 올라가는 기쁨이 있거든요