Front-end/Basic
HTML+CSS+자바스크립트 웹 표준의 정석 6장 마무리 문제
poopooreum
2024. 7. 2. 21:32
반응형
✏️ 6장 마무리 문제 - 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>6-1 마무리 문제</title>
<link rel="stylesheet" href="css/style1.css" />
</head>
<body>
<h1>웹 기술 - 기본</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript 기초</li>
</ul>
</body>
</html>
<!-- css 파일 -->
h1 {
background: black;
color: white;
padding: 10px;
display: inline-block;
font-size: 1.4em;
}
ul {
list-style: none;
}
li {
color: blue;
line-height: 1.5;
font-size: 1.2em;
}✏️ 6장 마무리 문제 - 2번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>6-2 마무리 문제</title>
<style>
#container {
width: 600px;
margin: 20px auto;
}
h1 {
display: inline-block;
background-color: #0404aa;
color: #fff;
}
.accent {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div id="container">
<h1>탐라국 입춘굿</h1>
<p>
제주도의 문화축제 중에서 유일하게<span class="accent">
탐라 시대부터 내려온 축제</span
>이다.
</p>
<p>
제주에서 입춘은 새철<sup>(제주어,샛절)</sup>드는 날이라 한다.<br />
하늘의 1만 8,000 신이 지상으로 내려와 새해 일들을 시작하는 때다.
</p>
</div>
</body>
</html>반응형