안녕하세요!
자바스크립트가 포함되지 않은
순수 HTML과 CSS를 이용한 타이핑 효과를 만드는 방법을 알려드리려고 합니다
인터넷에 나온 수많은 방법 중에 하나로
제가 찾은 코드 중에 가장 쉬우면서도 간단한 코드입니다!
풀소스 아래로 자세한 설명 이어가겠습니다.
먼저 풀 소스 입니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pure CSS만을 이용한 타이핑 효과 만들기</title>
<style>
/*css reset*/
body, h1 {margin:0; padding: 0}
/* 배경 및 위치 CSS*/
body {
position: relative;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right top, #b21697, #a534aa);
}
/* 여기부터 타이핑 효과 적용 CSS*/
section{
display: inline-block;
}
h1 {
color: #ffffff;
font-size:100px;
overflow: hidden;
white-space: nowrap;
width: 0;
border-right: 0.5rem solid #b21697;
animation: typing steps(12, end) 2s forwards infinite;
}
@keyframes typing {
from{width:0 }
to{width: 100%}
}
</style>
</head>
<body>
<section>
<h1>Hi, Designer</h1>
</section>
<script type="text/javascript">
</script>
</body>
</html>
HOW TO
STEP 01. 먼저 기본 Doctype HTML 파일을 준비해줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
STEP 02. HTML에 태그를 넣어줍니다.
이 효과를 적용하기 위해 필요한 요소는 HTML에서 Typing이 직접 들어가는 태그( 예 : <p>hi, designer</p>) 와 이를 감싸주는 태그( 예 : <section><p>hi, designer</p></section)입니다. 제가 사용한 태그가 아니여도 <글씨가 들어가는 태그>와 <이를 감싸는 태그>로 구성되어 있으면 가능합니다.
<body>
<section>
<h1>Hi, Designer</h1>
</section>
</body>
STEP 03. CSS를 적용할때 감싸는 태그에 display: inline-block;을 넣어주는 것이 중요합니다.
먼저 예쁘게 하기 위한 디자인을 적용한 코드입니다.
<style>
/*css reset*/
body, h1 {margin:0; padding: 0}
/* 배경 및 위치 CSS*/
body {
position: relative;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right top, #b21697, #a534aa);
}
</style>
위 body에 적용한 CSS 코드 아래 아래 section과 h1의 내용을 적어주면 효과가 간단하게 마무리 됩니다
<style>
/* 타이핑 효과 적용 CSS*/
section{
display: inline-block; /*중요*/
}
h1 {
color: #ffffff;
font-size:100px;
overflow: hidden;
white-space: nowrap;
width: 0; /*넓이 값을 0 */
border-right: 0.5rem solid #b21697;
animation: typing steps(12, end) 2s forwards infinite;
}
/*애니메이션 키프레임 적용*/
@keyframes typing {
from{width:0 }
to{width: 100%}
}
</style>
더 궁금하신 점있으시면 댓글 달아주세요 !!
아래는 제가 참고한 원본 사이트 입니다.
How to Create a CSS Typewriter Effect for your Website - SitePoint
There are lots of cool ways to add interest and delight to your web pages with CSS. Learn how to create an animated CSS typewriter effect.
www.sitepoint.com
'CSS HTML JS' 카테고리의 다른 글
| <table><th><td>에 대각선 사선 순수 CSS만 이용해서 넣기 (0) | 2023.01.13 |
|---|---|
| CSS로 스크롤바 디자인 바꾸는 방법 :: Edge, Chrom, Opera AND Firefox까지! (0) | 2023.01.09 |
| 움직이는 애니메이션 png, APNG 이란? (0) | 2023.01.06 |
| CSS Flex 기본 개념 정리 (0) | 2022.10.08 |
| 스크롤 이동시키는 방법 :: $(window).scrollTop() :: scrollTo() (1) | 2022.10.07 |
