skip navigation

블릿리스트

  • - 블릿 기호는 background 로 작업하여 padding으로 들여쓰기 하는 것으로 기본으로 한다.

  • - 디바이스마다 text-indent 의 간격을 다르게 랜더링 하는 문제가 있어서 text-indent 로 들여쓰는 방법은 사용하지 않는다.

  • - 단, 약관과 같은 예외적인 케이스에서만 text-indent 로 들여쓰기도 가능하다.

예제1

[VIEW]
  • 예제 1 테스트입니다. 예제 1 테스트입니다.
    예제 1 테스트입니다. 예제 1 테스트입니다.
  • 예제 1 테스트입니다. 예제 1 테스트입니다.
    예제 1 테스트입니다. 예제 1 테스트입니다.
  • 주의사항 : 예제 1 테스트입니다. 예제 1 테스트입니다.(알림 문구 테스트)
    예제 1 테스트입니다. 예제 1 테스트입니다.
  • 주의사항 : 예제 1 테스트입니다. 예제 1 테스트입니다.(알림 문구 테스트)
    예제 1 테스트입니다. 예제 1 테스트입니다.
  • 예제 1 테스트입니다. 예제 1 테스트입니다.
    예제 1 테스트입니다. 예제 1 테스트입니다.
  • 예제 1 테스트입니다. 예제 1 테스트입니다.
    예제 1 테스트입니다. 예제 1 테스트입니다.
[CODE]
[예제 1] (CSS) .bul_list01_bk li{padding:0 0 4px 12px; background:url('../images/sp_bullet.png') no-repeat -120px 6px; line-height:24px;} (Html) <ul class="bul_list01_bk"> <li>예제 1 테스트입니다. 예제 1 테스트입니다.</li> </ul>

예제2

[VIEW]
  • 예제 2 테스트입니다. 예제 2 테스트입니다.
    예제 2 테스트입니다. 예제 2 테스트입니다.
  • 예제 2 테스트입니다. 예제 2 테스트입니다.
    예제 2 테스트입니다. 예제 2 테스트입니다.
  • 주의사항 : 예제 2 테스트입니다. 예제 2 테스트입니다.(알림 문구 테스트)
    예제 2 테스트입니다. 예제 2 테스트입니다.
  • 주의사항 : 예제 2 테스트입니다. 예제 2 테스트입니다.(알림 문구 테스트)
    예제 2 테스트입니다. 예제 2 테스트입니다.
  • 예제 2 테스트입니다. 예제 2 테스트입니다.
    예제 2 테스트입니다. 예제 2 테스트입니다.
  • 예제 2 테스트입니다. 예제 2 테스트입니다.
    예제 2 테스트입니다. 예제 2 테스트입니다.
[CODE]
[예제 2] (CSS) li.bul_list01_bk{padding:0 0 4px 12px; background:url('../images/sp_bullet.png') no-repeat -120px 6px; line-height:24px;} (Html) <ul> <li class="bul_list03_bk">예제 2 테스트입니다. 예제 2 테스트입니다.</li> <li class="bul_list03_rd">예제 2 테스트입니다. 예제 2 테스트입니다.</li> </ul>

예제3

[VIEW]

예제 3 테스트입니다. 예제 3 테스트입니다.
예제 3 테스트입니다. 예제 3 테스트입니다.

예제 3 테스트입니다. 예제 3 테스트입니다.
예제 3 테스트입니다. 예제 3 테스트입니다.

주의사항 : 예제 3 테스트입니다. 예제 3 테스트입니다.(알림 문구 테스트)
예제 3 테스트입니다. 예제 3 테스트입니다.

주의사항 : 예제 3 테스트입니다. 예제 3 테스트입니다.(알림 문구 테스트)
예제 3 테스트입니다. 예제 3 테스트입니다.

예제 3 테스트입니다. 예제 3 테스트입니다.
예제 3 테스트입니다. 예제 3 테스트입니다.

예제 3 테스트입니다. 예제 3 테스트입니다.
예제 3 테스트입니다. 예제 3 테스트입니다.

[CODE]
[예제 3] (CSS) p.bul_list01_bk, div.bul_list01_bk{padding:0 0 4px 12px; background:url('../images/sp_bullet.png') no-repeat -120px 6px; line-height:24px;} (Html) <p class="bul_list01_bk">예제 3 테스트입니다. 예제 3 테스트입니다.</p> <p class="bul_list02_rd"><span class="hide">주의사항 : </span>예제 3 테스트입니다. 예제 3 테스트입니다.(알림 문구 테스트)</p>

약관과 같은 예외 case

  • - 이 케이스에서만 예외로 text-indent 로 들여쓰기 가능하며 그 외에서는 사용하지 않는다.

[VIEW]
  • - 테스트입니다. 테스트입니다.
    테스트입니다. 테스트입니다.
[CODE]
[text-indent 사용 예제] <ul class="bul_list_etc"> <li>- 테스트입니다. 테스트입니다.</li> </ul>

[Tip] : 이미지 스프라이트 시 블릿 기호 배치 추천 방법

  • - 아래와 같이 블릿 기호를 배치하면 블릿 기호를 감싸는 span 이나 CSS에서 :before와 :after를 사용하지 않고도
    단독 블릿 기호 이미지 이용해 표현했을 때처럼 문장의 열과 행 수가 늘어날 경우를 고려하지 않아도 된다.