css 가상요소(Pseudo-Element) :before :after사용법
:before
요소의 앞에 내용을 생성함
:after
요소의 뒤에 내용 생성.
: 와 ::의 차이
위의 두 가상 요소는 css2에 도입된 요소며, css3에서는 ::before ::after라고 쓴다.
:와 :: 브라우저 지원
:after
ie8+, ff, chrome, opera+, safari4.0+
::after
ie9+, ff 1.5(1.8)+, chrome, opera7+, safari4.0+'
가상 클래스
CSS pseudo-class 는 선택될 요소(element)의 특별한 상태를 지정하는 선택자(selector)에 추가된 키워드입니다. 예를 들어 :hover는 사용자가 선택자에 의해 지정된 요소 위를 맴돌(hover) 때 스타일을 적용합니다.
가상 클래스(pseudo-class)는, 가상 요소(pseudo-elements)와 함께, 문서 트리의 콘텐츠 뿐만 아니라, 탐색기 히스토리 (가령, :visited), 콘텐츠 상태(일부 폼 요소의 :checked 같은) 혹은 마우스 위치 (마우스가 요소 위인지 알 수 있는 :hover 같이)처럼 외부 요인(factor) 관련 요소에 스타일을 적용할 수 있습니다.
:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
가상요소
가상 클래스(pseudo-classes)처럼, 가상 요소(pseudo-element)는 선택자(selector)에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일할 수 있습니다. 예를 들어, ::first-line 가상 요소는 선택자에 의해 지정된 요소의 첫 줄만을 대상으로 합니다.
::after
::before
::first-letter
::first-line
::selection
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
:before
:after
가상선택자는 꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때, 태그 대신에 가상으로 처리해 주는 쓸모 많은 css 기능입니다. 만일 html 구조에서 필요한 내용이라면 가상선택자로 만들면 안되겠죠~
어떤 사항일 때 css 가상선택자를 사용하나요?
의미없는 태그를 쓰지 않도록 도와줌, 태그 최소화.
목록형 꾸밈
버튼 꾸밈
간단한 아이콘 만들기(닫기버튼, 화살표 등) ** 도형을 만들 때 주의할 점: 보여지는 픽셀두께가 세밀하지 않기 때문에 비주얼적으로 중요한 아이콘이면 이미지를 쓰는 것을 추천
이미지 아이콘을 넣고 싶을 때
꾸밈 한글을 넣고 싶을 때 (tag의 #, 또는 콤마 등)
.class-name:before {
content:'';
width:;
height:;
}:before 해당 태그의 앞에 놓여진다.
:after 해당 태그의 다음 위치에 놓여진다.
