<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>webtrend</title>
<style>
ul{
list-style: none;
line-height: 200%;
}
strong{
color:#ad3000;
}
#container{
width: 600px;
margin: 20px auto;
border: 1px solid #000;
background-color: #000;
}
h2{
color: white;
text-shadow: 3px 2px 5px black;
}
table,td,th{
caption-side: bottom;
border: 1px solid black;
padding: 10px;
border-collapse: collapse;
}
.heading{
background-color: #eee;
}
</style>
</head>
<body>
<h1>최신 웹 디자인 트렌드</h1>
<ul>
<li><strong>반응형 웹 디자인</strong> - 다양한 화면 크기에 최적화하다.</li>
<li><strong>플랫 디자인</strong>- 입체에서 평면으로</li>
<li><strong>풀 스크린 배경</strong>-콘텐츠에 집중</li>
<li><strong>원 페이지 사이트</strong>-한페이지에 모든 내용을 담다.</li>
<li><strong>패럴랙스 스크롤링</strong>- 동적인 효과로 강한 인상을!</li>
<li><strong>웹 폰트</strong>-웹 타이포그래피를 받쳐주는 기술</li>
</ul>
<div id="container">
<h2>웹 개발 기초</h2>
</div>
<p></p>
<table>
<caption>2019 국민 독서 실태</caption>
<tr>
<th><span class="heading">구분</span></th>
<th><span class="heading">성인</span></th>
<th><span class="heading">독서자</span></th>
</tr>
<tr>
<th><span class="heading">종이책</span></th>
<td>6.1권</td>
<td>11.8권</td>
</tr>
<tr>
<th><span class="heading">전자책</span></th>
<td>1.2권</td>
<td>7.1권</td>
</tr>
<tr>
<th><span class="heading">오디오북</span></th>
<td>0.2권</td>
<td>5.5권</td>
</tr>
</table>
</body>
</html>
'HTML+CSS+자바스크립트' 카테고리의 다른 글
| 자바스크립트 (0) | 2023.05.25 |
|---|---|
| CSS고급 선택자 (0) | 2023.05.24 |
| CSS,박스 모델 (0) | 2023.05.23 |
| p.191, 192 예제 (0) | 2023.05.22 |
| CSS의 기본(1) (0) | 2023.05.22 |