관리 메뉴

필터링&테스트1

본문 스타일 테스트 본문

카테고리 없음

본문 스타일 테스트

스킨필터링99 2018. 12. 10. 17:17

티스토리 본문 스타일 테스트(제목1) 글 작성시 적용되어야하는 스타일 리스트입니다. 주요 가이드를 포함하며, 이 글에서 <article>에 포함되는 스타일을 모두 확인할 수 있습니다.

마크다운에 최적화되어 있으며 티스토리 위지윅에디터 사용시 자주 발생하는 문제에 대한 가이드를 포함합니다. 스타일과 미디어 파일 예시 등을 확인할 수 있습니다.

 

제목

헤드라인 적용 스타일을 확인할 수 있습니다. 헤드라인은 해당 포스팅 글의 목차를 구분해주는 역할을 수행하며, 독자가 글의 구조를 자연스럽게 인식할 수 있도록 돕습니다. 헤드라인은 h1, h2, h3, h4에 적용되며, 이는 티스토리 에디터에서 제공하는 머리말 구조와 동일합니다.

제목 1

제목 2

제목 3

제목 4

 

본문

일반 문단 스타일입니다. 일반 <p>에 삽입되는 내용입니다. 에디터에서 해당 글은 '본문'으로 쓰는 경우에 적용됩니다.

enter를 치면 새로운 문단으로 시작하며, 문단 사이 간격이 적용됩니다. 간격 없이 줄바꿈을 하려면 shift + enter를 입력하여 줄바꿈할 수 있습니다. 위지윅에디터를 사용하는 경우, 다른 태그 안에 본문 태그가 중복 삽입되는 경우가 많으니 유의하여야 합니다.

 

인용구

인용구 스타일입니다. 위지윅 에디터에서 1개의 인용구 스타일을 제공하고 있습니다. <blockquote>에 삽입되며, 인용구 안에 본문 스타일 외에도 다른 본문 서식이 삽입될 수 있습니다.

인용구를 사용합니다.

인용구를 사용합니다.

인용구 안에 인용구를 포함할 수 있습니다.

인용구 안에 제목 등 다른 본문 서식을 삽입할 수 있습니다.

 

정렬

좌측 정렬
가운데 정렬
우측 정렬
justify 정렬 justify 정렬 justify 정렬 justify 정렬 justify 정렬 justify 정렬 justify 정렬


목록

목록 스타일입니다. 목록은 크게 '순서가 없는 목록'인 <ul>과 '순서가 있는 목록'인 <ol>로 구분됩니다. 위지윅 에디터에서 '순서가 없는 목록' 2개, '순서가 있는 목록' 3개 타입을 제공합니다.

  • 순서가 없는 목록 style="list-style-type: disc;가 적용된 경우
  • 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
  • 순서가 없는 목록
  • 순서가 없는 목록 style="list-style-type: square;가 적용된 경우
  • 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
  • 순서가 없는 목록
  1. 순서가 있는 목록 style="list-style-type: decimal;이 적용된 경우
  2. 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
  3. 순서가 있는 목록
  1. 순서가 있는 목록 style="list-style-type: upper-roman;이 적용된 경우
  2. 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
  3. 순서가 있는 목록
  1. 순서가 있는 목록 style="list-style-type: upper-alpha;가 적용된 경우
  2. 줄이 긴 경우 예시입니다. 줄이 긴 경우 줄바꿈이 되어도 위, 아래 목록과 구분될 수 있도록 충분한 여백을 제공하여 가독성을 확보하여야 합니다.
  3. 순서가 있는 목록

 

표 스타일입니다. 테이블은 클래스 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 입력

 

티스토리 에디터 전용 서식

텍스트 박스

글 상자입니다.

열기 및 접기 (더보기)

각주

티스토리는 카카오[각주:1]에서 ♥[각주:2]을 담아 만듭니다.


  1. 각주 내용 [본문으로]
  2. 각주 내용 2 [본문으로]
0 Comments
댓글쓰기 폼