순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

순서 있는 목록의 숫자만 굵게 만들려면 li::marker에 font-weight: 700을 지정합니다. 내용만 굵게 만들 때는 li를 굵게 하고 ::marker의 굵기를 보통으로 되돌리면 됩니다. 숫자는 직접 입력하지 않고 ol·li의 기본 번호를 유지하므로 시작 번호와 자동 순서도 그대로 사용할 수 있습니다.

숫자와 본문은 서로 다른 부분입니다

ol은 순서 있는 목록이고 각 li 앞의 번호는 목록 표식(Marker)입니다. li에 font-weight를 지정하면 표식도 그 굵기를 따를 수 있습니다. ::marker는 이 표식 상자를 선택하는 가상 요소이므로 숫자 부분과 목록 내용의 글꼴 스타일을 따로 지정할 수 있습니다.

/* 숫자만 굵게 */
.numbers > li { font-weight: 400; }
.numbers > li::marker { font-weight: 700; }

/* 내용만 굵게 */
.content > li { font-weight: 700; }
.content > li::marker { font-weight: 400; }

클래스는 각각 대상 ol에 붙입니다. > li는 해당 목록의 직접 항목만 선택하므로 중첩 목록까지 같은 규칙을 무조건 적용하는 일을 줄일 수 있습니다. ::marker가 지원하는 속성에는 제한이 있으며, font-weight처럼 글꼴 관련 속성은 사용할 수 있지만 일반 상자처럼 margin·padding으로 표식 간격을 조절하는 방식은 기대하면 안 됩니다. 지원 범위는 MDN ::marker 문서에서 확인할 수 있습니다.

전체 예제: 기본·숫자만·내용만·span 방식 비교

