가상요소2 [ HTML / CSS ] ::after, ::before 사용해보기 안녕하세요 오늘은 css 의 가상요소(pseudo-element)인 ::after 과 ::before 에 대해 알아보겠습니다. CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(pseudo-element)라고 합니다. 그리고 ::after, ::before 는 내용의 앞과 뒤에 컨텐츠를 추가할 때 사용하면 유용한 가상요소입니다. 이 컨텐츠는 content 라는 속성에서 정의할 수 있습니다. 바로 예제로 넘어가겠습니다... 2022. 11. 2. [HTML / CSS] 가상요소, 가상 클래스를 이용해서 아코디언 메뉴바 제작하기 스틱코드라는 플러그인과 CSS가상요소를 이용해 아코디언 메뉴바를 구현해봅시다. 스틱 코드에 등록된 코드를 간편하게 불러와서 사용해봅시다. * 가상요소를 이용해서 아코디언 메뉴바 제작하기 https://stickode.com/detail.html?no=2216 스틱코드 stickode.com ==================================================================== 가상요소, 가상 클래스란? 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다 예를 들면 어떠한 요소 위에 마우스 포커스가 맞춰졌을 때, 클릭했을 때 등이 있습니다. p::first-line { color: blue; text-transform: uppercase; }.. 2021. 7. 18. 이전 1 다음
