시간이 지남에따라 글자색 변경하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션</title>
<style>
@keyframes textColorAnimation{
0%{color: blue;}
30%{color: green;}
100%{color: red;}
}
span{
font-family: "arial black";
animation-name: textColorAnimation;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<!--<h3> 텍스트 색 애니메이션-->
<p><span>span</span>택스트를 5초에 blue, green,red 로 무한반복 합니다.</p>
</body>
</html>
font-family는 글꼴을 설정하는 속성입니다.
textColorAnimation : 0% 일때 blue 로 글자색
30%일때부터는 green 100%까지는 red로 글자색을 하겠다는것
outside & Insider
기본은 outside 이다.
(예)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 마커</title>
<style>
ul{
background: goldenrod;
padding: 10px 10px 10px 50px;
list-style: circle outside url("../images/marker.png");
/*circle outside*/ 그림을 li 바깥쪽에 두겠다는 말
}
ul li{
background: greenyellow;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h3>커피메뉴</h3>
<hr>
<ul>
<li>Espresso</li>
<li>Cappuccino</li>
<li>Cafe Latte</li>
</ul>
</body>
</html>|
circle outside
|
circle inside |
 |
 |
(예)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Lists</title>
<style>
ul{ background: #ee3333;}
ul li{background: #55dd77;}
.outside{list-style-position: outside; background: #cccc66;}
.inside{list-style-position: inside; background: #6666cc;}
</style>
</head>
<body>
<h1>list-style-position 속성을 이용한 리스트 요소의 위치 설정</h1>
<p>이 리스트는 위치를 outside로 지정했습니다. (기본설정)</p>
<ul class="outside">
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ul>
<br>
<p>이 리스트는 위치를 inside로 지정했습니다.</p>
<ul class="inside">
<li>수박</li>
<li>참외</li>
<li>옥수수</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Style</title>
<style>
input[type=text] {
color: green;
border: 5px solid skyblue;
border-radius: 30px;
}
</style>
</head>
<body>
<form>
<label>
이름: <input type="text" placeholder="Korea">
</label>
<br>
<label>
주소 : <input type="text" placeholder="Korea Seoul">
</label>
</form>
</body>
</html> |
 |
레이블을 사용하였기 때문에 글씨인 이름, 주소를 눌러도 포커스가 간다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:hover Form Style</title>
<style>
input[type=text]{color: green;}
input[type=text]:hover{
background: yellow;
border: 2px solid skyblue;
border-radius: 5px;
}
input[type=text]:hover#kbs{
background: #66dd66;
border: 3px solid skyblue;
border-radius: 25px;
}
</style>
</head>
<body>
<form>
<label>
이름 : <input type="text" placeholder="Korea">
</label>
<br>
<label>
주소 : <input type="text" id="kbs" placeholder="Korea Seoul">
</label>
</form>
</body>
</html> |
 |
 |
'KH > CSS' 카테고리의 다른 글
| CSS_프로퍼티(2) visibility, 애니매이션 효과, form 꾸미기 (1) | 2022.09.16 |
|---|---|
| CSS_ 마우스 이벤트/ 목록 꾸미기 (0) | 2022.09.16 |
| CSS_ 스타일시트의 기본적인 모습들 (0) | 2022.09.15 |
| CSS_스타일시트의 종류 (0) | 2022.09.14 |