이전에 발행했던 글인데 블로그 스킨에 스타일을 적용했던것을 지금은 현재 글에만 적용을 하였습니다.

그래서 다시 발행합니다.


티스토리 본문에서 보여지는 목록 형식을 말합니다.

티스토리에서는 글쓰기 편집창 상단에 보여지는 목록 형식이 있지요.




스킨마다 스타일을 어떻게 적용하느냐에 따라서 보여지는것이 다른데요. 

적당한것이 없나 살펴보다 좋은 글이 있어 알려드립니다.

원본 글 -> http://www.red-team-design.com/css3-ordered-list-styles

데모 -> http://www.red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html


이걸 티스토리에서 사용하도록 수정하였고, 특히 에드센스 스킨에 포함하려고 수정되었습니다.

일단 어떻게 되어있나 코드를 참고하시기 바랍니다.


index.html


style.css



원본 글은 li 안에 a 에 있어야 정상적으로 보이는데요....


티스토리에서 작성하다보면 꼭 li 안에 a 가 없을 경우도 있습니다.

그래서 스타일마다 두가지 경우가 필요했습니다.

상황에 맞게 수정하였지요.

어떤식으로 보여지는지는 아래 리스트를 보시면 알겁니다. 에드센스 스킨에 포함하려고 적용하였습니다.







아래는 위의 스샷과 차이점이 있는지 한번 보세요.  직접 코딩한겁니다.

티스토리 본문에서 사용할 수 있도록 li 에도 스타일을 추가해 봤습니다.


li 안에 a가 없은 리스트

  1. li 안에 a가 없은 리스트
  2. li 안에 a가 없은 리스트
  3. li 안에 a가 없은 리스트



li 안에 a가 있는 리스트

  1. li 안에 a가 없은 리스트
  2. li 안에 a가 없은 리스트
  3. li 안에 a가 없은 리스트



동그라미 리스트 형태

  1. li 안에 a가 있는 리스트
  2. li 안에 a가 있는 리스트
  3. li 안에 a가 있는 리스트
    1. List sub item
    2. List sub item
    3. List sub item
  4. li 안에 a가 있는 리스트
  5. li 안에 a가 있는 리스트



네모 리스트 형태.

  1. li 안에 a가 있는 리스트
  2. li 안에 a가 있는 리스트
  3. li 안에 a가 있는 리스트
    1. List sub item
    2. List sub item
    3. List sub item
  4. li 안에 a가 있는 리스트
  5. li 안에 a가 있는 리스트



동그라미 트랜지션 형태

  1. Lorem ipsum dolor sit amet

    Morbi sagittis sapien ac magna egestas dictum.

  2. Lorem ipsum dolor sit amet

    Morbi sagittis sapien ac magna egestas dictum.

  3. Lorem ipsum dolor sit amet

    Morbi sagittis sapien ac magna egestas dictum.