woowacourse · giantim · Mar 19, 2020 · Mar 21, 2020 · Mar 21, 2020
diff --git a/HTML/css/history.css b/HTML/css/history.css
@@ -0,0 +1,31 @@
+@charset "utf-8";
+
+@font-face {
+  font-family: "BMHANNAPro";
+  src: url(../ttf/BMHANNAPro.ttf);
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  font-family: BMHANNAPro;
+}
+
+h1 {
+  font-size: 50px;
+}
+
+li {
+  font-size: 30px;
+}
+
+p,
+a {
+  font-size: 25px;
+}
+
+.old-editor,
+.modern-editor {
+  float: left;
+}
diff --git a/HTML/css/intro.css b/HTML/css/intro.css
@@ -0,0 +1,11 @@
+@charset "utf-8";
+
+@font-face {
+  font-family: "BMHANNAPro";
+  src: url(../ttf/BMHANNAPro.ttf);
+}
+
+body {
+  font-family: BMHANNAPro;
+  font-size: 30px;
+}
diff --git a/HTML/css/main.css b/HTML/css/main.css
@@ -0,0 +1,61 @@
+@charset "utf-8";
+
+@font-face {
+  font-family: "BMHANNAPro";
+  src: url(../ttf/BMHANNAPro.ttf);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 1080px;
+  margin: 0 0 0 0;
+  font-family: BMHANNAPro;
+}
+
+header {
+  margin-top: 50px;
+}
+
+li {
+  list-style: none;
+}
+
+.header-title {
+  text-align: center;
+  font-size: 50px;
+}
+
+.header-line {
+  size: 5px;
+}
+
+.menu-bar ul li {
+  float: left;
+  width: 20%;
+  height: 100%;
+  line-height: 70px;
+  text-align: center;
+  background: black;
+  color: white;
+  font-size: 30px;
+}
+
+.menu-bar ul li a {
+  display: block;
+  text-decoration: none;
+  color: white;
+}
+
+.menu-bar ul li a:hover {
+  background: gray;
+  color: white;
+}
+
+#content {
+  height: 1080px;
+  width: 100%;
+}
diff --git a/HTML/css/question.css b/HTML/css/question.css
@@ -0,0 +1,31 @@
+@charset "utf-8";
+
+@font-face {
+  font-family: "BMHANNAPro";
+  src: url(../ttf/BMHANNAPro.ttf);
+}
+
+* {
+  font-family: BMHANNAPro;
+  font-size: 30px;
+}
+
+table {
+  width: 100%;
+  border: 1px solid #444444;
+}
+
+th,
+td {
+  border: 1px solid #444444;
+  height: 50px;
+}
+
+.table-index {
+  width: 100px;
+}
+
+textarea {
+  width: 600px;
+  height: 500px;
+}
diff --git a/HTML/css/quiz.css b/HTML/css/quiz.css
@@ -0,0 +1,25 @@
+@charset "utf-8";
+
+@font-face {
+  font-family: "BMHANNAPro";
+  src: url(../ttf/BMHANNAPro.ttf);
+}
+
+* {
+  font-family: BMHANNAPro;
+}
+
+h1 {
+  font-size: 40px;
+  text-align: center;
+}
+
+p {
+  font-size: 30px;
+}
+
+.button {
+  width: 55px;
+  height: 40px;
+  font-size: 20px;
+}
diff --git a/HTML/favicon.ico b/HTML/favicon.ico
diff --git a/HTML/history.html b/HTML/history.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="css/history.css" />
+  </head>
+
+  <body>
+    <h1>HTML의 역사</h1>
+    <ol>
+      <li>개발</li>
+      <p>
+        1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀
+        버너스리가 HTML의 원형인 인콰이어를 제안하였다.
+      </p>
+      <p>
+        1989년 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를
+        작성했다.
+      </p>
+      <p>
+        1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다.
+      </p>
+      <image src="image/Tim-Berners-Lee.jpg" width="200"></image>
+      <p>
+        <팀 버너스리>
+      </p>
+      <a href="http://info.cern.ch">Home of The First Web Site!</a>
+      <li>최초 규격</li>
+      <p>
+        HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서
+        문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
+      </p>
+      <p>
+        버너스리는 SGML 응용 프로그램이 되는 HTML을 고안해야 했고 그것은
+        공식적으로 IETF(국제 인터넷 표준화 기구)에 의하여 1993년 중반,
+      </p>
+      <p>HTML 규격에 대한 최초의 제안을 간행물로 정의했다.</p>
+      <li>웹 에디터의 진화</li>
+      <div class="old-editor">
+        <image src="image/worldwideweb.png" width="500"></image>
+        <p>과거의 웹 에디터</p>
+      </div>
+      <div class="modern-editor">
+        <image src="image/modernwebeditor.png" width="800"></image>
+        <p>현재의 웹 에디터</p>
+      </div>
+    </ol>
+  </body>
+</html>
diff --git a/HTML/image/Tim-Berners-Lee.jpg b/HTML/image/Tim-Berners-Lee.jpg
diff --git a/HTML/image/modernwebeditor.png b/HTML/image/modernwebeditor.png
diff --git a/HTML/image/worldwideweb.png b/HTML/image/worldwideweb.png
diff --git a/HTML/intro.html b/HTML/intro.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="css/intro.css" />
+  </head>
+
+  <body>
+    <div>
+      <p>우아한 테크코스 90년생 HTML 소개하기 미션입니다.</p>
+      <p>작성자 라빈</p>
+    </div>
+  </body>
+</html>
diff --git a/HTML/main.html b/HTML/main.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>90년생 HTML</title>
+    <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="css/main.css" />
+    <script type="text/javascript">
+      window.onload = function() {
+        introLoad();
+      };
+
+      function introLoad() {
+        document.getElementById("content").setAttribute("src", "intro.html");
+      }
+
+      function historyLoad() {
+        document.getElementById("content").setAttribute("src", "history.html");
+      }
+
+      function videoLoad() {
+        document.getElementById("content").setAttribute("src", "video.html");
+      }
+
+      function quizLoad() {
+        document.getElementById("content").setAttribute("src", "quiz.html");
+      }
+
+      function questionLoad() {
+        document.getElementById("content").setAttribute("src", "question.html");
+      }
+    </script>
+  </head>
+
+  <body>
+    <header>
+      <h1 class="header-title">90년생 HTML</h1>
+      <hr class="header-line" noshade />
+    </header>
+    <footer>
+      <div class="all">
+        <div class="menu-bar">
+          <ul>
+            <li><a onclick="introLoad()">소개</a></li>
+            <li><a onclick="historyLoad()">역사</a></li>
+            <li><a onclick="videoLoad()">준의 강의</a></li>
+            <li><a onclick="quizLoad()">퀴즈</a></li>
+            <li><a onclick="questionLoad()">질문 게시판</a></li>
+          </ul>
+        </div>
+        <iframe id="content"></iframe>>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/HTML/question.html b/HTML/question.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="css/question.css" />
+  </head>
+
+  <body>
+    <table>
+      <th class="table-index">번호</th>
+      <th>제목</th>
+      <tr>
+        <td>1</td>
+        <td>HTML을 공부하려는데 가이드 라인을 알려주세요.</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>HTML의 태그를 검색하는 유용한 사이트를 알려주세요.</td>
+      </tr>
+    </table>
+
+    <p>질문 등록</p>
+    <label>제목</label>
+    <input type="text" />
+    <br />
+    <label>내용</label>
+    <br />
+    <textarea></textarea>
+    <br />
+    <input type="button" value="등록" />
+  </body>
+</html>
diff --git a/HTML/quiz.html b/HTML/quiz.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="css/quiz.css" />
+    <script language="JavaScript">
+        var score = 0;
+        var meterValue = 0;
+
+        function scoreUp() {
+            score = score + 1;
+        }
+
+        function reset() {
+            history.go(0);
+        }
+
+        function calScore() {
+            if (score == 0) {
+                document.getElementById("show").value = 0;
+            } else {
+                meterValue = (score / 3) * 100;
+                document.getElementById("show").value = meterValue;
+            }
+        }
+    </script>
+</head>
+
+<body>
+    <h1>문 제</h1>
+    <hr noshade>
+    <br>
+    <p>1. HTML을 만든 사람은 누구일까요?</p>
+    <input type="radio">포비</input>
+    <input type="radio" onclick="scoreUp()">팀 버너스리</input>
+    <input type="radio">라빈</input>
+    <input type="radio">준</input>
+    <br>
+    <p>2. HTML을 개발한 사람이 속한 연구 기관은 어디일까요?</p>
+    <input type="radio">NASA</input>
+    <input type="radio" onclick="scoreUp()">CERN</input>
+    <input type="radio">WOOWAHANBRO</input>
+    <input type="radio">GOOGLE</input>
+    <br>
+    <p>3. 세계 최초의 웹 사이트의 주소는 무엇일까요?</p>
+    <input type="radio" onclick="scoreUp()">http://info.cern.ch</input>
+    <input type="radio">http://daum.net</input>
+    <input type="radio">http://woowabros.github.io</input>
+    <input type="radio">http://naver.com</input>
+    <br><br>
+    <input type="button" class="button" onclick="calScore()" value="채점"></input>
+    <input type="button" class="button" onclick="reset()" value="리셋"></input>
+    <meter id="show" min="0" max="100" value="0"></meter>
+</body>
+
+</html>
diff --git a/HTML/ttf/BMHANNAPro.ttf b/HTML/ttf/BMHANNAPro.ttf
diff --git a/HTML/video.html b/HTML/video.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <iframe
+      width="888"
+      height="500"
+      src="https://www.youtube.com/embed/rr6fZ2eg0KU"
+      frameborder="0"
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+    ></iframe>
+  </body>
+</html>