ulgoon/index.html

## index.html
<!doctype html>
<html>
  <!-- 문서정의를 위한 head -->
  <head>
      <!-- 문자 인코딩 설정, 화면영역 설정, 문서제목 설정 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>나의 첫 HTML 페이지</title>

    <!-- CSS 수업 파트 -->
    <style>
      strong {
  font-weight: normal;
}

em {
  font-style: normal;
}

.main-title {
  color:gray;
  letter-spacing:-0.15em;
}

#link-wrapper {
  background-color: #8877aa;
}

td {
  font-size: 9px;
  font-weight: 800;
  background-color: lightgray;
  padding: 5px;
  text-align: right;
}

p {
  line-height: 1.6em;
  word-spacing: 0.1em;
}

h1 {
  letter-spacing: -0.2em;
}
    </style>

      <!-- js 수업 코드 -->
    <script>
      // function
      function sayHello(name){
        return '안녕, ' + name + '야!';
      }
      function aweSum(num1, num2){
        var result = num1 + num2 + 2;
        return result;
      }
      function orbVolume(radius){
        var pi = 3.14;
        var result = 4/3 * pi * radius ** 3;
        return result;
      }
 // 조건문
      if (wallet<5000){
  console.log('Go to Hansot');
} else if (wallet<50000){
  console.log('Go to Pizzahut');
} else if (wallet<30000){
  console.log('Have some guk-bab');
} else {
  console.log('Go to Hotel buffet');
}
      // 문서에서 어떤 요소에 접근해 텍스트 값을 선택하여 원하는 정보(숫자)로 변환하기
      var itemPrice = Number(document.getElementsByClassName('price_real')[0].innerText.replace('원','').replace(',',''))
    </script>
  </head>
  <body>
    <div id="top">
        <!-- 이미지 만들기 -->
      <img src="https://images.pexels.com/photos/6446683/pexels-photo-6446683.jpeg" width="320">

    </div>
    <h1 class="main-title">행운의 편지</h1>
    <p>이 편지는 1950년 영국에서 시작되어, <span style="color:red; letter-spacing:1.2em;">전세계</span>를 <b>여행</b>하고, <strong>당신</strong>에게 전달되었습니다. <i>일주일</i>안에 7통을 <em>복사</em>하여 여러분의 지인에게 보내세요. 그렇지 않으면..</p>
        <!-- 링크 만들기 -->
    <div id="link-wrapper">
      <a href="https://www.google.com">Google로 이동하기</a>
      <a href="/guestbook">방명록가기</a>
      <a href="/">홈으로 가기</a>
      <a href="#top">맨 위로 가기</a>
      <a href="#bottom">맨 아래로 가기</a>
    </div>

    <h3>전국 7월 일별 확진자 현황</h3>
      <!-- 데이터 표현을 위한 테이블  -->
    <table>
      <thead>
        <th>날짜</th>
        <th>확진자 수</th>
      </thead>
      <tbody>
        <tr>
          <td>8일</td>
          <td>1316</td>
        </tr>
        <tr>
          <td>9일</td>
          <td>1378</td>
        </tr>
        <tr>
          <td>10일</td>
          <td>1324</td>
        </tr>
        <tr>
          <td>11일</td>
          <td>1100</td>
        </tr>
        <tr>
          <td>12일</td>
          <td>1150</td>
        </tr>
        <tr>
          <td>13일</td>
          <td>1615</td>
        </tr>
        <tr>
          <td>14일</td>
          <td>1600</td>
        </tr>
      </tbody>
    </table>

      <!-- 아이템 나열하기 -->
    <h3>승인된 백신 종류</h3>
    <ul>
      <li>아스트라제네카</li>
      <li>화이자</li>
      <li>모더나</li>
      <li>시노벡</li>
      <li>노바벡스</li>
      <li>스푸트니크</li>
    </ul>

    <h3>좀이따 먹고싶은 음식 순위 Top3</h3>
    <ol type="1" start="11" reversed>
      <li>soylent</li>
      <li>Redbull</li>
      <li>mango</li>
    </ol>


      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
    <div id="bottom"></div>

  </body>
