tufte-css

css-framework typography layout

tufte-css는 에드워드 투프트의 독특한 핸드아웃 스타일을 웹 페이지에 적용할 수 있도록 해주는 CSS 라이브러리입니다. 이 스타일은 간결하고, 잘 설정된 타이포그래피, 광범위한 사이드노트, 그래픽 및 차트의 긴밀한 통합이 특징입니다.

Latest Ver 1.8.0

Homepage

Github

6,148

디자인은 보이지 않아야 진정한 힘을 발휘한다.

tufte-css로 깔끔하고 직관적인 웹 문서를 디자인하세요.

tufte-css는 웹 문서에서 에드워드 투프트의 시각적 및 타이포그래픽 스타일을 구현할 수 있게 해주는 CSS 프레임워크입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.css

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.svg

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf

https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<article><section><h1>Example Header</h1><p>Main content here with <span class="sidenote">This is a sidenote.</span></p></section></article>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css" rel="stylesheet">