::before, after 와 무한 스크롤 페이징

before after을 알기 전에 가상요소에 대해 알아야합니다.

 

가상요소란(Pseudo-Element)?(지금까니는 css 영역에서의 사용할 수 있는 것 같습니다)

- 별도의 클래스 지정 없이 css또는 javascript에서 특정 요소를 지정할 수 있느 가상 요소 선택자 입니다. 

 

before after을 제외한 주요 가상요소들입니다.

요소	소개
::first-line	해당 요소 텍스트 첫줄에 스타일 적용
::first-letter	요소의 첫번째 글자에 스타일 적용
::selection	텍스트에서 사용자에 의해 서택된 영역의 속성 변경
::placeholder	input 필드에 힌트 텍스트에 스타일 적용

 

#::before ::after

 

요소의 바로 앞과 뒤에 특정 CSS나 이벤트를  주고싶다면 BEFORE와 AFTER을 사용하시면 됩니다.

바로 앞 자식요소 삽입은 BEFORE(전에) : <P::before>   

바로 뒤 자식요소 삽입은 AFTER (후에)

 

before, after가 요소를 직접 html에 작성하지 않아도 삽입할 수 있게 도와주는 가상 요소 선택자라는 것을 익혔습니다.

 

어떤 것을 삽입할지에 대해서는 지금 우리는 아무것도 모릅니다.

 

이럴때 필요한 것이 content라는 속성입니다. 

 

content는 가짜 속성입니다.

 

content의 대표 속성들은

속성	사용
normal	아무것도 표시 x
string	문자열 생성
image	이미지나 비디오 파일, 크기조절x
counter	순서를 매길 수 있다. counter-increment, counter-reset 함께 사용
none	아무것도 표시 x
attr	해당 속성의 속성 값 표시

 

 

#무한 스크롤 페이징