<html>
<head>
<title>Mystery Letter</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">
<script src="prefixfree.js"></script>
</head>
<body>
<p>
<span class="magazine1 reallybig">HELLO</span>
<span class="newspaper medium">My</span>
<span class="magazine2 big">name</span>
<span class="newspaper">is</span>
<span class="rotateleft reallybig">Jieun</span>
<span class="rotateright big">!</span>
<span class="skewleft medium">Let's</span>
<span class="magazine1 medium">Learn</span>
<span class="comic medium">Together</span>
<span class="comic">!</span>
<span class="rotateright medium">I'M</span>
<span class="magazine2 medium">sure</span>
<span class="magazine1">It's</span>
<span class="skewleft">going</span>
<span class="rotateleft medium">to be fun</span>
<span class="skewright big">!</span>
</p>
</body>
</html> 
span
{
display: inline-block;
margin: 8px;
box-shadow: 1px 2px 2px grey;
}
body {
background-color: white;
padding: 30px;
max-width: 350px;
margin: auto;
}
.newspaper {
background-color: antiquewhite;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
.magazine1 {
background-color: teal;
color:white;
font-family: 'Potta One', cursive;
font-weight: 900;
text-transform: uppercase;
}
.magazine2 {
background-image: url('pink-pattern.png');
color: fuchsia;
font-family: Verdana;
font-weight: 900;
}
.comic {
background-color: yellow;
color: red;
font-family: 'Hanalei Fill', cursive;
}
.medium {
font-size: 20px;
padding: 8px;
}
.big {
font-size: 30px;
padding: 10px;
}
.reallybig {
font-size: 40px;
padding: 15px;
}
.rotateleft {
transform: rotate(-5deg);
background-image: url('computer-printout-paper.png');
font-family: 'Anton', sans-serif;
}
.rotateright {
transform: rotate(5deg);
background-image: url('canvas.png');
font-family: 'Lobster', cursive;
}
.skewleft {
transform: skewX(10deg);
background-image: url('rough-paper.png');
font-family: 'Yellowtail', cursive;
}
.skewright {
transform: skewX(-10deg);
}
css 에서 "#" 과 "." 의 차이에 대하여.
"#" 태그는 id 값을 선택자로 지정할 때 사용.
"." 태그는 class 값을 선택자로 지정할 때 사용.
예를 들어<h1 id="apple">사과</h1> <h1 id="banana">바나나</h1> <h1>딸기</h1>위의 id 값 중에 "apple" 의 스타일을 바꿔주고 싶다면,
<style> #apple { background-color: red; } </style>"#" 태그를 이용해 호출.
<h1 class="apple">사과</h1> <h1>바나나</h1> <h1 class="apple">딸기</h1>class 값 중에 "apple" 의 스타일을 바꿔주고 싶다면,
<style> .apple { background-color: red; } </style>"." 태그를 이용해 호출.
그리고 생기는 궁금증 하나.
새로운 폰트마다 html에 모든 링크를 하나하나 입력해야하나? 더 심플한 방법이 있지 않을까.
-참고사이트 링크텍스트
