|
목표 : Semantic Tag를 이용하여 HTML문서의 레이아웃을 설계, CSS를 적용하여 HTML문서에 STYLE을 적용 1. 전체 2단 구조의 HTML 레이아웃 문서 작성 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap" rel="stylesheet">
<style type="text/css">
#container{
width: 960px;
padding : 20px;
margin: 0 auto;
border: 1px solid red;
}
h1{
text-align: left;
font-family: 'Roboto', sans-serif;
}
h2{
text-align: left;
font-family: 'Roboto', sans-serif;
}
header{
padding: 20px;
margin-bottom: 20px;
background-color: #88cc00;
}
section{
padding: 20px;
width : 620px;
margin-bottom: 20px;
border: 1px solid gray;
float : Left;
}
aside{
width : 220px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid gray;
float : right;
background-color: #ebebe0;
}
footer{
padding: 20px;
border: 1px solid gray;
clear: both;
}
li{
display: inline;
color: #009933;
}
table#t01 tr:nth-child(even) {
background-color : #e6f0ff;
}
table#t01 tr:nth-child(odd) {
background-color : #99c2ff;
}
table#t01 th {
background-color : #0000ff;
color : white;
}
</style>
</head>
<body>
<div id = "container">
<header>
<h1>ONLINE</h1>
<nav>
<ul style="list-style-type:none;">
<li> <a>메뉴1</a> </li>
<li> <a>메뉴2</a> </li>
<li> <a>메뉴3</a> </li>
<li> <a>메뉴4</a> </li>
</ul>
</nav>
</header>
<section>
<article>
<p style = "font-size: 20px;">기사1</p>
<div style= "align-content: center; background-color : #cccc00; margin-left : 20px; margin-right : 20px;">
<p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다
예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고 , 국회는 회계
연도 개시 30일전까지 이를 의결하여야 한다.</p>
<p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다.
제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론 출판에 대한
허가나 검열과 집회 결사에 대한 허가는 인정되지 아니한다.</p>
</div>
</article>
<article>
<p style = "font-size: 20px;">기사2</p>
<table id="t01" style="text-align: center; width: 580px; height : 250px; margin-left : 20px; margin-right : 20px;">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
</tr>
<tr>
<td>1</td>
<td>이 헌법시행 당시의 대법원장과 대법원판사가...</td>
<td>강감찬</td>
</tr>
<tr>
<td>2</td>
<td>대한민국은 국제평화의 유지...</td>
<td>장영실</td>
</tr>
<tr>
<td>3</td>
<td>정당은 법률이 정하는 바에...</td>
<td>안중근</td>
</tr>
<tr>
<td>4</td>
<td>공공필요에 의한 재산권의 수용...</td>
<td>김두한</td>
</tr>
<tr>
<td>5</td>
<td>국회의원은 그 지위를 남용하여 국가...</td>
<td>계백</td>
</tr>
<tr>
<td>5</td>
<td>정기회의 회기는 100일을, 초과할 수 없다...</td>
<td>최무선</td>
</tr>
</table>
</article>
</section>
<aside>
<h2>SIDEBAR</h2>
<h3 style = "font-size: 16px;">모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</h3>
</aside>
<footer>
<h2>Footer</h2>
<h3 style = "font-size : 15px;">이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</h3>
</footer>
</div>
</body>
</html>
'Web > HTML_CSS_jQuery' 카테고리의 다른 글
| HTML 연습 (0) | 2020.04.01 |
|---|---|
| HTML 연습 (0) | 2020.04.01 |
| HTML 연습 (0) | 2020.04.01 |