본문 바로가기

가상요소선택자2

가상요소 선택자 ::before, ::after 가상 요소란 선택자 (Pseudo-elements) 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용한다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 그 중 가장 대표적인 ::before 와 ::after 의 사용 예시에 대해서 알아보자 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. import React from "react"; import './App.css'; function App() { return ( Hello Hello ); } export.. 2022. 12. 10.

[날마다 3분 CSS] 가상요소 선택자 ::before ::after 가상 요소 선택자(가상 클래스 선택자) ::before, ::after 특징 가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다. 이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다. 내용의 앞( ::before )과 뒤( ::after )에 콘텐츠를 추가한다 content라는 속성이 없더라도 추가하고 봐야한다, 없으면 동작하지 않음 특정 요소의 앞(::before)이나 뒤(::after)에 지정한 내용(텍스트 또는 이미지)을 추가할 수 있다. 인라인 요소이다. ( = 넓이/높이 값이 지정되지 않는다 ) content 속성 normal: 아무것도 표시하지 않는 기본값 string: 문자열 생성 image: 이미지나 비디오를 불러올 수 있으나 크기.. 2022. 10. 6.

이전 1 다음

티스토리툴바