워드프레스 순서 있는 목록 불릿 리스트 들여쓰기 조정 CSS

워드프레스를 사용하여 글을 작성할 때 내용을 정리하고 이해하기 쉽게 목록 리스트 기능을 사용하게 됩니다. 하지만 기본적으로 제공되는 목록 리스트의 들여쓰기 위치가 마음에 들지 않을 수가 있습니다. CSS를 사용하여 조정하는 방법을 간단히 적어보겠습니다.

목록 리스트의 들여쓰기 조정

목록 리스트의 들여쓰기는 CSS의 text-indent와 margin-left의 속성을 사용하여 조정할 수 있습니다.

▽다음과 같은 CSS 코드를 사용하면 목록 리스트의 첫 번째 단어를 10px 들여 쓰게 됩니다.

ul li {
  text-indent: 10px;
}

▽다음과 같은 CSS 코드를 사용하면 목록 리스트 전체를 10px 왼쪽으로 들여 쓰게 됩니다.

ul li {
  margin-left: 10px;
}

^{CSS 코드를 사용하여 목록의 글자 색과 줄 간격을 조정할 수도 있습니다.}

▽다음과 같은 CSS 코드를 사용하면 목록 리스트의 색상이 파란색으로 변경됩니다.

ul li {
  color: blue;
}

▽다음과 같은 CSS 코드를 사용하면 목록 리스트의 줄 간격이 1.5배로 변경됩니다.

ul li {
  line-height: 1.5;
}

참고) ul, ol, li, 불릿 뜻

ul : unorderped list의 약자로 순서가 없는 목록을 생성하는 태그
ol : ordered list의 약자로 순서가 있는 목록을 생성하는 태그
li : list item의 약자로 ul 태그의 자식 태그로 사용되며 목록의 항목을 생성하는 태그
불릿 포인트(bullet point) : 목록의 항목을 나타내는 작은 점 또는 기호로 불릿 포인트를 사용하면 목록의 항목을 시각적으로 구분할 수 있습니다. (순서 없는 목록 리스트)

관리자 페이지 : 외모 ▶ 사용자 정의하기 ▶ 추가 CSS

① 워드프레스 순서 없는 목록 리스트(불릿 포인트) 조정 CSS

_{▼ 위의 내용으로 CSS 코드 사용 예시 1.}

_{▼ 위의 내용으로 CSS 코드 사용 예시 2.}

② 워드프레스 순서 있는 목록 리스트 조정 CSS

_{▼ 위의 내용으로 CSS 코드 사용 예시 1.}

_{▼ 위의 내용으로 CSS 코드 사용 예시 2.}

■ 참고

CSS를 사용하여 워드프레스의 목록 리스트의 들여쓰기 위치, 글자 색, 줄 간격을 조정할 수 있습니다. 이 방법을 사용하여 워드프레스의 목록 리스트를 보다 가독성 있게 그리고 디자인을 자유롭게 변경할 수 있습니다.