반응형
<!DOCTYPE html>
<html>
<head>
<title> This is a Test File.</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>
<span>안</span><span>녕</span><span>하</span><span>세</span><span>요</span>
</h1>
</body>
</html>▶ 각각의 텍스트를 <span> 태그로 감싸줌
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap');
body{
background-color:darkgreen;
}
h1{
font-family: 'Noto Serif KR', serif;
font-size:30px;
}
h1 span:nth-child(1){
color:red;
}
h1 span:nth-child(2){
color:orange;
}
h1 span:nth-child(3){
color:yellow;
}
h1 span:nth-child(4){
color:green;
}
h1 span:nth-child(5){
color:blue;
}▶ body{ background-color:darkgreen; } : 전체에 적용할 때는 body 태그 사용
▶ h1 span:nth-child : h1 태그의 n번째 자식임을 의미함
반응형
'Web > 모각코' 카테고리의 다른 글
| [ Visual Studio Code ] html 파일 만들기 - 모각코 1일차 (0) | 2021.12.21 |
|---|---|
| [ Visual Studio Code ] 도형 만들기 (0) | 2021.12.20 |
| [ Visual Studio Code ] 태그 정리 (0) | 2021.12.18 |
| [ Visual Studio Code ] 웹 폰트 적용 (0) | 2021.12.17 |
| [ Visual Studio Code ] css 적용 방법 (0) | 2021.12.13 |