(티스토리) 리스트 스타일 들여쓰는 방법

리스트 스타일

티스토리에는 list를 적용시킬 수 있는 <ol>, <ul>, <li> 태그가 존재합니다. 

 

주로 검색 엔진이 받아들이기 쉬운 태그이기 때문에 글을 마구자비로 쓰는 것보다 좋습니다.

 

왜냐하면 아래 예시 처럼

 

1. 안녕하세요.

2. 서근입니다.

 

로 숫자를 직접 기입하는 것보다 

 

1. 안녕하세요.
2. 서근입니다.

 

이런 식으로 리스트 스타일을 주는 것이 웹사이트가 검색 결과에 더 잘 보이도록 최적화를 잘한다고 합니다.(SEO-검색 엔진 최적화)

리스트 사용법

보통은 순서대로 엔터 없이 글을 쓰고 드래그해서 위 메뉴의 리스트를 누른 뒤에 내용을 추가하면 됩니다.

• 리스트 사용방법에
• 대해
• 알아봅시다

리스트 들여 쓰는 방법

아래 예제처럼 리스트를 들여쓰는 방법은 어떻게 해야 할까요?

1. 서근 개발노트
• 이름 : 서근
• 주제 : 스위프트

가장 간단한 방법부터 알려드릴게요. 

 

1. 리스트를 생성한다.

 

1

1-1

1-2

2

2-1

2-2

---

2. 드래그해서 리스트 스타일을 전체 적용해준다.

• 1
• 1-1
• 1-2
• 2
• 2-1
• 2-2

---

3. 원하는 자식 리스트를 선택 후 키보드의 Tap을 누른다.

• 1
  • 1-1
  • 1-2
• 2
  • 2-1
  • 2-2

원래대로 돌리려면 Shift + Tab으로 복구 가능합니다.

티스토리 버그?

그런데 부모 태그 스타일이 정해져 있으면 자식 태그의 스타일이 다르다고 해도 부모의 스타일을 그대로 적용시켜버리는 버그가 존재합니다. 

 

그 이유는 CSS 우선순위 때문입니다.

<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>1
<ul style="list-style-type: circle;" data-ke-list-type="circle">
<li>1-1</li>
<li>1-2</li>
</ul>
</li>
<li>2
<ul style="list-style-type: circle;" data-ke-list-type="circle">
<li>2-1</li>
<li>2-2</li>
</ul>
</li>
</ul>

위에 적용한 스타일의 html을 뜯어보면 다음과 같은데 정작 글에서는 disc 스타일로 통일되게 출력됩니다. 특정한 방법으로 css를 수정해도 되지만,

 

조금 귀찮아도 html을 직접 수정하는 방법이 좋습니다.

글쓰기 html을 통한 수정

메뉴바를 보면 기본 모드 탭에 html에서 직접 수정하는 방법이 있는데 복잡해 보여도 어렵지 않습니다.

 

일단 알아둬야 할 것이

 

<ol> 이 부모와 자식을 모두 덮는 스타일

<ul> 가 자식 태그의 리스트를 지정하는 스타일 

<li> 는 부모와 자식 태그 아래에 사용하는 목록

 

이라고 생각하면 편합니다. (조금 복잡할 수도...?!)

처음에 아래 목록을 드래그해서 리스트 스타일을 적용하면 html에는 다음과 같이 보입니다.

• 서근 개발노트
• 안녕하세요 서근 개발 노트입니다.
• 정보
• 타이틀명 : 서근 개발노트
• 주제 : 스위프트
• 기타 : 스킨

<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>서근 개발노트</li>
<li>안녕하세요 서근 개발 노트입니다.</li>
<li>정보</li>
<li>타이틀명 : 서근 개발노트</li>
<li>주제 : 스위프트</li>
<li>기타 : 스킨</li>
</ul>

<ul>이 부모 태그로 전체를 덮고 있습니다. 

 

위에서 <ol>이 부모 태그라고 했죠? 바로 수정해봅시다. 천천히 살펴보면 쉬울 거예요!

html 수정 순서

1.  <ul> ➜ <ol>로 변경
2. <ol>의 제일 큰 타이틀은 <li></li>로 놔둠
3. 자식 리스트 위에 <ul style="list-style-type: disc;" data-ke-list-type="disck">를 넣어주고 자식 리스트를 덮어줌 </ul>
4. <ol>의 타이틀이 또 있다면 /ul 이 끝나는 지점에 스타일 추가 없이 바로 <li></li> 태그를 사용함
5. 이 타이틀의 자식 리스트가 있다면 다시 한번 <ul></ul> 추가
6. 제일 마지막에 </ol> 태그 추가

<ol style="list-style-type: disc;" data-ke-list-type="disc">
<li>타이틀 1</li>

 <ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>자식 1</li>
   </ul>
   
<li>타이틀 2</li>

  <ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>자식 1</li>
<li>자식 2</li>
<li>자식 3</li>
    </ul>
    
</ol>

1. 타이틀 1
• 자식 1
2. 타이틀 2
• 자식 1
• 자식 2
• 자식 3

이렇게 하고 이제 원하는 부모 또는 자식 리스트를 드래그에서 상단 메뉴에서 리스트를 클릭해 적용하면 실제 올라가는 게시글에도 정삭적으로 표시됩니다. 

 

왜 티스토리는 이런 버그를 만들어서.. 어렵게 하는지 이해가 안 되지만 글을 작성하시는 블로거 분들께 도움이 되고자 작성합니다. 혹시 이것보다 더 편한 방법이 있으시면 댓글 부탁드립니다. 

리스트 양식

아래 서식을 복사해서 사용하면 편해요!

<ol style="list-style-type: disc;" data-ke-list-type="disc">
<li>&nbsp;</li>

 <ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>&nbsp;</li>
   </ul>
   
<li>&nbsp;</li>

  <ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>&nbsp;</li>
    </ul>

</ol>

 

 

읽어주셔서 감사합니다🤟