글 리스트 간격 조절

목록을 쓰는데 한 줄이 길 경우 리스트를 쓰면 좀 더 깔끔하다.

ㅡ 그냥 이렇게 길게 길게 길게 쓰면 모바일에서는 가독성이

ㅡ 안좋을수도

 

• 그런데 상단 메뉴에서 리스트 기능을 이용하면 길게 써도
• 한 줄 부분이 구분되어 보기 좋아

 

근데 이 목록의 간격이 좁게 느껴진다면 HTML, CSS 코드로 목록의 간격도 좀 더 여유있게 할 수 있다.

 

 

 

■ 목록 리스트 간격 조절하기

• 블로그 관리페이지(블로그주소/manage) > 꾸미기 > 스킨 편집 > html 편집 > CSS
• ctrl / command + F > .article-view ul li 찾기 > line-height 조절 > 적용

 

웹브라우저 개발자도구로 페이지 검사하기를 하면 요소 선택 기능으로 리스트 부분을 클릭해 그 부분의 코드를 알 수 있다. 

티스토리 오디세이 Odyssey 스킨에서 리스트는 .article-view ul li

참고로 찾은 부분에서 다음 영역으로 이동하려면 ctrl / command + G

 

 

 

■ line-height: 24px 일 때 리스트 간격

 

 

 

■ line-height: 28px / padding-left: 19px

 

 

 

■ 들여쓰기 하려면 padding

.article-view ul, .article-view il {
  margin: 0;
  padding: 0 0 0 19px;
}

 

네모상자가 있다고 하면 padding은 네모상자 안의 패딩 솜 같은 역할.

순서대로 위, 오른쪽, 아래, 왼쪽 방향으로 공간이 생기는 것과 같아 왼쪽에 지정된 값이 클수록 들여쓰기가 많이 된다.

문서 작성에서 들여쓰기 기능처럼 보이게 하려면 왼쪽 부분만 설정하면 되니까 padding-left로 해도 되겠다.