반응형
[광고 누르면 오늘의 행운 상승!!]
화면 레이아웃을
2단으로 구성해서 기본적인 html을 만들어 보았다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title </title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<link rel = "stylesheet" href = "issac.css" type = "text/css"media="all">
</head>
<body>
<div id = "wrapper">
<header>
<h1>ISSAC TOAST</h1>
<br>
<ol>
<li><a href = "https://toastfactory.tistory.com/">홈페이지</a></li>
<li><a href = "https://toastfactory.tistory.com/116">메뉴</a></li>
<li><a href = "https://toastfactory.tistory.com/115">토스트 공장1</a></li>
<li><a href = "https://toastfactory.tistory.com/114">토스트 공장2</a></li>
<li><a href = "https://toastfactory.tistory.com/113">토스트 공장3</a></li>
</ol>
</header>
<section>
<nav>
<h2>최신기사</h2><br>
<h3>토스트 도둑이 잡히다!</h3><br>
<div>
<p>
지난 3월 3일 이삭 토스트 일산지점에서 햄치즈 토스트를 훔쳐 달아난 박이삭씨가 드디어 붙잡혔습니다.
그는 생활고에 시달리던 중 지나가던 이삭 토스트 매장에서 맛있는 냄새를 맡고 참을 수 없어 이와같은 범행을 저질렀다고 고백했습니다
</p>
</div>
<h3>코로나에 좋은 토스트</h3><br>
<div>
<p>
과학자들은 토스트에 대해 놀라운 결과를 발표했습니다. 바로 토스트가 코로나 바이러스를 물리친다는 것입니다.
하지만 이와 같은 주장에 시민들은 과학적 근거가 없다며 크게 분노하고있습니다.
</p>
</div>
</nav>
<section>
<article>
<br><h2>토스트의 유래</h2><br>
<div>
<p>
어원 라틴어에서 '바싹 말리다, 마르다, 굽다, 타다'를 뜻하는 torrere에서 유래한
12세기 통속 라틴어에서 '굽기'를 뜻하는 tostare에서 유래한 것이다. 오늘날 쓰이고 있는 단어
'toast'는 옛 프랑스어에서 온 것이며 1398년에 처음으로 발견되었다.
</p>
</div>
</article>
<article>
<br><h2>메뉴판</h2><br>
<table>
<thead>
<tr>
<th>번호</th><th>토스트</th><th>가격</th><th>선호연령</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>햄치즈</td><td>1000</td><td>10</td></tr>
<tr><td>2</td><td>불고기</td><td>2000</td><td>20</td></tr>
<tr><td>3</td><td>스테이크</td><td>2500</td><td>30</td></tr>
<tr><td>4</td><td>햄치즈울트라</td><td>9999</td><td>40</td></tr>
</tbody>
</table>
</article>
</section>
</section>
<footer>
<h2>Isaac Toast</h2>
<br><p>창업문의 : 1833-9299<br>
서울사업본부 : 서울시 송파구 중대로 92 효원빌딩 6층, 13층 (TEL: 042-274-0360)</p>
</footer>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 700px;
background-color: gray;
}
/* 헤더 */
header{
width: 680px;
height: 80px;
padding: 10px;
background-color: lightgray;
}
/*본문 */
nav{
font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
width: 160px;
padding: 10px;
float: right;
}
nav+section{
width: 500px;
padding: 10px;
background-color: darkgray;
float:left;
}
nav h2{
font-family: 'Nanum Gothic', sans-serif;
}
nav p{
font-family: 'Nanum Gothic', sans-serif;
color: #4d4d4d;
}
nav div{
background-color : #999999;
}
article div{
background-color : #999999;
}
body{
font-size: 0.9em;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
p{
color : black;
margin-bottom: 20px;
}
a{
text-decoration: none;
color: white;
}
ol{
background-color: #2d2d2d;
padding: 6px;
}
li{
display: inline;
margin: 0 10px;
}
/*테이블*/
table{
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
margin-bottom : 20px
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
text-align: center;
}
thead tr {
background-color: #404040;
color: #ffffff;
}
tbody tr:nth-child(2n) {
background-color: #8c8c8c;
}
tbody tr:nth-child(2n+1) {
background-color: #b3b3b3;
}
/*footer*/
footer{
clear: both;
padding: 1px;
background-color: #333333;
color: gray;
}
footer h2{
color: #cccccc;
}
footer p{
color: #737373;
}
반응형
'5. 웹 프로그래밍 > 1. HTML' 카테고리의 다른 글
| HTML 기타 요소들 (0) | 2020.03.20 |
|---|---|
| HTML 서식 [Form][요소] (0) | 2020.03.20 |
| HTML 표 [Table][표] (0) | 2020.03.20 |
| HTML의 요소 [HTML][요소][섹션] (0) | 2020.03.20 |
| HTML이란 [HTML][특징] (0) | 2020.03.20 |