숫자 목록 꾸미기 썸네일

<ol> 태그는 <li> 태그와 함께 사용되며 순서가 있는 목록을 만드는 데 사용됩니다. 목차 앞에 숫자, 로마숫자 대문자, 로마숫자 소문자, 알파벳 대문자, 소문자를 표시할 수 있습니다. 이 글에서는 제가 쓰려고 만든 동그라미 번호 목록 스타일을 공유합니다.

동그라미 번호 목록 스타일

노란 배경 색상이 있는 동그라미 번호 목록 스타일입니다. 줄바꿈을 해야할 만큼 긴 문장의 목록 또는 눈에 띄는 목록을 만들 때 사용하면 좋아요!

예시:
이 글에서 사용한 리스트 스타일을 참고해주세요!

블로그스팟에 적용:

  1. 아래 CSS 코드를 복사하여 테마 - 맞춤설정 - 고급 - CSS 추가로 이동하여 코드를 붙여넣고 저장합니다.
    또는 테마 - HTML 편집 모드에서 ]]></b:skin> 앞에 붙여넣고 저장합니다. ↓
/* ComicOl Style - https://ottzid.com */
ol.comicOl {
    position: relative;
    counter-reset: ott-counter;
    padding-left: 0;
    list-style: none;
}
ol.comicOl li {
    position: relative;
    counter-increment: ott-counter;
    padding-left: 2rem;
}
ol.comicOl li::before {
    position: absolute;
    content: counter(ott-counter);
    top: 0.1875rem;
    left: 0;
    width: 1.4em;
    height: 1.4em;
    color: #000;
    line-height: 1.1em;
    font-weight: 700;
    border: 0.15em solid #000;
    border-radius: 50%;
    background-color: #ffea64;
    text-align: center;
}
  1. 게시물 편집기에서 제목의 왼쪽 하단에 있는 아이콘을 클릭합니다.
  2. ' HTML 보기'를 선택하고 아래 html 코드와 같이 작성합니다. ↓ 
<ol class="comicOl">
  <li>여기에 글을 작성합니다.</li>
</ol>

티스토리에 적용:

<style>/*<![CDATA[*//* ComicOl Style - https://ottzid.com */
ol.comicOl {
    position: relative;
    counter-reset: ott-counter;
    padding-left: 0;
    list-style: none;
}
ol.comicOl li {
    position: relative;
    counter-increment: ott-counter;
    padding-left: 2rem;
}
ol.comicOl li::before {
    position: absolute;
    content: counter(ott-counter);
    top: 0.1875rem;
    left: 0;
    width: 1.4em;
    height: 1.4em;
    color: #000;
    line-height: 1.1em;
    font-weight: 700;
    border: 0.15em solid #000;
    border-radius: 50%;
    background-color: #ffea64;
    text-align: center;
}
/*]]>*/</style>
  1. 블로그관리홈 - 서식 - 서식쓰기 기본 모드에서 HTML 블록을 열어 위 CSS 코드를 복사하여 붙여넣습니다.
  2. 서식 에디터 HTML 모드에서 위 html 코드를 복사 붙여넣고 서식을 저장합니다.
  3. 저장된 서식을 글쓰기 에디터에서 불러오기하여 사용합니다.

제 블로그의 테마에 맞춰져 있으므로 자신의 테마나 스킨에 맞게 약간의 조정이 필요할 수 있습니다. 간격, 테두리 두께 등 위 CSS 코드의 속성값를 조정해보세요.

이어지는 리스트 번호 사용 방법

리스트 사이에 이미지나 표를 넣고 다음 목차를 만들면 다시 1부터 생성됩니다. 이 글에서도 리스트 사이에 코드 블록을 삽입했는데, 코드 블록 뒤에 이어지는 숫자를 붙이고 싶다면 다음과 같이 작성하면 됩니다.

<ol class="comicOl">
  <li style="counter-increment:ott-counter 2;">여기에 글을 작성합니다.</li>
</ol>

위와 같이 <li> 태그에 스타일 속성을 추가하여 번호를 연결할 수 있습니다. 3번부터 연결하려면 숫자를 3으로 바꾸면 됩니다.