CSS 텍스트 첫글, 첫줄 강조하기

블로그나 사이트를 운영하면서 제목이나 본문의 첫 글자 또는 첫 줄에 별도의 속성을 부여하여 강조나 디자인적인 효과를 낼 수 있는데요. 웹문서를 작성하면서 해당 문서의 글 색상, 크기 등의 설정을 변경하여 문서 특성을 살릴 수도 있지만 CSS 적용하여 일괄적으로 효과 적용이 가능합니다.

:first-line { 속성값 }

글 중에서 첫 글에 별도로 속성을 부여할 수 있습니다.

<div class="article"> [##_article_rep_desc_##] </div>

티스토리의 경우 본문 첫 글자를 강조한 싶으면 스킨마다 다르지만 [##_article_rep_desc_##] 본문 내용 치환자를 감싸는 태그 클래스가 article일 경우 CSS에 .article:first-line { 속성값 }을 적용하여 첫 글을 강조할 수 있습니다.

<div class="article">첫글 강조하기</div>

<style> .article:first-letter { font-size:20px; color:#f40; } </style>

보통 제목이나 본문 첫 글에 강조를 위한 폰트 크기와 색상을 변경하는 방식으로 많이들 적용합니다. 개인적으로는 사이드바 모듈 제목에 적용하고 있고요. HTML에 적용할 경우에는 <style> 태그가 필요하지만 CSS 문서에 입력할 경우 <style> 태그를 제거한 .article:first-letter { font-size:20px; color:#f40; } 만으로 폰트를 20px로 키우고 빨간색으로 적용합니다.

<div class="article">
<p>첫줄 강조하기</p>
<p>두번째 줄</p>
<p>세번째 줄</p>
</div>

<style> .article:first-line { font-size:20px; color:#f40; } </style>

라인 속성은 :first-letter에 비해 사용 빈도는 낮은 것 같지만 본문에 여러 라인 중에서 첫 번째 라인에 개별 속성을 적용하여 강조하는 게 가능합니다.