열심히 끝까지
디바이스 융합 자바(Java) day30 - 애니메이션 효과(마우스 holder시 늘어나는 바,개인 애니메이션 제작), 웹 폰트 본문
디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)
디바이스 융합 자바(Java) day30 - 애니메이션 효과(마우스 holder시 늘어나는 바,개인 애니메이션 제작), 웹 폰트
노유림 2022. 7. 22. 16:04--애니메이션 효과(hover시 늘어나는 바)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 - 1</title>
<style type = "text/css">
* {
margin:5px;
}
.menu li{
list-style-type:none;
}
.menu li a{
display: block;
width: 150px;
height: 20px;
background:lightblue;
color:red;
text-decoration:none;
transition:width 1s, color 3s;
}
.menu li a:hover{
color: black;
width: 300px;
}
</style>
</head>
<body>
<!-- 애니메이션 효과 - 마우스 holder시 늘어나는 컬러바 -->
<h1>쇼핑몰 메뉴</h1>
<ul class = "menu">
<li><a href="#">신상품</a></li>
<li><a href="#">인기 상품 30</a></li>
<li><a href="#">타임세일!!!</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</body>
</html>>> 상태변화에 따라 값이 변화는 것
--개인 애니메이션 제작
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 - 2</title>
<style>
/* 애니메이션 만들기 */
@keyframes sample{
/* 어떻게 바뀌는지 기재 = %로 기재 */
0% {background:lightpink; transform: translate(0,0);}
50% {background:lightgreen; transform : translate(70px, 30px);}
100% {background:red; translate: translate(0,0);}
}
p {
width:100px;
height:100px;
background:lightpink;
padding : 10px;
/* 밖 여백 : margin 안 여백 : padding */
/* p태그에 애니메이션을 걸 수 있다. */
/* 고객센터 챗봇, 둥둥 떠다니는 위젯에 별도의 애니메이션 효과 지님. */
animation-name : sample;
animation-duration:5s;
/* 유지값인 default가 아닌 forwards를 넣음으로서 마지막 색이 유지되게 함 */
animation-fill-mode:forwards;
}
</style>
</head>
<body>
<!-- 애니메이션 효과 - -->
<p>애니메이션</p>
</body>
</html>
>> 내가 직접 만들어서 사용하는 것
----웹 폰트
구글 웹 폰트
https://fonts.google.com/
한국어 사이트를 만들고 싶으면 폰트에 한국을 골라서 폰트를 고를 것
티가 많이 나는 폰트 설정
아래 select 버튼 클릭
오른쪽에 링크 뜸
복사해서 링크 복사
>> 준비 끝!!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 폰트</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=Single+Day&display=swap" rel="stylesheet">
<style type="text/css">
.gwf{
/* 웹 폰트 이름은 family = 뒤에 */
/* url에는 공백 대신 '+'가 들어갔기 때문에 + 제외하고 사이띄우기 */
font-family:'Single Day';
/*HTML CSS는 전세계에서 개발이 됨, ""안쓰고 ''쓰고 대문자 쓰고..*/
/* 웹 표준은 ""에 소문자 원래는 "Single Day"라고 작성해야 함*/
}
</style>
</head>
<body>
<p>가나다라마바사</p>
<p class="gwf">아자차카타파하</p>
</body>
</html>>> 실무에서는 웹폰트는 css 파트라 import로 많이 쓴다.
하지만 우리는 마음에 안들어서 바꾸는 것이기 때문에 가져와서 쓴 것