2023. 1. 16. 02:17ㆍFrontEnd & Mobile/HTML & CSS
(110) 텍스트 타이핑 효과 어디까지 만들어봤니?(only css) / HTML+CSS 실습 / 웹 코딩 - YouTube
참고자료)
html/css flex, flexbox 반응형 웹을 위한 css 레이아웃 속성 정리
기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox 가 생겨났다. flex는 flexible의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다.기본 컨셉
thrillfighter.tistory.com
justify-content - CSS: Cascading Style Sheets | MDN
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
align-items - CSS: Cascading Style Sheets | MDN
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
developer.mozilla.org
@keyframes
https://basemenks.tistory.com/280
keyframes 와 animation 의 사용법
[ 📚 index ] 1. @keyframes 와 애니메이션 소개 2. @keyframes 3. animation 4. Vendor Prefixes 더하기 1. @keyframes 와 애니메이션 소개 동영상 응용에서 사용하는 언어로, 시작 프레임과 마지막 프레임 중에서 전체
basemenks.tistory.com
<!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>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles&display=swap" rel="stylesheet">
<style>
body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #363636;
margin:0;
}
.typing-text{
font-family: 'Fuzzy Bubbles', cursive;
font-size: 2rem;
color: white;
border-right: 3px solid white;
animation: blink .5s infinite,typing 2s steps(22);
white-space: nowrap;
overflow: hidden;
}
@keyframes blink {
50%{
border-color: transparent;
}
}
@keyframes typing{
from{
width: 0;
}
to{
width: 476px;
}
}
</style>
</head>
<body>
<p class="typing-text">Welcome, Sucoding Youtube!</p>
</body>
</html>
'FrontEnd & Mobile > HTML & CSS' 카테고리의 다른 글
| [제주코딩베이스캠프] (신) 올 뉴 30분 요약강좌(Bootstrap) (0) | 2023.01.16 |
|---|---|
| [수코딩] [HTML/CSS] Full Screen Landing Page 만들기 (배경 이미지 본문 내용 참고) / 웹코딩 / 실습 (0) | 2023.01.16 |
| PHP란?(자바스크립트와 차이) (0) | 2022.12.30 |
| [비전공자를 위한 첫 코딩 챌린지 with HTML&CSS] 06 코딩 맛보기 (0) | 2022.12.30 |
| [Do it! HTML5+CSS3 웹 표준의 정석] 01장 HTML 기본 다지기 (0) | 2022.12.21 |