반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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;
font-family: 'Nanum Myeongjo', serif;
}
header {
padding : 20px;
margin-bottom : 20px;
border : 1px solid green;
background-color : #8cd98c;
}
a {
color : #206020;
}
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 : #d9d9d9;
}
footer {
padding : 20px;
border : 1px solid gray;
clear : both;
}
li {
display : inline;
}
li a {
padding : 16px;
}
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>
<title></title>
</head>
<body>
<div id ="container">
<header>
<h1>ONLINE SSAFY</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>
<h1> 기사 1 </h1>
<div style="align-content: center; background-color : yellow; margin-left : 20px; margin-right : 20px;">
<p> 재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다
예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도
개시 30일전까지 이를 의결하여아 한다. </p>
<p> 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다.
제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나
검열과 집회·결사에 대한 허가는 인정되지 아니한다. </p>
</div>
</article>
<article>
<h1> 기사 2 </h1>
<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>
<h1> SIDEBAR </h1>
<p> 모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</p>
</aside>
<footer>
<h1> Footer </h1>
<p> 이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.<p>
</footer>
</div>
</body>
</html>반응형
'웹 프로그래밍 > Front-End' 카테고리의 다른 글
| 메모장 만들기 (1) | 2020.03.25 |
|---|---|
| "오늘의 메뉴" JS -> JQuery 로 바꿔보기 (0) | 2020.03.25 |
| Javascript 생성자, 프로토타입 (0) | 2020.03.21 |
| HTML, CSS, Javascript 연습문제 (0) | 2020.03.21 |
| javascript 기본 연습 문제 (0) | 2020.03.21 |
