Sandbox Header - 1.8.0

Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

• So here is the first item in this list.
• In this example we're keeping the items short.
• Later, we'll use longer, more complex list items¹.

And that's the end of this section.

Header2

By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you really are just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.

• I often do this thing where list items have headings.

  For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.

• Since this is a list, I need at least two items.

  I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item, and we really want this to look realistic. That's why I've added this second list item so I actually have something to look at when writing the styles.

Header3

You don't want to have to remove annoying margins every time you use a p element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look awesome, not awful.

설명

• 헤더 (Headers): 다양한 수준의 헤더(#, ##, ###)를 포함하여 폰트의 크기와 굵기 변화를 확인할 수 있습니다.
• 텍스트 스타일: 굵게, 기울임, 그리고 그 조합을 사용하여 폰트가 각 스타일에서 어떻게 보이는지 테스트합니다.
• 링크 및 이미지: 텍스트 링크와 이미지 삽입을 통해 폰트가 포함된 링크의 가독성과 이미지 주변의 텍스트 레이아웃을 확인합니다.
• 리스트: 순서가 있는 목록과 순서가 없는 목록을 사용하여 폰트가 리스트 아이템에 어떻게 적용되는지 봅니다.
• 인용문: 인용문 블록을 사용하여 폰트의 스타일이 인용문에 어떻게 적용되는지 확인합니다.
• 코드 블록: 인라인 코드와 여러 줄 코드 블록을 포함하여 프로그래밍 코드에서 폰트의 가독성을 테스트합니다.
• 테이블: 테이블을 사용하여 폰트가 셀 내에서 어떻게 보이는지 확인합니다.
• 수평선: 수평선을 포함하여 텍스트 구분 시 폰트와 레이아웃을 확인합니다.
• 체크리스트: 체크리스트를 사용하여 폰트가 리스트 항목과 체크박스에 어떻게 적용되는지 봅니다.
• 수식 (LaTeX): 인라인 및 블록 수식을 포함하여 폰트가 수학 기호와 수식에서 어떻게 보이는지 테스트합니다.
• 기타 요소: 강조된 단어와 링크된 이미지를 포함하여 폰트의 다양한 적용 사례를 확인합니다.
• 하이라이트: ==밝게 표현하고 싶을 때 하이라이트==를 사용합니다.

이 sandbox.md 파일을 프로젝트의 content 디렉토리에 추가한 후, Obsidian에서 열어보고, 웹사이트에 반영하여 폰트가 모든 요소에서 잘 적용되는지 확인해 보세요. 필요한 경우 추가적인 마크다운 요소를 포함시켜 더 상세히 테스트할 수도 있습니다.

일반 문단 

가을이 깊어가면서 낙엽들이 천천히 땅에 떨어집니다. 시원한 바람이 불어오고, 산책을 하기에 딱 좋은 계절이 찾아왔습니다. 공원 곳곳에서는 사람들이 운동을 즐기고, 가족 단위로 나들이를 떠나는 모습이 보입니다. 이러한 풍경 속에서 마음도 한결 가벼워지는 것을 느낄 수 있습니다.

Header4

The @tailwindcss/typography plugin² is our attempt to give you what you actually want, without any of the downsides of doing something stupid like disabling our base styles.

• For example, here's another nested list.

  But this time with a second paragraph.

  • These list items won't have <p> tags
  • Because they are only one line each

• But in this second top-level list item, they will.

  This is especially annoying because of the spacing on this paragraph.

  • As you can see here, because I've added a second line, this list item now has a <p> tag. This is the second line I'm talking about by the way.
  • Finally here's another list item so it's more like a list.

• A closing list item, but with no nested list, because why not?

Header5

<article class="prose">
    <h1>Garlic bread with cheese: What the science tells us</h1>
    <p>
        For years parents have espoused the health benefits of eating garlic
        bread with cheese to their children, with the food earning such an
        iconic status in our culture that kids will often dress up as warm,
        cheesy loaf for Halloween.
    </p>
    <p>
        But a recent study shows that the celebrated appetizer may be linked to
        a series of rabies cases springing up around the country.
    </p>
</article>

This is inline code const x = () => { return true }

Header6

1. We want everything to look good out of the box.
2. Really just the first reason, that's the whole point of the plugin.
3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.

Images

External Image

Internal Image

Video Stream

Embed Markdown

Watches

• Apple Watch Series 6 40mm
• Casio A168WGG-1A
• Casio G-5600UE-1
• Citizen Ana-Digi Temp JG2101-78E
• Citizen Promaster PMD56
• Hamilton Khaki Field Mechanical 38mm
  • Erika's Originals. Original MN™ Straps
• Omega Seamaster Diver 300M - No Time To Die
  • Uncle Straps. Titanium US1450 Bracelet
• Seiko 5 SNK803
• Tudor Black Bay 54

Callout

Callout 아닌 기본 문구

여기는 인용 문구다.

Checkbox

• to-do
• done
• [/] incomplete
• [-] canceled
• [>] forwarded
• [<] scheduling

Table

Diagram

graph TD
 
Biology --> Chemistry

HTML Code - Image Grid