코딩 공부
비전공자를 위한 HTML/CSS-가상 선택자 2
뉴 데이
2022. 5. 3. 18:15
가상 요소(pseudo element)
가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다.
가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다.
선언 방법은 가상 클래스와 같게 콜론을 사용하며,
CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용하셔야 합니다.
::pseudo-element {
property: value;
}
강의에서는 가상 클래스와 마찬가지로 기본적인 가상 요소만 설명해 드리고 마치도록 하겠습니다.
다른 가상 요소들에 대한 자세한 내용은 아래 링크를 참고해주세요.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
- :before : 가장 앞에 요소를 삽입
- :after : 가장 뒤에 요소를 삽입
- :first-line : 요소의 첫 번째 줄에 있는 텍스트
- :first-letter : 블록 레벨 요소의 첫 번째 문자
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }
before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 합니다.
실제 HTML 코드에는 나타나지 않지만, before와 after가 어떻게 동작하는지 이해를 돕기 위해 코드를 아래와 같이 변경했습니다.
<p>
<before>###</before>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<after>!!!</after>
</p>눈에 보이지 않지만, 내부에서 이처럼 요소가 생성됩니다.
first-line과 first-letter도 마찬가지로 아래 코드와 같은 것으로 생각하시면 됩니다.
<p>
<first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
<first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>
생각해보기
- 6개의 강의에 걸쳐 선택자에 대해서 알아보았습니다. 강의에서 다룬 선택자외에도 수많은 선택자들이 존재합니다.
예를들면 first-line, nth-child 등 과 같이 순서와 관련된 선택자들이 있습니다.
또 그 선택자들마다 지원 브라우저 범위가 제각각이기 때문에 잘 확인하고 사용해야합니다. - https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048
참고자료
content
The content CSS property is used to replace an element with a generated value. Objects inserted using the content property are anonymous replaced elements.
CSS Content Property
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.