리스트 불릿에 원문자 추가 | Add text to list bullets

리스트는 웹페이지의 문단을 일목요연하게 편집하는 중요한 html 요소입니다. 적절한 리스트의 활용은 가독성을 높여 구독자의 흥미 유발을 도모할 수 있습니다. 리스트 활용에 금상첨화가 되는 문자 추가 방법을 소개합니다. 아래 보기처럼 스타일(CSS)를 지정하면 불릿 (글 머리 기호)에 <step>이나 <단계>와 같은 글자를 추가할 수 있어 금상첨화가 됩니다.

보기1

<style>
ol{
  list-style-type: none;
  counter-reset: textcounter;
  padding-left: 55px;
}
li:before {
  content: "가을 " counter(textcounter) ". ";
  counter-increment:textcounter;
  font-weight: bold;
  margin-left:-55px;
}
 </style>

1. 햇살이 부드러워 진다.
2. 나뭇잎에 단풍이 든다.
3. 바람이 차갑게 많이 분다.
4. 낙옆이 진다.

보기2

고유한 <class>나 <id>를 지정하면 모양이 다른 무한대의 리스트를 나타낼 수 있다.

<ol id="test">
  <li class="test">연필로 연하게 스케치한다.</li>
  <li class="test">묽은 물감으로 옅게 초벌을 칠한다.</li>
  <li class="test">명암을 파악해서 재벌을 칠한다.</li>
  <li class="test">세부적으로 채색하여 마무리한다.</li>
</ol>

<style>
#test{
  list-style-type: none;
  counter-reset: textcounter;
  padding-left: 55px;
}
.test:before {
  content: "step " counter(textcounter) ". ";
  counter-increment:textcounter;
  font-weight: bold;
  color:green;
  margin-left:-55px;
}
 </style>

1. 연필로 연하게 스케치한다.
2. 묽은 물감으로 옅게 초벌을 칠한다.
3. 명암을 파악해서 재벌을 칠한다.
4. 세부적으로 채색하여 마무리한다.

의 관련글