7-9. CSS 선택자 : 가상 요소(태그) 선택자(::before / ::after / ::first-line / ::fist-letter)

7-9. CSS 선택자 : 가상 요소(태그) 선택자

 

 가. 정의

 

   - 현재 HTML 문서 내에 존재하지 않는 구조 요소에 내용을 추가하거나, 스타일을 부여하는 것

   - 가상 class처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있음

   - 스타일 규칙이 적용될 선택자를 작성하고, 그 다음 가상 선택자 앞에 더블콜론( :: ) 기호를 넣음

     ex) p::before{...} 

  

 나. 가상 요소(태그)의 종류

 

  ■ ::before : 선택자가 지정한 요소 내용의 가장 "앞"에 요소를 삽입

                      : 애초에 내용 없이 생성되는 가상요소이므로, content 속성을 이용하여 내용입력 필수 

 

  ■ ::after : 선택자가 지정한 요소 내용의 가장 "뒤"에 요소를 삽입

                  : 애초에 내용 없이 생성되는 가상요소이므로, content 속성을 이용하여 내용입력 필수

 

  ■ ::first-letter : 선택자가 지정한 블록 레벨 요소 내용의 첫 번째 문자

 

  ■ ::first-line : 선택자가 지정한 요소 내용의 첫 번째 줄에 있는 텍스트

 

 다. 예시

 

[CSS]     1  p::before{content : "내용1 ";}   2  p::after{content : "내용2 ";} --------------------------------------------------------------------------------------------------------------------------------   3  p::first-letter{...}   4  p::first-line{...}

 

[HTML]   1  <p>가나다라마바사아자차카타파하</p>

↓

[실제 HTML 코드에는 이렇게 안보이지만, 내부에서 이와 같이 요소가 생성됨을 인지할 것]   1  <p>   2      <before>내용1</before>   3       가나다라마바사아자차카타파하   4      <after>내용2</after>   5  </p> --------------------------------------------------------------------------------------------------------------------------------   1  <p>   2      <first-letter>가</first-letter>나다라마바사아자차카타파하   3  </p>   4  <p>   5      <first-line>가나다라마바사아자차카타파하</first-line>   6  </p>