[css1] ::first-letter 가상 요소

 

 

[css1] ::first-letter 가상 요소

 

::first-letter 가상요소는, 요소의 첫번째 문자를 선택하는 선택자 입니다.

 

(그 줄에 이미지나 inline table처럼 다른 내용이 앞에 없을 때)

 

 

::first-letter는 블록 요소에만 적용 가능합니다.

즉 display 값이  block, list-item, table-cell, table-caption, inline-block 일 때

 

 

▶ 함께 사용할 수 있는 속성

 

font 관련 속성

margin, padding, border 속성
color, background 속성 

text-decoration
text-transform
letter-spacing
word-spacing
line-height
float
clear
vertical-align (float:none일 때만)

 

 

▶ ::first-letter 브라우저 지원 정보

ie9+(5.5에서부터 일부 지원), chrome 1.0+, firefox 1.0+, safari 1.0+, opera 7.0+(3.5에서부터 일부 지원)

IE 5.5-8 와 Opera 4-6는 세미콜론 1개 :first-letter만 지원.

새로운 버전들은  세미콜론 2개를 지원함: ::first-letter

:가상 요소와 :: 가상 요소는 아래 글을 참조

  

 [css1] ::first-line 가상 요소

 

 

 

예제. p 문단 첫번째 문자를 초록색으로 굵게 표시하기

 

first-letter.htm

 

 

html

<p>Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. It was a picture of a boa constrictor in the act of swallowing an animal. Here is a copy of the drawing. </p> 

 

 <p>In the book it said: "Boa constrictors swallow their prey whole, without chewing it. After that they are not able to move, and they sleep through the six months that they need for digestion." </p> 

 

 

 

css

p { line-height: 1.2 }
p::first-letter { font-size: 3em; font-weight: bold;color:green;}

 

 

 

▶ 실행화면

 

줄간격을 1.2배로 설정하고, p요소의 첫번째 문자는 글꼴 크기 3em에 굵기를 진하게 했으면, 초록색으로 표시함.

 

그런데, 바로 다음 줄과의 줄 간격이 다른 줄에 비해 더 벌어집니다.

 

float:left 하면 줄간격이 동일하게 나옵니다.

 

p::first-letter { font-size: 3em; font-weight: bold;color:green;float:left;}

 

 

 

★요소에 ::before, ::after content가 있다면,  content의 첫번째 문자가 적용 됨. 

  

예)

 

html

<div>지구별 안내서 오픈캐스트 구독하기</div>

 

  

 

css

div:before{content: "주의!";} 

div:first-letter{font-size:2em;}

 

 

▶ 실행화면 

 

 

★요소가 목록이라면(display:list-item)

::first-leftter는 머리 기호 바로 뒤에 첫번째 문자에 적용 함  

 

 

▶ 실행화면

 

 

 

[html/css] line-height 속성 배우기

 

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)