[CSS] typing 썼다 지우는 애니매이션 구현하기

김진평·2023년 1월 5일
0

CSS

목록 보기
3/5
post-thumbnail

자기소개 페이지를 만들던 중 "I'm frontend developer." 라는 문구를 썼다 지웠다 하는 애니메이션을 추가하고 싶어졌다.

먼저 Html에 h6 태그를 생성한 후 css를 입혀주었다.

index.html
<div>
 	<h6 class="home-ment" id="writing"></h6>
</div>

이제 css파일을 살펴보자

index.css
#writing {
  color: transparent;
  font-size: 40px;
  white-space: nowrap;
}

#writing::after {
  content: "I'm frontend developer.";
  position: absolute;
  color: #3366cc;
  overflow: hidden;
  border-right: 1px solid #3366cc;
  animation: typing 5s steps(31) infinite;
}

@keyframes typing {
  0% {
    width: 0%;
  }
  50% {
    width: 420px;
  }
  100% {
    width: 0%;
  }
}
요소 설명
  1. writing
    -> color : transparent
    --> 폰트 색깔을 투명한 색으로 지정
    -> white-space : nowrap
    --> 공백과 줄바꿈을 지정
  2. writing::after
    -> content : "I'm ~ "
    --> 작성한 내용
    -> border-right : 1px solid #3366cc
    --> 작성할 내용 우측에 마우스 클릭 효과 주기
    -> animation : typing 5s steps(31) infinite;
    --> typing이라는 keyframs 적용, 5초간 31단계를 거쳐 무한반복으로
  3. @keyframs typing
    -> content를 쓰고 지우는 동안의 너비 설정
결과

white-space 속성 정리
속성 값설명
normal연속된 공백과 줄 바꿈은 메꾸어져서 하나의 공백으로 표시됩니다. 소스(Source)내의 줄 바꿈 문자도 공백 문자로써 처리됩니다. 필요하다면 긴 줄을 줄바꿈 합니다.
nowrapnormal과 같이 공백을 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시합니다.
pre연속된 공백을 그대로 표시합니다. 또한 긴 줄도 줄 바꿈하지 않고 표시합니다.
pre-wrap연속 공백은 그대로 유지됩니다. 행(行)의 줄 바꿈은 행의 박스를 채우기 위해 필요한 경우에 실행합니다.
pre-line연속 공백은 메꾸어져 하나의 공백이 됩니다. 행의 줄 바꿈은 행의 박스를 메꾸기 위해 필요한 때에 실행됩니다.

0개의 댓글