CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법
순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } </style> </head> <body> <ol> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol> </body> </html>
li에 font-weight 속성을 추가하여 글자를 굵게 만들면 숫자와 내용에 모두 적용됩니다.
li { font-weight: bold; }
만약 숫자만 굵게 만들고 싶다면 내용을 span 태그로 감싸고 굵기를 조절합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } li { font-weight: bold; } li span { font-weight: normal; } </style> </head> <body> <ol> <li><span>Lorem</span></li> <li><span>Ipsum</span></li> <li><span>Dolor</span></li> </ol> </body> </html>
만약 내용을 데이터베이스에서 불러오는 등 마크업을 변경할 수 없다면 jQuery의 contents()와 wrap()을 이용하여 span 태그를 추가합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'li' ).contents().wrap( '<span></span>' ); } ); </script> <style> body { font-size: 40px; } li { font-weight: bold; } li span { font-weight: normal; } </style> </head> <body> <ol> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol> </body> </html>