CSS 11 의사요소

특정 부분만 스타일하기 [의사 요소 ]

의사요소 (pseudo-elements )는 선택자에 추가하는 키워드로 , 이를 이용하면 선택한 요소의 특정한 부분에 대한 스타일을 정의할 수 있다.

선택자::의사요소 {속성명: 속성값;}
li 요소 첫 번째 글자만 크기를 20px로 하겠다.

li::first-letter {font-size:20px;}

의사요소

after: 요소의 앞에 의사 요소를 생성 및 추가한다.

before 요소의 뒤에서 의사요소를 생성 및 추가한다.

first-time 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다.

marker 목록 기호의 스타일을 적용한다.

placeholder 입력 요소의 플레이스 홀더 스타일을 적용한다.

p:first-line. first-letter

 

 

Pseudo-elements - CSS: Cascading Style Sheets | MDN

참고 

실습

---

내용정리

• 의사요소는 선택자에 추가하는 키워드이다.
• 의사요소는 요소의 특정 부분에만 스타일을 적용하고자 할 때 사용한다.
• HTML문서가 포함하지 않는 개체 (목록 구분점, 플레이스 홀더)를 선택할 수 있어 무척 유용하다.