[css ] 가상요소 :before :after

css 가상요소(Pseudo-Element) :before :after사용법

 

 

*** 들어가기 전에***

가상선택자, 가상클래스, 가상요소??

 

가상클래스

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 구조에서 필요한 내용이라면 가상선택자로 만들면 안되겠죠~

1. 어떤 사항일 때 css 가상선택자를 사용하나요?

의미없는 태그를 쓰지 않도록 도와줌, 태그 최소화.

• 목록형 꾸밈
• 버튼 꾸밈
• 간단한 아이콘 만들기(닫기버튼, 화살표 등)  ** 도형을 만들 때 주의할 점: 보여지는 픽셀두께가 세밀하지 않기 때문에 비주얼적으로 중요한 아이콘이면 이미지를 쓰는 것을 추천
• 이미지 아이콘을 넣고 싶을 때
• 꾸밈 한글을 넣고 싶을 때 (tag의 #, 또는 콤마 등)

.class-name:before {
	content:'';
	width:;
	height:;
	
}

:before 해당 태그의 앞에 놓여진다.
:after 해당 태그의 다음 위치에 놓여진다.

content:'' : 가상선택자에 필수로 들어가는 요소. 작음따음표'' 안에는 텍스트 내용을 넣고, 없으면 작은따음표만 넣기
가상선택자는 부피가 없으므로, 아이콘을 표현할 땐 꼭 너비와 높이를 정해주어야 한다. transform을 쓸 때는 블럭요소(display:block 또는 display:inline-block)가 되어야 적용가능하다.

:before 와 ::before의 차이

차이는 없다. 오히여 더블콜론(::)::before을 쓴다면 ie8 이하 버전은 적용이 되지 않기 때문에 클론 하나만(:):before 쓰는 것이 좋다고 볼 수 있다.
css2에서는 콜론이 하나였다가, css3에는 더블클론으로 바뀌었다.

가상선택자 적용이 안되는 경우

1. 폼(form, input...) 태그와 이미지 태그(img)는 가상선택자가 적용되지 않는다.(이 부분은 지금까지도 몰랐던 사실.. 예시를 만들면서 알게됨)
   가상선택자 이슈
2. ie7 이하버전은 지원하지 않는다.
3. ie8 이하버전은 더블콜론(::)이 적용되지 않음

 

 

 

출처: https://green-webdesigner.tistory.com/20