현재 <div> 태그가 여섯 개 있는데요. 처음 다섯 개를 보시면 우리가 배운 폰트 종류 다섯 가지가 각각 써져 있습니다. 각 <div> 태그를 지정된 폰트 종류에 포함되는 font-family로 설정해주세요.
그리고 마지막 <div> 태그에는 Google이라고 적혀 있습니다. 마지막 <div>는 구글 웹폰트를 사용해주세요!
styles.css 파일에 작성하면 됩니다!
<!DOCTYPE html>
<html>
<head>
<title>Fonts</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="serif">Serif</div>
<div id="sans-serif">Sans-Serif</div>
<div id="monospace">Monospace</div>
<div id="cursive">Cursive</div>
<div id="fantasy">Fantasy</div>
<div id="google">Google</div>
</body>
</html>
셀프 채점
다음 항목들이 제대로 구현되었는지 확인해 보세요!
구글 웹 폰트를 사용하기 위한 코드를 <head></head> 사이에 작성하였다.
id 선택자를 활용하여 폰트가 잘 변경되었다.
과제해설
#serif {
font-family: "Times New Roman", serif;
}
#sans-serif {
font-family: Arial, sans-serif;
}
#monospace {
font-family: Courier, monospace;
}
#cursive {
font-family: "Comic Sans MS", cursive;
}
#font-family {
font-family: Impact, Fanstasy;
}
#google {
font-family: "Nosifer", cursive;
}
구글 폰트 링크를 추가한다.
<!DOCTYPE html>
<html>
<head>
<title>Fonts</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="serif">Serif</div>
<div id="sans-serif">Sans-Serif</div>
<div id="monospace">Monospace</div>
<div id="cursive">Cursive</div>
<div id="fantasy">Fantasy</div>
<div id="google">Google</div>
</body>
</html>
'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글
| span 태그 (0) | 2021.03.16 |
|---|---|
| 폰트 파일 사용하기 (0) | 2021.03.09 |
| 폰트 설정 (0) | 2021.03.06 |
| Line-height (0) | 2021.03.06 |
| 폰트 크기 (0) | 2021.03.06 |
