<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1. 전체선택자 => *로 표시 */
* {
color: steelblue;
font-family: serif;
}
/* 2. 태그선택자 => 태그이름으로 표시 */
li {
font-size: large;
}
/*
아이디 => 한 문서에 한 번만! 중복 불가능.
클래스 => 재사용성 뛰어남, 중복 가능
*/
/* 3. 아이디선택자 => # 기호로 표시 */
#big {
background-color: lightgreen;
}
/* 4. 클래스선택자 => .기호로 표시 */
.nobig {
background-color: lightgray;
}
.underline {
color: rebeccapurple;
text-decoration: underline;
}
/* 담임선생님 이름만 다른 색깔로,
짝궁 이름과 선생님 이름만 다른 배경으로*/
#top {
color: blue;
}
.fr {
background-color: lightcoral;
}
</style>
</head>
<body>
<h3>스마트인재개발원 과정 안내</h3>
<ul>
<li id="big" class="underline">빅데이터</li>
<li class="nobig" >인공지능</li>
<li class="nobig">IoT</li>
</ul>
<h3>인물 소개</h3>
<ul>
<li class="fr">이수모킹</li>
<li id="top" class="fr">김은영</li>
<li >이주희</li>
</ul>
</body>
</html>
댓글