다음 코드를 list-weight.html로 저장하고 브라우저에서 엽니다. 외부 파일이나 JavaScript는 필요하지 않습니다. 네 목록 모두 start="9"로 시작해 한 자리와 두 자리 번호의 들여쓰기·줄바꿈을 함께 비교합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>목록 숫자와 본문의 굵기 분리</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .sample { max-width: 520px; padding: 12px; margin: 12px 0;
      border: 1px solid #9ab0bb; background: #f2f7f9; }
    .sample h2 { margin: 0 0 8px; font-size: 18px; }
    .sample ol { margin: 0; padding-inline-start: 2.6em; }
    .sample li { margin: 6px 0; }
    .numbers > li { font-weight: 400; }
    .numbers > li::marker { font-weight: 700; color: #176f80; }
    .content > li { font-weight: 700; }
    .content > li::marker { font-weight: 400; }
    .fallback > li { font-weight: 700; }
    .fallback > li > .text { font-weight: 400; }
  </style>
</head>
<body>
<h1>목록 굵기 비교</h1>
<section class="sample"><h2>기본 목록</h2><ol class="plain" start="9"><li>준비한 파일을 확인합니다. 긴 문장은 다음 줄에서도 같은 본문 시작 위치에 맞춰 이어집니다.</li><li>브라우저에서 결과를 비교합니다.</li></ol></section>
<section class="sample"><h2>숫자만 굵게: ::marker</h2><ol class="numbers" start="9"><li>준비한 파일을 확인합니다. 긴 문장은 다음 줄에서도 같은 본문 시작 위치에 맞춰 이어집니다.</li><li>브라우저에서 결과를 비교합니다.</li></ol></section>
<section class="sample"><h2>내용만 굵게: ::marker</h2><ol class="content" start="9"><li>준비한 파일을 확인합니다. 긴 문장은 다음 줄에서도 같은 본문 시작 위치에 맞춰 이어집니다.</li><li>브라우저에서 결과를 비교합니다.</li></ol></section>
<section class="sample"><h2>숫자만 굵게: span 방식</h2><ol class="fallback" start="9"><li><span class="text">준비한 파일을 확인합니다. 긴 문장은 다음 줄에서도 같은 본문 시작 위치에 맞춰 이어집니다.</span></li><li><span class="text">브라우저에서 결과를 비교합니다.</span></li></ol></section>
</body>
</html>

첫 목록은 숫자와 내용이 모두 보통 굵기입니다. 둘째는 숫자만 청록색 굵은 글씨, 셋째는 내용만 굵은 글씨입니다. 넷째는 뒤에서 설명할 span 방식으로 숫자만 굵게 표시합니다. 같은 문장을 사용했으므로 첫 항목처럼 여러 줄이 되는 내용에서 차이를 관찰하기 쉽습니다.

번호를 직접 문자열로 쓰지 않았으므로 첫 항목은 9, 다음은 10으로 표시됩니다. ol의 start를 1로 바꾸면 1·2로 돌아오고, 기본 번호를 유지한 채 목록 항목을 추가하면 다음 번호가 이어집니다. padding-inline-start는 표식이 들어갈 공간을 확보하며, list-style-position을 바꾸지 않은 이 예제에서는 다음 줄이 숫자가 아니라 본문 시작 위치에 맞춰집니다.

span으로 본문 굵기를 되돌리는 기존 방식

목록 표식의 스타일을 직접 지정하기 어려운 환경에서는 li 전체를 굵게 만든 뒤 본문만 감싼 span을 보통 굵기로 되돌리는 방법을 사용할 수 있습니다. 표식은 li의 굵기를 따르고 span 안의 글자는 지정한 굵기로 바뀝니다.

<ol class="fallback">
  <li><span class="text">첫 번째 내용</span></li>
  <li><span class="text">두 번째 내용</span></li>
</ol>

.fallback > li { font-weight: 700; }
.fallback > li > .text { font-weight: 400; }

이 방식은 본문 전체가 해당 span에 들어 있어야 합니다. 감싸지 않은 텍스트나 다른 요소는 li의 굵기를 받을 수 있으며, 중첩 목록이나 기존 강조 요소의 범위를 구분해야 합니다. 반대로 숫자는 보통이고 본문만 굵게 할 때는 li를 보통으로 두고 .text에 굵기를 지정할 수도 있습니다.

데이터베이스에서 가져온 내용이라도 최종 HTML의 li::marker를 선택할 수 있으면 숫자만 꾸미려고 마크업을 다시 감쌀 필요가 없습니다. 페이지 전체 li의 contents를 일괄 감싸는 JavaScript는 중첩 목록과 기존 요소 구조에 영향을 줄 수 있으므로, 단순한 굵기 분리만을 위해 라이브러리를 추가하는 것을 기본 방법으로 삼지 않는 편이 좋습니다.

숫자가 보이지 않거나 굵기가 같을 때

번호가 사라졌다면 list-style: none 또는 li의 display: flex·grid 같은 설정으로 기본 목록 표식이 없어졌는지 먼저 확인합니다. 그다음 해당 목록의 계산된 font-weight, 더 우선하는 ::marker 규칙, 실제 글꼴에 원하는 굵기가 있는지를 확인하세요. font-weight 값이 다르더라도 글꼴의 제공 굵기와 브라우저 합성 조건에 따라 보이는 차이는 달라질 수 있습니다.

모든 숫자를 굵게 꾸민다고 항목의 의미상 중요도가 자동으로 바뀌는 것은 아닙니다. 중요한 경고나 핵심 내용을 표시할 목적이라면 적절한 부분에 strong 같은 의미 요소를 사용하고, 단지 시각적인 굵기 조절이면 CSS로 표현하세요. strong은 내용의 중요성을 나타내는 요소입니다.

번호 자체를 content로 새로 만들거나 목록 표식을 지우는 방식은 시작 번호·역순·항목별 값과 접근성까지 따로 확인해야 합니다. 이 예제는 표식의 내용 대신 굵기만 바꿔 기본 번호 체계를 유지합니다. ol의 start·reversed 같은 기본 기능과 함께 사용할 때도 실제 대상 브라우저에서 표시와 읽기 순서를 확인하세요.

CSS