<html 코드>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 시멘틱 예제</title>
<link href="../css/simple_semantic2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>여기는 헤더 영역입니다.</h1>
</header>
<aside class="sidebar">
<ul>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
</ul>
</aside>
<article>
<section class="content">
<span>베조스의 두 가지 성공 비결</span><br>
아마존에 투자하지 않아서, 제프 베조스를 과소평가해서 후회가 된다는 워렌 버핏, 천하의 버핏마저 후회하게 만든 베소즈의 경영 비결 '제프이즘'을 살펴본다.
</section>
<section class="content">
<span>제프 베조스의 경영 비결</span><br>
제프는 다음과 같이 제프이즘에 대해 운을 뗐다. "우리를 남다르게 만드는 것이 무엇인지 궁금하시다면 그 진실은 바로 이것입니다. 우리는 진정 고객 중심적입니다. 하지만 대부분의
회사는 고객이 아닌 경쟁자에 집중합니다. 이것이 바로 우리가 남다른 이유입니다."
</section>
</article>
<footer>
<h4>Footer 입니다. copyright. 2019</h4>
</footer>
</div>
</body>
</html>
<css 코드>
@charset "utf-8";
body {
font: 15px "맑은 고딕";
}
.container {
position: absolute;
width: 80%;
margin-left: 10%;
margin-right: auto;
background-color: white;
}
header, aside, footer {
display: block;
}
section {
display: inline;
}
header {
position: relative;
text-align: center;
background-color: orange;
}
.sidebar {
float: left;
width: 20%;
background-color: orange;
}
.content {
display: inline;
width: 33%;
background-color: orange;
float: right;
padding: 6px;
margin: 0px 0px 10px 10px;
}
.content span {
font-size: 20px;
font-weight: bold;
}
footer {
margin-top: 10px;
background-color: orange;
clear: both;
text-align: center;
}
728x90
반응형
'HTML > HTML 실습' 카테고리의 다른 글
| [HTML] 간단하게 페이지 작성하기 - 3 (0) | 2020.07.30 |
|---|---|
| [HTML] 간단하게 페이지 작성하기 - 1 (0) | 2020.07.29 |
