:first-letter, :first-line

첫글자나 단락 첫 줄의 형식정의

CSS 에는 :first-letter 및 :first-line 가상 엘리먼트를 이용하여 단락의 일부분만을 형식정의 할수있다. 엄밀히 이 가상 엘리먼트는 CSS 프로퍼티가 아니라 CSS 프로퍼티가 적용되어야 할 곳이 단락의 어느부분인지 정해주는 선택자 종류이다. 가상 엘리먼트 :first-letter 를 사용하여, 손으로 쓴 원고처럼 흉내낸 대문자로 첫글자를 만들 수 있다. 각 단락의 첫글자를 빨간색 볼드체로 만들려면, 다음과 같이 작성하면 된다. p:first-letter{font-weight:bold;color:red;} 좀더 선택적으로 특정 단락의 첫 글자만 형식화 하려면, 단락에 .intro 와 같은 클래스 스타일을 적용하고 .intro:first-letter 와 같은 명칭으로 스타일을 작성한다

가상 엘리먼트 :first-line 은 단락의 맨 첫줄을 형식화한다. 제목(h2:first-line) 이나 단락(p:first-line) 등의 모든 텍스트 구간에 이것을 적용시킬수 있다. :first-letter 와 마찬가지로, 하나의 단락에만 클래스를 적용시킬수 있고, 그 단락의 첫줄에만 형식을 정의할수있다. 페이지 첫단락의 첫줄에 있는 모든 글자를 대문자로 만들려고 한다고 가정하자. 첫단락의 HTML에 <p class = "intro"> 와 같이 클래스를 적용하고나서 다음과 같이 스타일을 작성하면 된다. .intro:first-line{ text-transform:uppercase; }