티스토리 서식으로 사용할만한 목록 서식

게시자: 대문 demun 카테고리: 퍼블리셔/css 2013.07.18 23:40

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

그래서 다시 발행합니다.


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

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




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

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

원본 글 -> 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.



tag ,

댓글

  1. 2013.05.11 17:43 신고 BlogIcon 백전백승  댓글주소  수정/삭제  댓글쓰기

    이것 어느곳에 활용하면 아주 좋을 것 같은데 어디에 사용해야 할 지 생각이 안 나네요. 제가 리스트는 transitions를 사용해서요. 기가막힌 효과인데 어디엔가 사용해야 하는데.....좋은 효과를 소개해 주셔서 감사합니다. 아직 소스를 안 봤는데 CSS3의 무슨 속성을 사용했나요?

    • BlogIcon 대문 demun 2013.05.11 20:39 신고  댓글주소  수정/삭제

      속성의전부를 부르는 all 을 씁니다.
      대부분이 color 와 background 가 대부분이고 맨 마지막것은 transform 을 써서 크기를 키웁니다.

  2. 2013.05.13 21:51 신고 BlogIcon 이바구™  댓글주소  수정/삭제  댓글쓰기

    저것 때문인지 접속속도가 엄청 느린 것 같네요.