![[2021/12/21]국비지원 CSS3 3-(4) 과제3 : 영어속담](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FwrhOP%2Fbtrr2Xi4ic9%2FAAAAAAAAAAAAAAAAAAAAAC9Z_rsoT_U0GRIvzrn1CQFvhd2q-iwHHS7Bf4i7akHA%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3DhT5XBOV1HggUHGiAUYBdu3Fmz1Q%253D)
수업 중 과제 3
영어 속담을 표 형식으로 꾸며보기
사용한 css3
- font-size
- font-family
- line-height
- list-style-type
- width
- border
- margin
- background (통합 property)
- letter-spacing
- text-align
- padding
- color (font-color)
작업내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>영어속담<title>
<style type="text/css">
*{padding: 0; margin: 0;}
body{font-size: 12px;font-family: Dotum,"돋움",sans-serif; line-height:150%;}
ul,li{list-style-type: none;}
div{width: 500px;margin: 0px auto;border: 3px double green;}
div h3{background: yellow no-repeat 0px 0px; letter-spacing: 10px;text-align: center;
border-bottom: 3px solid green; padding: 10px;}
div ul{padding: 10px;}
div ul.line{border-bottom:1px dotted green;}
div ul li.eng{color: blue;}
</style>
</head>
<body>
<div>
<h3>영어속담</h3>
<ul class="line">
<li class="eng">Better later than never.</li>
<li>아무리 늦더라도 전혀 안하는 것보다는 낫다.</li>
</ul>
<ul>
<li class="eng">Rome was not build in a day.</li>
<li>로마는 하루 아침에 이루어 지지 않았다.</li>
</ul>
</div>
</body>
</html>
결과물
