HTML과 CSS로 원 안에 숫자가 들어간 번호 목록 만들기 (이미지 없이)

아래와 같이 JPG나 PNG 같은 이미지 형식 없이도 순서 목록(<ol>)의 숫자를 원으로 감쌀 수 있어, 개발 시간과 사이트 로딩 시간을 줄일 수 있습니다.

데모: 결과 화면

CSS

아래 코드를 복사해 CSS 파일에 붙여 넣으세요.

ol {
    counter-reset: item;
    margin: 0;
    padding-left: 0;
}
ol > li {
    counter-increment: item;
    list-style: none inside;
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol > li:before {
    content: counter(item);
    margin-right: 20px;
    padding: 8px;
    display: block;
    box-sizing: content-box;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center;
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    line-height: 65px;
    float: left;
}

HTML

아래 코드를 복사해 HTML 문서에 붙여 넣으세요.

<ol>
    <li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>
    <li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum.</li>
    <li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>
    <li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>
    <li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>
</ol>

CSS와 HTML 코드를 모두 복사해 파일에 넣고 원하는 대로 수정해 보세요. 즐거운 코딩 되세요!

참고: 이 선택자는 페이지의 모든 순서 목록에 적용됩니다. 하나의 목록에만 적용하려면 그 목록에 클래스(예: ol.circled)를 지정하고 각 선택자에 추가하세요. 숫자는 Lato 글꼴을 사용하며, Lato가 로드되지 않으면 Helvetica나 Arial로 대체됩니다.