CSS - 텍스트 효과(타이핑 효과)

타이핑 효과가 나타나게 할 텍스트를 투명하게 배경처럼 깔아두고 가상요소로 글자를 입힌다.

1. border-right를 사용해 커서 효과를 줌
2. white-space

• 스페이스와 랩, 줄 바꿈, 자동 줄바꿈을 어떻게 처리할 지 정하는 속성 ( defalut는 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

animation , @keyframe

@keyframe

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

animation

property	descriotion	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-be/zier(움직임 임의설정)
animation-delay	시작전 지연시간
animation-itration-count	반복횟수
animation-direction	재생방향	normal(기본), reverse(역방향), alternate(순방향-역방향 번갈아 진행), alternate-reverse(역방향-순방향 진행)
animation-mode	시작 전, 종료 후 스타일지정	none(기본). both(앞뒤 모두에 대한 규칙) forwards(마지막 키프레임 설정값 유지) backwards(첫 키프레임 설정 스타일값 가져옴
animation-play-state	재생,정지	running(기본값, 실행), paused(일시중지)

animation속성은 대부분 축약해서 사용

animation : name ,시간, 반복횟수
ex) animation: typing 3s 1;
animation : typing 4s infinite;
animation: name, 시간, 지연시간, 반복횟수, 속도, 방향
ex) animation: typing 2s 1s 1 ease-in reverse;