Front-end/Basic
HTML+CSS+자바스크립트 웹 표준의 정석 9장 마무리 문제
poopooreum
2024. 7. 2. 21:37
반응형
✏️ 9장 마무리 문제 - 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>9-1 마무리 문제</title>
<style>
body {
color: white;
background: url("images/bg1.jpg") repeat-x left bottom fixed;
background-color: gray;
}
h1 {
margin-top: 50px;
font-size: 20px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개</h1>
<p>
그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는
시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할
수 있는 웹 디자인 방법을 알아야 한다. 바로
<b>코딩을 이용한 웹 디자인</b>이다.
</p>
</body>
</html>✏️ 9장 마무리 문제 - 2번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>9-2 마무리 문제</title>
<style>
.container {
width: 500px;
padding: 10px;
border: 1px solid #ccc;
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개</h1>
<p>
그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는
시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할
수 있는 웹 디자인 방법을 알아야 한다. 바로
<b>코딩을 이용한 웹 디자인</b>이다.
</p>
</div>
</body>
</html>✏️ 9장 마무리 문제 - 3번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>9-3 마무리 문제</title>
<style>
body {
background-color: #02233b;
}
#container {
margin: 0 auto;
width: 600px;
height: 700px;
border: 1px dotted gray;
padding: 20px;
background: #fff url("images/mic.png") no-repeat right bottom fixed;
}
img {
margin: 30px 10px 30px 180px;
}
h1 {
color: #fff;
background-color: #004344;
text-align: center;
padding: 20px;
}
h2 {
font-style: italic;
text-align: center;
margin-bottom: 50px;
}
h3 {
color: red;
}
ul {
list-style: none;
margin: 20px;
}
li {
line-height: 30px;
}
</style>
</head>
<body>
<div id="container">
<h1>대학언론사 수습기자 모집</h1>
<h2>신입생 여러분을 기다립니다</h2>
<h3>모집분야</h3>
<ul>
<li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
<li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
<li>엔지니어(0명) : 라디오 방송 녹음 및 ㅁ편집/li></li>
</ul>
<h3>혜택</h3>
<ul>
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ul>
</div>
</body>
</html>반응형