블로그 스팟(Blogspot)으로 블로그를 운영하다 보면 글쓰기 중 목록(리스트) 기능을 자주 사용하게 됩니다.
하지만 블로그 스팟의 기본 목록 스타일은 왼쪽 들여쓰기(indentation)가 생각보다 커서, 본문 디자인과 어울리지 않거나 공간을 비효율적으로 사용하는 것처럼 보일 때가 있습니다.
이 기본 목록 스타일, 특히 들여쓰기 문제를 CSS 코드를 통해 깔끔하게 조절하는 방법을 소개하려고 합니다.
블로그 스팟 목록 스타일 개선 CSS 코드
아래 코드를 ]]></b:skin> 태그 바로 위에 삽입하세요.
/* 블로그 본문 내 목록 스타일 */
/* 공통 스타일 */
.post-body ul,
.post-body ol {
margin-block-start: 1em; /* 목록 위쪽 외부 여백 */
margin-block-end: 1em; /* 목록 아래쪽 외부 여백 */
margin-inline-start: 0px; /* 목록 왼쪽 외부 여백 (들여쓰기 관련 1) */
padding-inline-start: 15px; /* 목록 왼쪽 내부 여백 (들여쓰기 관련 2) */
line-height: 1.6; /* 목록 항목 줄 간격 */
}
/* ul은 기본 불릿 (disc) */
.post-body ul {
list-style-type: disc; /* 순서 없는 목록 기호: 채워진 원 */
}
/* ol은 숫자 (decimal) */
.post-body ol {
list-style-type: decimal; /* 순서 있는 목록 기호: 숫자 */
}
/* 2차 목록(ul 내부의 ul) */
.post-body ul ul {
list-style-type: circle; /* 2차 ul 목록 기호: 빈 원 */
margin-inline-start: 0; /* 2차 목록 왼쪽 외부 여백 */
padding-inline-start: 10px; /* 2차 목록 왼쪽 내부 여백 (들여쓰기) */
}
.post-body ol ul {
list-style-type: disc; /* ol 안의 ul 목록 기호: 채워진 원 */
margin-inline-start: 0; /* 2차 목록 왼쪽 외부 여백 */
padding-inline-start: 10px; /* 2차 목록 왼쪽 내부 여백 (들여쓰기) */
}
/* 블로그 본문 내 목록 스타일 끝 */
이제 위 코드를 각 부분별로 자세히 살펴보겠습니다.
1. 주석 (/* ... */)
코드 중간중간에 /* 설명 */ 과 같은 형태로 된 부분은 주석입니다. CSS 코드의 실행에는 영향을 주지 않으며, 코드의 각 부분이 어떤 역할을 하는지 설명해주는 역할을 합니다.
/* 블로그 본문 내 목록 스타일 */: 이 CSS 코드가 블로그 본문 내의 목록 스타일을 다룬다는 것을 알려줍니다./* 공통 스타일 */:<ul>과<ol>목록 모두에 적용되는 공통 스타일 정의 부분임을 나타냅니다./* ul은 기본 불릿 (disc) */,/* ol은 숫자 (decimal) */,/* 2차 목록... */: 각 스타일 규칙의 대상과 내용을 간략히 설명합니다./* 블로그 본문 내 목록 스타일 끝 */: 스타일 정의가 끝났음을 알려줍니다.
2. 공통 목록 스타일 (.post-body ul, .post-body ol)
이 부분은 블로그 본문(.post-body) 안에 있는 모든 순서 없는 목록(ul)과 순서 있는 목록(ol)에 공통적으로 적용될 스타일을 정의합니다.
.post-body ul, .post-body ol: 선택자(Selector)입니다. 블로그 본문 영역 내의ul태그와ol태그를 지정합니다. 이렇게 하면 사이드바 등 다른 영역의 목록에는 영향을 주지 않고 본문 내 목록에만 스타일을 적용할 수 있습니다.margin-block-start: 1em;: 목록의 위쪽(시작 부분) 외부 여백을 1em (현재 글자 크기의 1배)으로 설정합니다. 목록과 위쪽 문단 사이의 간격을 조절합니다.margin-block-end: 1em;: 목록의 아래쪽(끝 부분) 외부 여백을 1em으로 설정합니다. 목록과 아래쪽 문단 사이의 간격을 조절합니다.margin-inline-start: 0px;: 목록의 왼쪽(시작 부분) 외부 여백을 0px로 설정합니다. 이것이 기본 들여쓰기를 줄이는 첫 번째 단계입니다.padding-inline-start: 15px;: 목록의 왼쪽(시작 부분) 내부 여백을 15px로 설정합니다. 이 값이 실질적인 들여쓰기 크기를 결정합니다. 불릿(●)이나 숫자(1.)가 표시될 공간을 확보하고 텍스트가 시작될 위치를 지정합니다. 기본값보다 작은 15px로 설정하여 들여쓰기를 줄였습니다. (이 값을 조절하여 원하는 들여쓰기 크기를 맞출 수 있습니다.)line-height: 1.6;: 목록 항목(li) 내부의 줄 간격을 1.6배로 설정하여 가독성을 높입니다.
3. 순서 없는 목록 스타일 (.post-body ul)
list-style-type: disc;: 블로그 본문 내의ul목록의 글머리 기호(bullet)를 기본 형태인 채워진 원 (disc, ●)으로 명시적으로 설정합니다.
4. 순서 있는 목록 스타일 (.post-body ol)
list-style-type: decimal;: 블로그 본문 내의ol목록의 번호 매기기 형식을 기본 십진수 숫자 (decimal, 1, 2, 3...)로 명시적으로 설정합니다.
5. 중첩된 목록 (2차 목록) 스타일
목록 안에 또 다른 목록이 들어가는 경우 (예: ul 안에 ul이 있거나 ol 안에 ul이 있는 경우)를 위한 스타일입니다.
.post-body ul ul:ul목록 안에 있는 또 다른ul목록 (2차ul목록)을 선택합니다.list-style-type: circle;: 2차ul목록의 글머리 기호를 속이 빈 원 (circle, ○)으로 설정하여 1차 목록과 구분합니다.margin-inline-start: 0;: 외부 왼쪽 여백은 0으로 설정합니다.padding-inline-start: 10px;: 내부 왼쪽 여백을 10px로 설정하여 1차 목록(15px)보다 약간 덜 들여쓰기 되도록 합니다. (실제로는 상위 목록의 padding 값에 더해져서 더 깊게 들여쓰기 됩니다.)
.post-body ol ul:ol목록 안에 있는ul목록 (ol 속 2차 ul 목록)을 선택합니다.list-style-type: disc;:ol안에 중첩된ul목록의 글머리 기호는 다시 채워진 원 (disc, ●)으로 설정합니다.margin-inline-start: 0;: 외부 왼쪽 여백은 0으로 설정합니다.padding-inline-start: 10px;: 내부 왼쪽 여백을 10px로 설정하여 들여쓰기를 조절합니다.
마무리
위 CSS 코드를 적용하면 블로그 스팟의 기본 목록 스타일보다 훨씬 간결하고 정돈된 느낌을 줄 수 있습니다. 특히 padding-inline-start 값을 조절하여 자신의 블로그 디자인 테마에 맞게 들여쓰기 정도를 미세하게 조정할 수 있다는 장점이 있습니다.
블로그 스팟에서 목록 들여쓰기가 너무 크다고 느껴졌던 분들이라면, 이 CSS 코드를 활용하여 가독성 좋고 보기 좋은 목록 스타일을 만들어보세요!