[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 9장 연습문제

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 9장 연습문제 3개

Dec 25, 2023

Contents

quiz-1.html result quiz-2.html result quiz-3.html result

quiz-1.html


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>
  <style>      
	  h1 {
      margin-top:50px;
		  font-size: 20px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
		}
		body{
			color: white;
			background: url(images/bg1.jpg) repeat-x left bottom fixed;
			background-color: grey;
		}
		/* 배경색 회색으로, 배경 이미지는 웹브라우저의 아래에서 가로로 가득 차게 반복, 고정 */
  </style>
</head>
 <body>
	<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
	<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>					
 </body>
</html>

result

quiz-2.html


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UFT-8">
  <title>연습문제 2</title>
  <style>
		.container {
			width:500px;
			padding:10px;
			border:1px solid #ccc;
			background: rgb(0, 0, 0);
			color: rgb(255, 255, 255);
		}
		/* container 요소의 배경색, 글자색 rgb값으로 변경 */
		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>

result

quiz-3.html


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">    
  <title>연습문제 3</title>
  <style>   
		body{
			background: #02233b;
		}
		/* 문서 전체의 배경색 지정 */
		#container{
			margin:0 auto;	
			width:600px;
			height:700px;
			border:1px dotted gray;
			padding:20px;
			background: white;
			background-image: url(images/mic.png);
			background-repeat: no-repeat;
			background-position: right bottom;
		}
		/* container의 배경색, 배경 이미지, 반복, 위치 지정 */
		img {	
			margin:30px 10px 30px 180px;
		}
		h1 {
			text-align:center;
			padding:20px;
			background: #004344;
			color: white;
		}
		/* 배경색 지정, 글자색 변경 */
		h2 {
			text-align:center;
			font-style:italic;
			margin-bottom:50px;
		}
		h3 {
			color:#cf3b00;
		}
		ul{
			margin:20px;
      list-style-type:none;
		}	      
		li {
			line-height:30px;
		}
  </style>
</head>
<body>
  <div id="container">
    <h1>대학언론사 수습기자 모집</h1>
    <h2>신입생 여러분을 기다립니다</h2>
    <article>
      <h3>모집분야</h3>
      <ul>
        <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
        <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
        <li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
      </ul>
      <h3>혜택</h3>
      <ul>
        <li>수습기자 활동 중 소정의 활동비 지급</li>
        <li>정기자로 진급하면 장학금 지급</li>
      </ul>
    </article>
  </div>
</body>
</html>