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

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

Dec 25, 2023

Contents

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

quiz-1.html


<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>연습문제 1</title>
	<style>
		.container {
			width: 500px;
			padding: 10px;
			border: 1px solid #ccc;
		}

		.subject {
			font-weight: 700;
			font-size: larger;
			line-height: 2.0;
			color: #ad3000;
		}
		/* 각 항목 줄 간격을 글자 크기의 2배로 지정, 글자색 수정 */

		li {
			list-style-type: none;
		}
		/* 순서 없는 목록 불릿 제거 */
	</style>
</head>

<body>
	<div class="container">
		<h1>최신 웹 디자인 트렌드</h1>
		<ul>
			<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
			<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
			<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
			<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
			<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
			<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
		</ul>
	</div>
</body>

</html>

result

quiz-2.html


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 2</title>
    <style>
			.container {
        width:300px;
        height:70px;     
        margin:0 auto;
        background-color:#444;        
      }    
      h1 {
        text-align: center;
        line-height: 70px;
        color: #fff;
        text-shadow: 3px 2px 5px #000;
      }
      /* 글자색 흰색 지정, 그림자 지정 */
    </style>
  </head>
  <body>
    <div class="container">
      <h1>웹 개발 기초</h1>
    </div>
  </body>
</html>

result

quiz-3.html


<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>연습문제 3</title>
  <style>
    table {
      caption-side: bottom;
      border-collapse: collapse;
    } /*  캡션 아래, 테두리 콜랩스 */

    td,
    th {
      border: 1px solid black;
      padding: 10px;
    } /* 셀에 테두리, 여백  */

    .heading {
      background-color: #eee;
    } /* 배경색 지정 클래스 */
  </style>
</head>

<body>
  <table border="1">
    <caption>2019 국민 독서실태</caption>
    <col class="heading">   <!-- 가상 칼럼 설정해서 일괄 적용 가능 -->
    <col>
    <col>
    <thead>
      <tr class="heading">
        <th>구분</th>
        <th>성인</th>
        <th>독서자</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>종이책</th>
        <td>6.1권</td>
        <td>11.8권</td>
      </tr>
      <tr>
        <th>전자책</th>
        <td>1.2권</td>
        <td>7.1권</td>
      </tr>
      <tr>
        <th>오디오북</th>
        <td>0.2권</td>
        <td>5.5권</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

result

quiz-4.html


<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>연습문제 4</title>
	<style>
		#container {
			/* 전체 콘텐츠를 감싸는 div */
			width: 650px;
			/* 너비 */
			margin: 0 auto;
			/* 가로로 중앙에 배치 */
			padding: 5px;
			/* 테두리와 내용 사이의 패딩 여백 */
		}

		#check {
			/* 텍스트 부분을 감싸는 div */
			width: 640px;
			/* 너비 - 그림 너비 값에 맞춤 */
			border: 1px solid #ccc;
			/* 테두리 */
		}

		h1 {
			color: white;
			/* 글자색 */
			font-size: 1em;
			/* 글자 크기 */
			background: #222;
			/* 배경색 */
			margin: 0;
			/* 제목과 다른 요소 간의 마진 여백 */
			padding: 10px;
			/* 테두리와 제목 텍스트 사이의 패딩 여백 */
		}

		h2 {
			color: #f00;
			font-size: 1.5em;
			text-align: center;
		}	/*	제목 스타일: 글자 색, 글자 크기, 정렬	*/

		p {
			font-size: 1.2em;
			line-height: 2em;
			font-weight: bold;
			text-align: center;
		}	/*본문 스타일: 글자 크기, 줄 간격, 굵기, 정렬	*/

		.accent{
			color: #0000ff;
		}	/* 글자 색 강조 클래스	*/

		.smalltext{
			font-size: 0.7em;
		}	/* 글자 크기 축소 클래스	*/
	</style>
</head>

<body>
	<div id="container">
		<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
		<div id="check">
			<h1>확인하세요</h1>
			<h2>주문 및 배송</h2>
			<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
				2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
			<hr>
			<h2>교환 및 환불</h2>
			<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
				고객센터로 전화주세요</p>
			<hr>
			<h2>고객센터 </h2>
			<p>0000-0000<br>
				<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span>
			</p>
		</div>
	</div>
</body>

</html>

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

quiz-1.html

result

quiz-2.html

result

quiz-3.html

result

quiz-4.html

result

More articles

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

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

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

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