</html>
	<!doctype html>
	<html>
	<!-- 문서정의를 위한 head -->
	<head>
	<!-- 문자 인코딩 설정, 화면영역 설정, 문서제목 설정 -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>나의 첫 HTML 페이지</title>

	<!-- CSS 수업 파트 -->
	<style>
	strong {
	font-weight: normal;
	}

	em {
	font-style: normal;
	}

	.main-title {
	color:gray;
	letter-spacing:-0.15em;
	}

	#link-wrapper {
	background-color: #8877aa;
	}

	td {
	font-size: 9px;
	font-weight: 800;
	background-color: lightgray;
	padding: 5px;
	text-align: right;
	}

	p {
	line-height: 1.6em;
	word-spacing: 0.1em;
	}

	h1 {
	letter-spacing: -0.2em;
	}
	</style>

	<!-- js 수업 코드 -->
	<script>
	// function
	function sayHello(name){
	return '안녕, ' + name + '야!';
	}
	function aweSum(num1, num2){
	var result = num1 + num2 + 2;
	return result;
	}
	function orbVolume(radius){
	var pi = 3.14;
	var result = 4/3 * pi * radius ** 3;
	return result;
	}
	// 조건문
	if (wallet<5000){
	console.log('Go to Hansot');
	} else if (wallet<50000){
	console.log('Go to Pizzahut');
	} else if (wallet<30000){
	console.log('Have some guk-bab');
	} else {
	console.log('Go to Hotel buffet');
	}
	// 문서에서 어떤 요소에 접근해 텍스트 값을 선택하여 원하는 정보(숫자)로 변환하기
	var itemPrice = Number(document.getElementsByClassName('price_real')[0].innerText.replace('원','').replace(',',''))
	</script>
	</head>
	<body>
	<div id="top">
	<!-- 이미지 만들기 -->
	<img src="https://images.pexels.com/photos/6446683/pexels-photo-6446683.jpeg" width="320">

	</div>
	<h1 class="main-title">행운의 편지</h1>
	<p>이 편지는 1950년 영국에서 시작되어, <span style="color:red; letter-spacing:1.2em;">전세계</span>를 <b>여행</b>하고, <strong>당신</strong>에게 전달되었습니다. <i>일주일</i>안에 7통을 <em>복사</em>하여 여러분의 지인에게 보내세요. 그렇지 않으면..</p>
	<!-- 링크 만들기 -->
	<div id="link-wrapper">
	<a href="https://www.google.com">Google로 이동하기</a>
	<a href="/guestbook">방명록가기</a>
	<a href="/">홈으로 가기</a>
	<a href="#top">맨 위로 가기</a>
	<a href="#bottom">맨 아래로 가기</a>
	</div>

	<h3>전국 7월 일별 확진자 현황</h3>
	<!-- 데이터 표현을 위한 테이블 -->
	<table>
	<thead>
	<th>날짜</th>
	<th>확진자 수</th>
	</thead>
	<tbody>
	<tr>
	<td>8일</td>
	<td>1316</td>
	</tr>
	<tr>
	<td>9일</td>
	<td>1378</td>
	</tr>
	<tr>
	<td>10일</td>
	<td>1324</td>
	</tr>
	<tr>
	<td>11일</td>
	<td>1100</td>
	</tr>
	<tr>
	<td>12일</td>
	<td>1150</td>
	</tr>
	<tr>
	<td>13일</td>
	<td>1615</td>
	</tr>
	<tr>
	<td>14일</td>
	<td>1600</td>
	</tr>
	</tbody>
	</table>

	<!-- 아이템 나열하기 -->
	<h3>승인된 백신 종류</h3>
	<ul>
	<li>아스트라제네카</li>
	<li>화이자</li>
	<li>모더나</li>
	<li>시노벡</li>
	<li>노바벡스</li>
	<li>스푸트니크</li>
	</ul>

	<h3>좀이따 먹고싶은 음식 순위 Top3</h3>
	<ol type="1" start="11" reversed>
	<li>soylent</li>
	<li>Redbull</li>
	<li>mango</li>
	</ol>


	<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
	<div id="bottom"></div>

	</body>
	</html>