본문 바로가기
블로그JOB/디자인

줄 간격, 리스트 간격 조절

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

 

웹브라우저 개발자도구로 페이지 검사하기를 하면 요소 선택 기능으로 리스트 부분을 클릭해 그 부분의 코드를 알 수 있다.
티스토리 오디세이 Odyssey 스킨에서 리스트는 .article-view ul li

 

 

 

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로 해도 되겠다.