[TIL] CSS_텍스트 효과(타이핑 효과)

원리
h1 뒤쪽에 문장을 삽입한 것이 아닌 투명한 글자 위에 같은 텍스트로 다른 글자를 입힌 것

1. border-right 로 마우스 커서 효과를 주었음

2. white space

• white space : 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성
  default 값은 normal
  

white-space 속성	탭/스페이스	엔터(줄바꿈)
normal	띄어쓰기 1칸	줄바꿈
nowrap	띄어쓰기 1칸	줄바꿈 X
pre	탭/스페이스 입력한만큼 출력	줄바꿈 X
pre-wrap	탭/스페이스 입력한만큼 출력	줄바꿈
pre-line	띄어쓰기 1칸	줄바꿈

가상클래스 / 가상요소

• 가상클래스(pseudo-class) :
  • 여러 태그 중 원하는 태그를 선택하기 위해 사용하는 선택자
  • 별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있음
  • 자주사용하는 가상클래스
    • :hover :active :focus :visited
  • <참고> https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
    
    
    
• 가상요소(pseudo-element) :
  • 가상클래스처럼 선택자에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여해 문서의 특정 부분 선택이 가능
  • 내용의 일부만 선택해 스타일을 적용할 때 사용 (특정부분 스타일링)
  • 가상클래스와 구분하기 위해 콜론을 두개(::)붙여 표시
  • 자주사용하는 가상클래스
    • ::before ::after
  • <참고> https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

::before , ::after

• 내용의 앞(::before)과 뒤(::after)에 콘텐츠를 추가

animation과 @keyframe

@keyframe

애니메이션의 시작~종료까지 어떤 동작으로 실행할 건지 지정하는 css 문법

@keyframes name {
	0% {
    	css attribute: value;
    }
    100% {
    	css attribute: value;
    }
}

animation

property	description	value
animation-name	keyframe 적용할 이름
animation-duration	동작시간
animation-timing-function	실행 속도	ease(기본값), ease-in(천천 시작->빠르게 끝) ease-out(빠른 시작-> 천천 끝), ease-in-out(시작과 끝만 천천) linear(일정하게), step-start(시작과 동시에 종료), step-end(종료시점에 동작), step(정수, start또는 end), cubic-bezier(움직임 임의설정)
animation-delay	시작 전 지연 시간
animation-iteration-count	반복 횟수
animation-direction	재생 방향	normal(기본), reverse(역방향), alternate(순방향-역방향 번갈아 진행), alternate-reverse(역방향-순방향 진행)
animation-fill-mode	시작 전, 종료 후 스타일지정	none(기본). both(앞뒤 모두에 대한 규칙) forwards(마지막 키프레임 설정값 유지) backwards(첫 키프레임 설정 스타일값 가져옴
animation-play-state	재생, 정지	running(기본값, 실행), paused(일시중지)

animation : name, 시간, 반복횟수

animation: moving 10s 1; // 10초 1번 적용
animation moving 5s infinite; // 5초 무한 반복

animation: name, 시간, 지연시간, 반복획수, 속도, 방향

animation: moving 5s 1s 1 ease-in reverse;