Q1. 아래의 이미지대로 구현하시오.
A.
- HTML 답
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="layoutTest.css">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
<footer>Copyright © W3Schools.com</footer> // © = copy 마크
</div>
</body>
</html>- CSS 답
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
Q2. 아래의 이미지대로 구현하시오.
A.
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 10px;
padding: 10px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<h2>Resize this responsive page!</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
<div class="city">
<h2>New York</h2>
<p>The City of New York is the most populous city in the United States.</p>
<p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
</div>
</body>
</html>
728x90
'Web > CSS' 카테고리의 다른 글
| [필기정리] Day39 - CSS 문제 및 해답 (0) | 2020.08.04 |
|---|---|
| [필기정리] Day39 - float, shadow, gradient 등 (0) | 2020.08.04 |
| [필기정리] Day38 - CSS 선택자, overflow, position 등 (0) | 2020.08.03 |
| [필기정리] Day37 - CSS 문제 및 해답 (0) | 2020.07.31 |
| [필기정리] Day37 - 색상표현단위, 박스속성 등 (0) | 2020.07.31 |