728x90

안녕하세요, 코더스입니다. 이 기사에서는 Html 및 Css를 사용하여 텍스트 입력 애니메이션을 만들 것입니다. 입력 텍스트 애니메이션은 웹 개발, 특히 초보자를 위한 좋은 연습 프로젝트입니다.

우리는 HTML과 CSS를 사용하여 멋진 반응형 타이핑 텍스트 애니메이션 웹사이트를 만들 것입니다. CSS를 통해 사용할 수 있는 다양한 텍스트 스타일을 배우는 데 도움이 됩니다. 이 기사가 끝날 때까지 자신만의 텍스트 입력 효과를 만들 수 있어야 합니다.

프로젝트에 대한 아이디어가 있었기를 바랍니다.

이제 소스 코드를 추가하여 텍스트 입력 애니메이션 프로젝트를 시작하겠습니다. 이를 위해 먼저 Html 코드를 사용하고 있습니다.

1단계: 텍스트 타이핑 애니메이션을 위한 HTML 코드

HTML은 하이퍼 텍스트 마크 업 언어 (Hyper Text Markup Language)로 웹 페이지에 구조를 제공합니다.

모든 HTML 문서는 브라우저가 최신 HTML 버전을 따르는 코드를 이해하는 데 도움이 되는 <!doctype HTML로 시작합니다>

HTML 문서 자체는 <html>로 시작하고 </html로 끝납니다>

기본 태그는 <body>이며 나중에 브라우저에 표시되는 모든 콘텐츠를 작성합니다.

이제 HTML 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Typing Animation </h1>
    <div class="typing-text">Code With Random</div>
    
</body>
</html>

먼저 웹사이트의 주요 제목이 포함된 H1 태그를 만듭니다.
이제 텍스트 애니메이션 스타일을 추가할 클래스(tpying-text)가 있는 하나의 div 태그를 만듭니다

이제 브라우저 창에서 구조를 검사하여 스타일 지정 없이 어떻게 나타나는지 확인합니다.

HTML 및 CSS를 사용한 텍스트 입력 애니메이션(소스 코드)[/caption]

그래서 우리는 HTML 태그와 그 내용을 추가, 이제 CSS 코드를 추가하여 매력적으로 만들 차례입니다.

2단계: 텍스트 타이핑 애니메이션을 위한 CSS 코드

CSS(Cascading Style Sheets)는 HTML 또는 XML로 작성된 문서의 표현을 설명하기 위한 마크업 언어입니다. HTML 및 JavaScript와 같은 CSS는 World Wide Web의 핵심 구성 요소입니다.

이제 CSS 코드를 살펴 보겠습니다

/* Please ❤ this if you like it! */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');* {
  outline: none;
  box-sizing: border-box;
}body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: steelblue;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  background-image: url("https://images.pexels.com/photos/673857/pexels-photo-673857.jpeg?auto=compress&cs=tinysrgb&h=1280&w=1920"); /* Photo by Irina Iriser from Pexels */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}h1 {
  font-size: 3vw;
}.typing-text {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-size: 6vw;
  animation: typing 2s steps(18) infinite alternate,
    blink 0.4s step-end infinite alternate;
  text-shadow: 0px 0px 3px white;
}@keyframes typing {
  from {
    width: 0;
  }
}@keyframes blink {
  50% {
    border-color: transparent;
  }
}@media (max-width: 767px) {
  h1 {
    font-size: 4vw;
  }
  .typing-text {
    font-size: 8vw;
  }
}

CSS의 첫 번째 단계에서 Google Fonts를 가져와서 텍스트 스타일을 지정하는 데 사용할 것입니다. 윤곽선 값은 0으로 설정되고 상자 크기는 border-box로 설정됩니다.

본문 섹션에서 margin 값을 0으로 설정하고 display as flex 옵션을 설정하여 콘텐츠를 반응형으로 만드는 데 도움이 됩니다. 또한 텍스트 정렬을 중앙으로 설정하고 배경을 이미지로 설정합니다(여기서 이미지는 튜토리얼 목적으로 pexels.com 에서 사용됨).

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');

