필터링&테스트1
본문 스타일 테스트 본문
티스토리 본문 스타일 테스트(제목1) 글 작성시 적용되어야하는 스타일 리스트입니다. 주요 가이드를 포함하며, 이 글에서 <article>에 포함되는 스타일을 모두 확인할 수 있습니다.
마크다운에 최적화되어 있으며 티스토리 위지윅에디터 사용시 자주 발생하는 문제에 대한 가이드를 포함합니다. 스타일과 미디어 파일 예시 등을 확인할 수 있습니다.
제목
헤드라인 적용 스타일을 확인할 수 있습니다. 헤드라인은 해당 포스팅 글의 목차를 구분해주는 역할을 수행하며, 독자가 글의 구조를 자연스럽게 인식할 수 있도록 돕습니다. 헤드라인은 h1, h2, h3, h4에 적용되며, 이는 티스토리 에디터에서 제공하는 머리말 구조와 동일합니다.
제목 1
제목 2
제목 3
제목 4
본문
일반 문단 스타일입니다. 일반 <p>에 삽입되는 내용입니다. 에디터에서 해당 글은 '본문'으로 쓰는 경우에 적용됩니다.
enter를 치면 새로운 문단으로 시작하며, 문단 사이 간격이 적용됩니다. 간격 없이 줄바꿈을 하려면 shift + enter를 입력하여 줄바꿈할 수 있습니다. 위지윅에디터를 사용하는 경우, 다른 태그 안에 본문 태그가 중복 삽입되는 경우가 많으니 유의하여야 합니다.
인용구
인용구 스타일입니다. 위지윅 에디터에서 1개의 인용구 스타일을 제공하고 있습니다. <blockquote>에 삽입되며, 인용구 안에 본문 스타일 외에도 다른 본문 서식이 삽입될 수 있습니다.
인용구를 사용합니다.
인용구를 사용합니다.
인용구 안에 인용구를 포함할 수 있습니다.
인용구 안에 제목 등 다른 본문 서식을 삽입할 수 있습니다.
정렬
목록
목록 스타일입니다. 목록은 크게 '순서가 없는 목록'인 <ul>과 '순서가 있는 목록'인 <ol>로 구분됩니다. 위지윅 에디터에서 '순서가 없는 목록' 2개, '순서가 있는 목록' 3개 타입을 제공합니다.
- 순서가 없는 목록
style="list-style-type: disc;가 적용된 경우 - 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
- 순서가 없는 목록
- 순서가 없는 목록
style="list-style-type: square;가 적용된 경우 - 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
- 순서가 없는 목록
- 순서가 있는 목록
style="list-style-type: decimal;이 적용된 경우 - 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
- 순서가 있는 목록
- 순서가 있는 목록
style="list-style-type: upper-roman;이 적용된 경우 - 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
- 순서가 있는 목록
- 순서가 있는 목록
style="list-style-type: upper-alpha;가 적용된 경우 - 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
- 순서가 있는 목록
표
표 스타일입니다. 테이블은 클래스 table-content에 래핑되어 삽입되며, 실 table 속성은 위지윅에디터로 삽입되는 경우, 인라인으로 스타일이 들어가므로, 스킨에서 제어하지 않습니다. 테이블이 x축으로 길어지면, 스크롤 및 터치를 통해 확인할 수 있도록 제공하여 테이블 고유의 스타일과 컨텐츠가 유지될 수 있도록 합니다.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
코드 팬스
코드 팬스는 코드 입력을 위한 서식으로 <pre>에 삽입됩니다. language는 en으로 삽입되고 개발언어별로 스타일링하지는 않습니다.
<pre lang="en">fullCover = "enable",</pre>
구분선
구분선은 단락의 내용에 구분이 필요하거나 특정 문단을 강조하여야할 때 쓰입니다. <hr>로 삽입되며, 위지윅에디터에서 일반 구분선 외에 6개의 구분선을 제공하고 있습니다. 스킨에서는 기본 구분선 외에 다른 스타일을 별도로 제공하지 않을 수 있습니다.
기본 구분선
에디터 구분선 1
에디터 구분선 2
에디터 구분선 3
에디터 구분선 4
에디터 구분선 5
에디터 구분선 6
이미지
주석을 달지 않은 이미지(1200x630)
주석을 단 이미지(728x414)
----주석이 아닌 이 텍스트와 비교해주세요----
외부 컨텐츠(아이프레임)
일반 서식
하이퍼 링크
굵게
굵은 글씨 입력 bold
기울이기
이탤릭체 입력 Italic
밑줄
언더라인 입력 Underline
코드 입력
코드 code 입력
티스토리 에디터 전용 서식
텍스트 박스
글 상자입니다.