오늘의 할 일 <-글자에 마우스 올리면 초록색 됨
<!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>배경 예제</title>
<style>
/*
- background-color : 배경색을 지정
- background-image : 배경이미지를 지정
- url이라는 함수를 써야 한다.
- url함수 생김새 : url(이미지 주소)
- background-position : 이미지의 시작 위치를 설정
- x축 y축 순으로 지정
- background-repeat : 이미지 반복
- background-size : 배경이미지 크기 지정
- background :
- background-color
- background-image
- background-position/size
- background-repeat
*/
.box{ /*이미지가 작으면 바둑판식으로 나옴*/
width: 500;
height: 500px;
/* background-color: powderblue;
background-size: 1200px 1200px;
background-image: url("../image/greenshoes.JPG"); /*일반적으로 "" 써줌, 안써도 됨*/
/* background-position: -100px -100px; /*음수 설정도 가능*/
/*background-repeat: repeat-y;
*/
background : powderblue url("../image/greenshoes.JPG")
center center/500px 500px repeat-y;
font-size: 30px;
font-weight: bold;
}
/* 오늘의 할 일 리스트를 생성한 후,
해당 리스트의 홀수 번 째 리스트에 배경색을 노란색으로 만드세요*/
/* 오늘의 할 일에 마우스를 가져다 대면 배경색이 녹색이 되도록 만드세요. (머쓱 어렵구먼)*/
.todo-list{
background-color: white;
color: black;
}
.todo-list>li:nth-child(2n-1){
background-color: yellow;
}
.todo-list>li:nth-child(2n){
background-color: white;
}
ol,li{
background-color: white;
margin-top: 0;
}
.todo-list>div:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="box">안녕하세요.</div>
<div class="todo-list">
<div>오늘의 할 일</div>
<ol class = "todo-list">
<li>출근</li>
<li>수업</li>
<li>점심</li>
<li>수업</li>
<li>퇴근</li>
</ol>
</div>
</body>
</html>