* {
  outline: none;
  box-sizing: border-box;
}body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: steelblue;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  background-image: url("https://images.pexels.com/photos/673857/pexels-photo-673857.jpeg?auto=compress&cs=tinysrgb&h=1280&w=1920"); /* Photo by Irina Iriser from Pexels */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
}

이제 요소 H1이 선택되고 글꼴 크기를 3vw(vw-viewport)로 정의했습니다.

h1 {
  font-size: 3vw;
}

이제 클래스 선택기를 사용하여 너비를 20ch로 정의하고 오버플로는 너비가 (3px)로 정의되고 글꼴 크기가 (6vw)로 정의된 테두리의 오른쪽이 숨겨짐으로 정의됩니다. 2초의 지연이 있는 애니메이션은 무한히 실행됩니다.

.typing-text {
  width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-size: 6vw;
  animation: typing 2s steps(18) infinite alternate,
    blink 0.4s step-end infinite alternate;
  text-shadow: 0px 0px 3px white;
}

@keyframes typing {
  from {
    width: 0;
  }
}@keyframes blink {
  50% {
    border-color: transparent;
  }
}

최대 너비가 정의된 미디어 쿼리: 뷰 포트 너비가 더 크면 최대 너비 h1 글꼴 크기가 <>씩 증가하고 클래스 선택기 글꼴 크기가 <>씩 증가합니다.

@media (max-width: 767px) {
  h1 {
    font-size: 4vw;
  }
  .typing-text {
    font-size: 8vw;
  }
}

이제 Typing Text Animation을 성공적으로 만들었습니다. 이 프로젝트를 개인 포르폴리오에 사용할 수 있으며 프로젝트를 이해하셨기를 바랍니다.

이 블로그가 도움이 되었다면 소스 코드가 있는 프론트엔드 프로젝트에 대해 Google에서 무작위로 코드를 검색하고 무작위 Instagram 페이지가 있는 코드를 따르십시오.

작성자 : Arun

코드 작성자 : Santosh Singh Chauhan

텍스트 애니메이션이란 무엇입니까?

"텍스트 애니메이션"이라는 문구는 컴퓨터 그래픽에서 문자, 단어 또는 단락을 애니메이션하는 과정을 나타냅니다. 화면을 가로질러, 영역 내에서 또는 애니메이션의 동작 패턴을 따라 이동하는 텍스트를 만드는 것을 말합니다.

애니메이션에 추가되는 텍스트 유형은 무엇입니까?

1. 시차 스크롤
2. 페이드 인/아웃
3. 가로/세로 스크롤 텍스트

728x90

저작자표시

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

프로그래밍 「 자바스크립트 편」NodeJS에서 GPT-4 함수 호출의 기능 활용 (0)	2023.06.17
프로그래밍 「 자바스크립트 편」기본 및 비기본 데이터 형식 (0)	2023.06.17
프로그래밍 「 자바스크립트 편」CSS 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만드는 방법 (0)	2023.06.17
프로그래밍 「 자바스크립트 편」CSS를 사용하여 스크롤 애니메이션 만들기 (0)	2023.06.17
프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 미리보기로 파일 업로드 드래그 앤 드롭 (0)	2023.06.17

그레이프 도감

프로그래밍 「 자바스크립트 편」HTML 및 CSS를 사용하여 텍스트 애니메이션 입력(소스 코드)

1단계: 텍스트 타이핑 애니메이션을 위한 HTML 코드

2단계: 텍스트 타이핑 애니메이션을 위한 CSS 코드

텍스트 애니메이션이란 무엇입니까?

애니메이션에 추가되는 텍스트 유형은 무엇입니까?

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

티스토리툴바

프로그래밍 「 자바스크립트 편」HTML 및 CSS를 사용하여 텍스트 애니메이션 입력(소스 코드)

1단계: 텍스트 타이핑 애니메이션을 위한 HTML 코드

2단계: 텍스트 타이핑 애니메이션을 위한 CSS 코드

텍스트 애니메이션이란 무엇입니까?

애니메이션에 추가되는 텍스트 유형은 무엇입니까?

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

관련글

티스토리툴바