<!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>
.red{
color: red;
background-color:darkorange
}
#바나나{
background-color: aqua;
color: blueviolet;
}
.pink{
color: pink;
}
.bgyellow{
background-color: tomato;
}
.green{
color: green;
}
</style>
</head>
<body>
<ul>
<li class="pink bgyellow">사과</li>
<li class="red">포도</li>
<li class="green">수박</li>
<li id="바나나">바나나</li>
</ul>
</body>
</html>연습1
<!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>
input:enabled{
background-color:aquamarine
}
input:disabled{
background-color: rgb(128, 128, 128);
}
input:focus{
background-color: rgb(226, 43, 43);
}
/* css주석
input[type="text"]{
background-color: brown;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
*/
</style>
</head>
<body>
<form>
<!--html 주석-->
<h2>사용가능</h2>
<input type="text" name="txt1">
<h2>사용불가능</h2>
<input id= "blue"type="text" name="txt2" disabled>
</form>
</body>
</html>연습2
<!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>
#header > h1{
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1 class="title">제목입니다.</h1>
<h1 class="title">제목입니다2.</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title"> 여기도 제목입니다.</h1>
<p>블라~ 블라~ 블라~~~</p>
</div>
</body>
</html>연습3
<!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>
tbody > tr{
color:aqua
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
</tr>
<tr>
<td>홍길동</td>
<td>조선 한양</td>
</tr>
</table>
</body>
</html>연습4
<!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>
/* h1+h2{ 형제 옆에있는 것
color: red;
}
h1~h2{ 포함하는 것
background-color: yellow;
}
*/
/* h1,h2,h3{ 이것만 포함에서
background-color: aqua;
} */
</style>
</head>
<body>
<h1>Have a nice day</h1>
<h2>Have a nice day</h2>
<h2>Have a nice day</h2>
<h3>Have a nice day</h3>
<p>Have a nice day</p>
</body>
</html>연습5
<!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>
/*
li*7 하면 여려개가 나온다.
first-child 첫번째 아들
last 마지막 아들
nth-child(2n) 짝수
nth-child(2n+1) 홀수
*/
li{
color: blue;
}
li:last-child{
background-color: violet;
}
li:nth-child(2n){
background-color: green;
}
li:nth-child(2n+1){
background-color: orange;
}
li:first-child{
background-color: red;
}
</style>
</head>
<body>
<ol>
<li>첫번쨰</li>
<li>두번쨰</li>
<li>세번쨰</li>
<li>네번쨰</li>
<li>다섯번째</li>
<li>여섯번쨰</li>
<li>일곱번쨰</li>
</ol>
</body>
</html>연습6
<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>
body{
background-color: yellow;
}
/*
p:nth-child(1){}
p:nth-child(2){font-size: 1.0em;}
p:nth-child(3){font-size: 1.5em;}
p:nth-child(4){font-size: 2.0em;}
*/
p:nth-child(1){}
p:nth-child(2){font-size: 16px; background-color: rgb(255, 255, 255);}
p:nth-child(3){font-size: 24px; background-color : rgba(0, 0, 255, 0.2);}
p:nth-child(4){font-size: 32px; background-color : #0094FF;}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing</p>
<p>Lorem Ipsum is simply dummy text of the printing</p>
<p>Lorem Ipsum is simply dummy text of the printing</p>
<p>Lorem Ipsum is simply dummy text of the printing</p>
</body>
</html>연습7
<!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>
div{
width : 100px;
height : 100px;
background-color : red;
border : 10px solid black;
margin : 0px 0px 0px 0px;
padding: 30px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>연습8
<!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>
div{
height: 30px;
border: 1px dotted #d5d5d5;
}
div.a{
text-transform: lowercase;
}
div.b{
text-align: center; /* center,left,right */
}
div.c{
padding: 5px;
text-decoration: underline overline;
text-decoration-color: red;
text-decoration-style: dotted;
}
.e{
letter-spacing: 5px;
}
.f{
word-spacing: 20px;
}
span{
display: inline-block;
height: 100px;
background-color: green;
}
.g{
vertical-align: bottom;
}
.h{
vertical-align: top;
}
.i{
vertical-align: baseline;
}
</style>
</head>
<body>
<div class="a">text-transfrom: capitalize</div>
<div class="b">text-align: right</div>
<div class="c">text-decoration: color</div>
<div class="d">text-indent : 50px</div>
<div class="e">letter-spacing : 50px</div>
<div class="f">word-spac ing : 20px</div>
<span class="g">vertical</span>
<span class="h">align</span>
<span class="i">middle</span>
</body>
</html>연습9
<!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>
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>1111</ul>
<ul>2222</ul>
</body>
</html>연습10
<!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>
.box{
margin-bottom: 10px;
width: 70px;
height: 70px;
background-color: aquamarine;
}
.box:nth-child(1){
border-style: none;
}
.box:nth-child(2){
border-style: solid;
}
.box:nth-child(3){
border-style: dotted;
}
.box:nth-child(4){
border-style: dashed;
}
.box:nth-child(5){
border-style: double;
}
.box:nth-child(6){
border-style: groove;
}
</style>
</head>
<body>
<div class="box">none</div>
<div class="box">solid</div>
<div class="box">dotted</div>
<div class="box">dashed</div>
<div class="box">double</div>
<div class="box">groove</div>
</body>
</html>연습11
<!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>
table{
width: 100%;
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
table > caption{
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
table td, table th{
padding: 8px 5px;
border: 1px solid #ccc;
}
.blue{
color: white;
background-color: #43cbff;
}
.green{
color: white;
background-color: #81d733;
}
.yellow{
background-color: yellow;
}
.orange{
background-color: orange;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<table>
<caption>미세먼지 농도</caption>
<thead>
<tr>
<th colspan="2">예보구간</th>
<th class="blue">좋음</th>
<th class="green">보통</th>
<th class="yellow">약간 나쁨</th>
<th class="orange">나쁨</th>
<th class="red" colspan="2">매우 나쁨</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">에측 농도</td>
<td>0~30</td>
<td>31~80</td>
<td>81~120</td>
<td>121~200</td>
<td>201~300</td>
<td>300~</td>
</tr>
<tr>
<td rowspan="2">행동요령</td>
<td>노약자</td>
<td></td>
<td></td>
<td>장시간 실외 활동 가급적 자제</td>
<td>무리한 실외활동 자제요청특히 호흡기,심질환자,노약자</td>
<td>실외활동 제한</td>
<td>실내생활</td>
</tr>
<tr>
<td>일반</td>
<td></td>
<td></td>
<td></td>
<td>장시간 무리한 실외활동 자제</td>
<td>실외활동 자제</td>
<td>실외활동 자제</td>
</tr>
</tbody>
</table>
</body>
</html>Share article
