1. 셀렉터 활용하기 - 태그이름, id, class, 가상 class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>셀렉터 만들기</title>
<style>
body.main{background-color: aliceblue;}
h1:first-letter{color: red;}
ul strong{color: dodgerblue;}
.warning{color: red}
div > div > strong{background-color: yellow;}
h1, li{color: brown;}
#list{background-color: mistyrose;}
#list span{color: forestgreen;}
li:hover{
background-color: yellowgreen;
}
</style>
</head>
<body class="main">
<h1>Web Programming</h1>
<hr>
<div>
<div>
2학기 <strong>학습 내용</strong><br>
<ul id="list">
<li><span> HTML5</span></li>
<li><strong> CSS3</strong></li>
<li> JAVASCRIPT</li>
</ul>
</div>
<br>
<div class="warning">
60점 이하는 F!
</div>
</div>
</body>
</html>2. 링크 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>링크 꾸미기</title>
<style>
a{
text-decoration : none;
color : green;
}
a:hover{
color : violet;
text-decoration : underline;
}
</style>
</head>
<body>
<header>
<h1><strong>링크 꾸미기</strong></h1>
<h2>초록색에 밑줄없는 링크. 마우스를 올리면 밑줄과 violet 색으로 변경</h2>
</header>
<hr>
<ul>
<li><a href = "http://www.naver.com" target ="_blank">네이버 사이트</a></li>
<li><a href = "http://www.google.com" target ="_blank">구글 사이트</a></li>
</ul>
</body>
</html>3. :hover 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hover 활용</title>
<style>
div{
background-image : url("2.jpg");
width : 100px;
height : 200px;
}
div:hover{
background-image : url("3.jpg");
}
</style>
</head>
<body>
<header>
<h1>hover 활용</h1>
</header>
<hr>
마우스를 올리면 카드의 앞면이 보인다. <div></div>
</body>
</html>'CS Study > CSS' 카테고리의 다른 글
| 5. 리스트 / 표 / 폼 꾸미기 (0) | 2022.04.08 |
|---|---|
| 4. 배치 (0) | 2022.04.08 |
| 3. 박스 모델 (0) | 2022.04.07 |
| 2. 색 / 텍스트 꾸미기 (0) | 2022.04.07 |