Amarans
0220 CSS-| Link | Pontello 본문
#style1{
color: red;
}
#style2{
color: orange;
}
#style3{
color: yellow;
}
#style4{
color: green;
}
#style5{
color: blue;
}
#style6{
color: violet;
}link 에 href 를 통해 Style.css 를 가져오는방법 . import url을 통해 가져오는방법
밑에 코드는 Style.css 입니다.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<!-- <link rel="stylesheet" href="Style.css"> -->
<style>
@import url("style.css");
</style>
</head>
<body>
<h1 id="style1">광</h1>
<h1 id="style2">현</h1>
<h1 id="style3">이</h1>
<h1 id="style4">는</h1>
<h1 id="style5">천</h1>
<h1 id="style6">재</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/animation.css">
<style>
body{
font-size: 100px;
}
#test::before{
content: "s";
color: red;
font-size: 30px;
}
#test::after{
content:"e";
}
</style>
</head>
<body>
<div id="test">
A
</div>
<i class="icon-beer animate-spin"></i>
<i class=" icon-certificate animate-spin" ></i>
<i class=" icon-key animate-spin"></i>
<i class=" icon-phone animate-spin"></i>
<i class=" icon-basket animate-spin"></i>
</body>
</html>폰트를 사용하는 방법 밑 애니메이션 효과를 주어 스핀하는 모습.
'CSS' 카테고리의 다른 글
| 0220 CSS-|Filter|Transtion| (0) | 2020.02.20 |
|---|---|
| 0219 | Column | Background | (0) | 2020.02.19 |
| 0219 Flot | holy_grail_layout (0) | 2020.02.19 |
| 0219 Flex | grow&shrink | holy_grail_layout (0) | 2020.02.19 |
| 0218 CSS| Position | text_align | (0) | 2020.02.19 |
'CSS' Related Articles
more
Comments