Web/Basic
HTML+CSS+자바스크립트 웹 표준의 정석 8장 마무리 문제
poopooreum
2024. 7. 2. 21:35
반응형
✏️ 8장 마무리 문제 - 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>8-1 마무리 문제</title>
<style>
body {
width: 350px;
margin: 30px auto;
}
img {
border: 1px solid #ccc;
border-radius: 50%;
box-shadow: 5px 5px 30px 2px #000;
}
</style>
</head>
<body>
<div id="container">
<img src="images/bear.jpg" alt="곰인형 사진" />
</div>
</body>
</html>✏️ 8장 마무리 문제 - 2번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>8-2 마무리 문제</title>
<style>
section {
width: 800px;
margin: 0 auto;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1em;
}
article {
width: 350px;
height: 200px;
margin: 10px;
padding: 10px;
float: left;
border: 1px solid #ccc;
}
footer {
clear: left;
width: 100%;
height: 50px;
background-color: black;
}
footer > p {
color: white;
text-align: center;
line-height: 50px;
font-size: 0.9em;
}
</style>
</head>
<body>
<h2>강아지 용품 준비하기</h2>
<section>
<article>
<h3>강아지 집</h3>
<p>
강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은
강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실
때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고
고르시는 것이 좋습니다.
</p>
</article>
<article>
<h3>강아지 먹이</h3>
<p>
강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요.
강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서
강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는
음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이
매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.
</p>
</article>
<article>
<h3>밥그릇, 물병</h3>
<p>
밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이
달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두
젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을
마련하시는 것이 좋습니다.
</p>
</article>
<article>
<h3>이름표, 목줄</h3>
<p>
강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에
걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는
신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한
강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.
</p>
</article>
<footer>
<p>boxmodel 연습하기</p>
</footer>
</section>
</body>
</html>✏️ 8장 마무리 문제 - 3번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>8-3 마무리 문제</title>
<style>
ul {
list-style: none;
}
ul li {
float: left;
}
a {
display: block;
padding: 10px 20px;
background-color: #ccc;
}
a:link,
a:visited {
color: black;
text-decoration: none;
}
a:hover {
background-color: black;
color: #fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>
</body>
</html>반응형