sori.studio

티스토리 글쓰기 가이드: 서식과 구조 정리

log/news
2025. 5. 20. 16:00

Tistory 글쓰기 가이드 초안(제목1)

1. 서론(제목2)

안녕하세요. 이번 문서는 티스토리에서 글을 작성할 때 활용할 수 있는 다양한 서식 기능을 소개하고, 이를 통해 콘텐츠의 가독성과 표현력을 높이는 방법(굵게)을 안내하기 위한 초안입니다.

 

2. 본문 구성 예시

2.1 기본 문단 사용(제목3)

첫 번째 단락입니다. 일반적인 본문 텍스트는 이렇게 자연스럽게 작성됩니다.
줄바꿈을 통해 문단을 나누면 가독성이 훨씬 좋아집니다.

 

두 번째 단락에서는 강조하고 싶은 내용은 이탤릭으로, 중요한 단어는 굵게,
하이라이트처럼 강조하고 싶은 문장은 밑줄을 사용할 수 있습니다.
가끔 삭제되거나 잘못된 정보는 취소선으로 처리해도 좋습니다.

 

세 번째 단락입니다. 각 문장은 명확하고 간결하게 구성하는 것이 좋습니다.
특히, 글머리표나 인용구, 코드 블럭 등을 섞어 사용하면 정보 전달이 훨씬 쉬워집니다.

 

본문 1 예시

우리는 글을 쓸 때 정보 전달뿐만 아니라 시각적인 가독성과 구조적인 완성도도 함께 고려해야 합니다. 본문 1은 가장 크고 눈에 띄는 일반 문단 스타일로, 주제를 강조하거나 중요한 메시지를 전달할 때 적합합니다. 특히 장문의 글을 쓸 때, 도입부나 주제를 소개하는 문단에 사용하면 매우 효과적입니다.

 

본문 2 예시

이 문장은 본문 2 스타일로 작성되었습니다. 본문 2는 대부분의 일반적인 글쓰기에서 기본적으로 사용되는 크기입니다. 너무 크지도 작지도 않아서 장문에 적합하고, 독자가 편안하게 읽을 수 있도록 도와줍니다.

 

본문 3 예시 (글자 크기: 14px)

본문 3은 상대적으로 작은 크기의 문단 스타일로, 부가적인 설명이나 덧붙이는 글에 주로 사용됩니다. 예를 들어 각주처럼 보조적인 정보나 참고 사항을 안내할 때, 본문 3을 활용하면 시각적으로 계층을 잘 구분할 수 있습니다.

 

 

3. 정렬 방식 안내

이 문장은 (왼쪽 정렬)되어 있습니다.

이 문장은 (가운데 정렬)되어 있습니다.

이 문장은 (오른쪽 정렬)되어 있습니다.

 

(양쪽 정렬)은 웹 콘텐츠를 보다 정돈된 인상으로 보이게 할 수 있는 매우 유용한 정렬 방식입니다. 특히 글의 길이가 길고 정보가 많은 문단에서 시각적인 일관성과 전문성을 전달하는 데 큰 효과를 발휘합니다. 일반적으로 뉴스 기사, 블로그의 본문, 백서, 리포트 같은 문서에서 자주 사용되며, 좌우 여백을 균등하게 맞춰줌으로써 눈의 흐름을 자연스럽게 만들어 줍니다. 다만 너무 짧은 문장에 적용하면 단어 간 간격이 어색해지고, 모바일에서는 줄폭이 좁아 가독성이 떨어질 수 있기 때문에 문장 길이와 콘텐츠 특성에 따라 적절히 사용하는 것이 중요합니다. 티스토리 글쓰기에서는 HTML 모드나 고급 서식을 활용하면 이러한 정렬을 직접 지정할 수 있으며, 이를 통해 보다 전문적인 느낌의 포스트를 제작할 수 있습니다.

 

 

4. 인용문 예시

인용 1 – 기본 인용

성공은 최선을 다한 사람에게 자연스럽게 따라오는 결과다.

 

 

