CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3

선택자(selectors) - 유사클래스(pseudo-class) Part3

:first-letter :first-line

텍스트의 첫글자 텍스트의 첫줄을 말한다. 흔히 책에서 첫글자나 첫줄을 강조할때를 생각하면된다.예제를 통해 자세히 보자

<p>The moment Alice appeared, she was appeal......</p> 
<p>The executioner's argument was, that you couldn't cut..</p> 
<p>The executioner's argument was, that you couldn't...</p> 

위와같은 세문장에서 첫번쩨 문단의 문자 T를 크게 하고 첫라인을강조하려한다. 첫번째 문단을 선택하기위해 :first-of-type 선택자를 사용했다.

 p {     /*기본설정*/
		font-size: 16px;
		line-height: 24px;
		color: #666; }

  /*첫문단의 첫번째글자 T를 꾸민다*/
	p:first-of-type:first-letter {
		color: red;
		font-size: 3em;
		float: left;
		margin-right: 5px; }	

 /*첫문단의 첫번째줄*/
	p:first-of-type:first-line {
		font-size: 1.25em;
		font-weight: bold;
		color: #000; 
}

:before :after

위의 내용은 이상한나라의 앨리스이다. 이번엔 :before :after 로 엘리먼트앞뒤를 꾸며보자. 이들은 이름과 같이 엘리먼트 앞뒤를 말하는데 그 공백을 의미한다

<h3>이상한 나라의 앨리스</h3>

css에서는 별도의 이미지를 사용했다.

h3:before {
	  	content: url(images/bullet-02.png);
	}
h3:after {
	       content: url(images/bullet-01.png);
	}	

직접확인해본바로는 여기선 우리가 흔히 쓰는 background로는 먹히지않았다. display: block; 과 크기지정을 해도마찬가지 아마공백처리되기에 그런듯하다. 대신 content를 사용한다 content에 대해서 차후에 설명

예제를 확인하려면 여기http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_03.html