CSS | ol 리스트 태그 꾸미기

가독성이 뛰어난 동그라미 번호 목록 스타일 예시입니다. 줄바꿈을 해야할 만큼 긴 문장의 목록 또는 눈에 띄는 목록을 만들 때 사용하면 좋아요!

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

동그라미 번호 목록 스타일

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

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

블로그스팟에 적용:

1. 아래 CSS 코드를 복사하여 테마 - 맞춤설정 - 고급 - CSS 추가로 이동하여 코드를 붙여넣고 저장합니다.
   또는 테마 - HTML 편집 모드에서 ]]></b:skin</li> 앞에 붙여넣고 저장합니다. ↓

/* 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으로 바꾸면 됩니다.

---