의사요소 선택자 - fist-line, first-letter, before, after [Jquery, CSS]

공부/Jquery,CSS  2016.03.13 00:09

안녕하세요 명월입니다.


이번 포스트는 의사요소 선택자입니다. 형태는 의사클래스와 비슷한 형태인 콜론(:)으로 사용되는 선택자입니다.
의사요소 선택자는 저는 실제로 사용해 본 적은 없습니다만 디자인 고수분들 웹페이지를 보면 많이 사용하는 선택자인 듯싶습니다. 먼저 예제를 통해서 자세히 살펴보겠습니다.



다음은 CSS에 대한 의사 요소 선택자의 예제입니다.



위 예제에 대한 설명입니다.


먼저 first-line의 선택자는 보통 p, span, div 태그 등의 문자열의 태그에서 적용되는 선택자입니다.
문자열 중에서 첫 번째 열의 요소만 적용이 되는 즉, br태그를 만나기 전에 문자열만 적용되는 선택자입니다. 태그형식으로 선택되는 것이 아니라 문자열로 선택이 되는 것이 특이사항이네요.


두 번째 first-letter의 경우는 첫 번쨰 문자만 선택되는 것입니다. 저는 한 번도 사용하지 않았지만, 간혹 글씨를 이쁘게 사용하시는 블로그에서 본 적이 있는 형태의 선택자입니다.


그리고 before, after는 선택된 요소의 전후에 content의 값을 입력하는 선택자입니다.


의사 요소 선택자


지금까지 의사요소 선택자를 사용해 본 적이 없는데 잘 사용하면 블로그 글에 큰 효과를 줄 수 있는 선택자 같습니다. 요번 포스팅의 경우는 저도 공부가 된 포스트네요.


댓글 2개가 달렸습니다.
댓글쓰기
  1. SONYLOVE
    2016.03.13 00:16 신고 |  수정/삭제  댓글쓰기

    오호 글쓰기 할때도 활용해야겠는데요.
    유용한 정보 감사합니다. ^_^;

    • 明月 v명월v
      2016.03.13 02:29 신고 |  수정/삭제

      안녕하세요..SONYLOVE님..
      블로그 방문 자주 해 주셔서 감사합니다...
      저도 지금 스킨 만들고 있는데... 정말 많이 참조하고 있어요...ㅎㅎ