워드프레스 : 불릿(Bullet) 모양 변경하는 법 2. 응용


워드프레스 : 불릿(Bullet) 모양 변경하는 법 2. 응용



들어가며…

이전글#1(바로가기)에서 계층별 불릿 모양을 변경하는 법을 알아보았습니다. 이번글에서는 불릿 목록 CSS가 어떻게 구성되어 있으며, 어떻게 응용해볼 수 있는지 알아보도록 하겠습니다. CSS 코드를 어디에 입력해야하는지 모르시는 분은 이전글(바로가기)에 추가 CSS코드를 입력하는 법을 소개해드렸으니, 참조하시면 됩니다.

불릿 목록

워드프레스에서 사용하는 기본적은 불릿 요소는 두가지 (ol, ul)가 있습니다.#2 이 두 불릿 목록에 대해 살펴보도록 합시다.

  • ol (Ordered List) : ol 은 Ordered List의 줄임말입니다. Ordered 라는 말 그대로 순서가 있는 목록 요소를 뜻합니다. 숫자나, 로마자로 순서를 붙혀 표현하는 형식입니다.
  • ul (Un-ordered List) : ul은 Unordered List의 줄임말입니다.  Unordered 라는 말 그대로 순서가 없는 목록 요소를 뜻합니다. 글머리 기호를 붙혀서 목록을 만드는 형식입니다.

이전 코드 살펴보기

아래 코드는 지난번 글에서 다룬 CSS 코드 입니다. 총 3가지 구문으로 이루어져 있습니다.

  • ul : 첫번째 계층에서의 불릿 목록 스타일을 결정합니다.
  • ul ul : 두번째 계층에서의 불릿 목록 스타일을 결정합니다.
  • ul ul ul : 세번째 계층에서의 불릿 목록 스타일을 결정합니다.

코드를 다시 살펴볼까요? 첫번째 계층은 disc 모양으로, 두번째 계층은 circle 모양으로, 세번째 계층은 square 모양으로 나타나겠죠?

/* Bullet Style */
/* 첫번째 계층 */
ul { list-style: disc; }
/* 두번째 계층 */
ul ul { list-style: circle; }
/* 세번째 계층 */ ul ul ul { list-style: square; }

불릿 CSS 구조 예시

다음 불릿 예시를 보고 어떻게 코드가 작성되는지, 다시 한번 익혀봅시다.

1단

1단 불릿 CSS 코드1단 불릿 CSS 표현

첫번째 계층입니다.  디스크(disc)로 표현하였습니다.

ul { list-style: disc; }

첫번째 계층이 디스크(disc)로 표현되었습니다.

  • 1단 불릿 CSS 표현 : disc

2단

2단 불릿 CSS 코드2단 불릿 CSS 표현

두번째 계층입니다. 원형(circle)으로 표현하였습니다.

ul ul { list-style: circle; }

두번째 계층이 원형(circle)으로 표현되었습니다.

  • 1단 불릿 CSS 표현
    • 2단 불릿 CSS 표현 : circle

3단

2단 불릿 CSS 코드2단 불릿 CSS 표현

세번째 계층입니다. 사각형(square)으로 표현하였습니다.

ul ul ul { list-style: square; }

세번째 계층이 사각형(square)으로 표현되었습니다.

  • 1단 불릿 CSS 표현
    • 2단 불릿 CSS 표현
      • 3단 불릿 CSS 표현 : square

이제 감이 좀 잡히시나요?

불릿 목록 스타일 종류

불릿 목록 기본적인 스타일은 아래와 같습니다. 참고로 이 외에도 몇 가지 더 있지만, 브라우저 호환문제로 구현되지 않을 수 있습니다.

ul (Un-ordered List) 스타일 종류

ullist-style-type 종류는 일반적으로 다음 3가지가 사용됩니다.

  • 디스크(disc) 형태
  • 원형(circle) 형태
  • square 형태

ol (Ordered List) 스타일 종류

ollist-style-type 종류는 일반적으로 다음 5가지가 사용됩니다.

  1. 숫자(decimal) 1, 2, 3, … 형태
  1. 영문 소문자(lower-alpha) a, b, c, … 형태
  1. 영문 대문자(upper-alpha) A, B, C, … 형태
  1. 로마자 소문자(lower-roman) i, ii, iii, … 형태
  1. 로마자 대문자(upper-roman) I, II, III, …형태

이미지 형식의 불릿 스타일 설정

기본 불릿 목록 이외에 이미지 형식을 사용하고 싶을때 list-style-type 대신, list-stype-image을 사용하여 다음과 같이 작성하면 됩니다. 그리고 속성 값으로 해당 이미지의 주소(url)을 적어주면 됩니다.

ul {
  list-stype-image : url('../bullet.png');
}

#주석
  1. 워드프레스 : 불릿(Bullet) 모양 변경하는 법[본문으로 ↩]
  2. 이 외에도 dl 요소도 있지만 글작성 에디터에는 보이지 않아, 제외하였습니다. 혹씨 제가 모르는 지나쳤을 수도 있습니다. 아시는 분은 댓글 달아주세요.[본문으로 ↩]

댓글 남기기

Previous

워드프레스 : 불릿(Bullet) 모양 변경하는 법 1. 기초(CSS변경)

맥 화면 그림자 없이 캡처하는 방법 2가지

Next