인용 2 – 강조된 인용

중요한 것은 속도가 아니라 방향이다.

 

 

인용 3 – 감성적/보조적인 느낌

정보는 남에게 전하거나 판매를 해도 없어지거나 줄어들지 않고 그대로 남는다.
상품은 사용할수록 변질되거나 양이 감소하는 속성을 가진다.
정보는 상품의 그런 일반적인 속성을 갖지 않기 때문에 상품이 아니거나 특별한 상품으로서 구분되어야 한다.

— Edward Burnett Tylor, 『원시문화』

 

인용 4 – 인용 해제 (일반 문장)

(이 문장은 인용이 해제된 일반 문장입니다. "인용 4"는 스타일이 아닌 "인용 취소"로 동작합니다.)

 

 

5. 리스트 활용

리스트 1 – 일반 점 목록 (●)

기본적인 점 목록으로, 일반적인 항목 나열에 적합합니다.

  • 사과
  • 바나나
  • 포도

 

리스트 2 – 비어 있는 원 목록 (○)

비어 있는 원 형태로, 체크리스트나 할 일 목록 등에 활용할 수 있습니다.

  • 할 일 목록 정리
  • 블로그 포스트 작성
  • 이미지 업로드 완료

 

리스트 3 – 숫자 목록 (1, 2, 3...)

숫자 목록으로, 순서가 중요한 항목 나열에 적합합니다.

  1. 회원가입
  2. 로그인
  3. 글 작성

 

리스트 4 – 리스트 해제 (일반 문장)

리스트 서식을 해제하여 일반 문장으로 되돌리는 기능입니다.

 

 

6. 코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>웹 개발 샘플</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f9f9f9;
      text-align: center;
      padding: 50px;
    }
    h1 {
      color: #333;
    }
    p {
      font-size: 18px;
      color: #555;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #0066cc;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #005bb5;
    }
  </style>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p id="greeting">웹 개발의 세계에 오신 것을 환영합니다.</p>
  <button onclick="changeGreeting()">인사말 변경</button>

  <script>
    function changeGreeting() {
      const greetings = [
        "프론트엔드 개발을 시작해볼까요?",
        "HTML, CSS, JavaScript를 배우는 중입니다!",
        "코딩은 재미있어요!",
        "함께 웹을 만들어봐요!"
      ];
      const randomIndex = Math.floor(Math.random() * greetings.length);
      document.getElementById("greeting").textContent = greetings[randomIndex];
    }
  </script>
</body>
</html>

 

7. 접은글 활용법

더보기

아래 버튼을 클릭하여 자세한 설명을 확인해 보세요.

접은글 사용 방법 자세히 보기

접은글을 사용하는 방법은 다음과 같습니다:

  1. 티스토리 글쓰기 에디터에서 접은글로 만들고 싶은 내용을 작성합니다.
  2. 해당 내용을 선택한 후, 에디터 상단의 더보기(⋯) 메뉴를 클릭합니다.
  3. 접은글 옵션을 선택하면, 선택한 내용이 접은글로 설정됩니다.

주의사항:

  • 더보기
    접은글은 기본적으로 숨겨진 상태로 표시되며, 독자가 '더보기'를 클릭해야 내용을 볼 수 있습니다.
  • 더보기
    모든 스킨에서 접은글 기능이 동일하게 작동하지 않을 수 있으므로, 스킨에 따라 스타일을 조정해야 할 수 있습니다.

 

 

8. 외부 링크 삽입

글에 링크를 걸면 이렇게 표시됩니다. 이 링크를 클릭하면 sori.studio 블로그 메인화면으로 이동합니다.

 

 

9. 구분선으로 흐름 나누기

 

1. 기본 실선

 

 

 

 

 

 

 

 

 

 

 

11. 마무리

이 문서는 티스토리에서 글쓰기 기능을 테스트하거나 소개할 때 사용할 수 있는 가이드 초안입니다. 

티스토리툴바