<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{color: lightgreen;}
</style>
</head>
<body>
<h1>스타일 적용방법</h1>
<h2>style 속성 사용</h2>
<p style="color: red;">css 연습하기</p>
<h2>style 태그 사용</h2>
<div>
<p>CSS 연습하기</p>
<p>CSS 연습하기</p>
<p>CSS 연습하기</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="demo2.css">
</head>
<body>
<h1>CSS 연습하기</h1>
<h2>외부 스타일시트 파일 사용</h2>
<p>CSS 연습</p>
<p>CSS 연습</p>
<p>CSS 연습</p>
<p>CSS 연습</p>
<p>CSS 연습</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 전체 선택자 */
* {color:red;}
/* 태그 선택자 */
span {color: black; font-size: 30px;}
/* 클래스 선택자 */
.bluetext {color: blue;}
.blueboard {border: 1px solid blue; padding: 7px;}
/* 아이디 선택자 */
#summary {color: black; font-size: 50px;}
/* 그룹 선택자 */
h1, h2 {background: lightgreen;}
</style>
</head>
<body>
<h1>선택자 연습</h1>
<h2>전체 선택자 연습</h2>
<p>전체 선택자의 모든 html 요소에 적용된다.</p>
<h2>태그 선택자 연습</h2>
<p>태그 선택자는 <span>해당 태그에만</span> 스타일이 <span>적용된다.</span></p>
<h2>태그 선택자 연습</h2>
<p>태그 선택자는 <span class="bluetext blueboard">해당 태그에만</span> 스타일이 <span class="bluetext">적용된다.</span></p>
<h2>아이디 선택자 연습</h2>
<p id="summary">아이디 선택자는 아이디 속성 값이 일치하는 태그 하나만 선택해서 스타일을 적용한다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="demo4.css">
</head>
<body>
<div id="wrapper"></div>
<h1>스타일 시트 연습</h1>
<h3>개봉영화 리스트</h3>
<table class="table table-primary">
<thead>
<tr>
<th>순위</th>
<th>제목</th>
<th>점유율</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>어벤저스 엔드게임</td>
<td>60%</td>
</tr>
<tr>
<td>2</td>
<td>걸캅스</td>
<td>30%</td>
</tr>
<tr>
<td>3</td>
<td>포켓몬스터 명탐정 피카츄</td>
<td>10%</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.css">
</head>
<body>
<h1>스타일 시트 연습</h1>
<div>
<button class="btn btn-default">버튼</button>
<button class="btn btn-primary">버튼</button>
<button class="btn btn-info">버튼</button>
<button class="btn btn-success">버튼</button>
<button class="btn btn-warning">버튼</button>
<button class="btn btn-danger">버튼</button>
<button class="btn btn-disabled">버튼</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {margin: 10px; width: 150px; height: 150px;}
</style>
</head>
<body>
<h1>CSS 연습</h1>
<h2>색상 표현하기</h2>
<div style="background-color: red;"></div>
<div style="background-color: rgb(255,0,0);"></div>
<div style="background-color: rgb(0,255,0);"></div>
<div style="background-color: rgb(0,0,255);"></div>
<div style="background-color: rgb(255,0,255);"></div>
<div style="background-color: rgb(0,0,0);"></div>
<div style="background-color: #ff0000;"></div>
<div style="background-color: #f00;"></div> <!-- 앞뒤 글자가 같을 시 줄일 수 있음 -->
<div style="background-color: #ffaabb;"></div>
<div style="background-color: #fab;"></div>
</body>
</html>