diff --git a/HTML/css/history.css b/HTML/css/history.css new file mode 100644 index 0000000..44d7726 --- /dev/null +++ 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 new file mode 100644 index 0000000..0161eb8 --- /dev/null +++ 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 new file mode 100644 index 0000000..51bf820 --- /dev/null +++ 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 new file mode 100644 index 0000000..9135442 --- /dev/null +++ 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 new file mode 100644 index 0000000..2cb7a6f --- /dev/null +++ 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 new file mode 100644 index 0000000..f9feb9a Binary files /dev/null and b/HTML/favicon.ico differ diff --git a/HTML/history.html b/HTML/history.html new file mode 100644 index 0000000..f2266c9 --- /dev/null +++ b/HTML/history.html @@ -0,0 +1,49 @@ + + + + + + + + +

HTML의 역사

+
    +
  1. 개발
    2. +

    + 1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 + 버너스리가 HTML의 원형인 인콰이어를 제안하였다. +

    +

    + 1989년 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 + 작성했다. +

    +

    + 1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. +

    + +

    + <팀 버너스리> +

    + Home of The First Web Site! +
  2. 최초 규격
    3. +

    + HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 + 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다. +

    +

    + 버너스리는 SGML 응용 프로그램이 되는 HTML을 고안해야 했고 그것은 + 공식적으로 IETF(국제 인터넷 표준화 기구)에 의하여 1993년 중반, +

    +

    HTML 규격에 대한 최초의 제안을 간행물로 정의했다.

    +
  3. 웹 에디터의 진화
    4. +
    + +

    과거의 웹 에디터

    +
    +
    + +

    현재의 웹 에디터

    +
    +
+ + diff --git a/HTML/image/Tim-Berners-Lee.jpg b/HTML/image/Tim-Berners-Lee.jpg new file mode 100644 index 0000000..534b682 Binary files /dev/null and b/HTML/image/Tim-Berners-Lee.jpg differ diff --git a/HTML/image/modernwebeditor.png b/HTML/image/modernwebeditor.png new file mode 100644 index 0000000..68dfae9 Binary files /dev/null and b/HTML/image/modernwebeditor.png differ diff --git a/HTML/image/worldwideweb.png b/HTML/image/worldwideweb.png new file mode 100644 index 0000000..0228b8f Binary files /dev/null and b/HTML/image/worldwideweb.png differ diff --git a/HTML/intro.html b/HTML/intro.html new file mode 100644 index 0000000..713eaa2 --- /dev/null +++ b/HTML/intro.html @@ -0,0 +1,14 @@ + + + + + + + + +
+

우아한 테크코스 90년생 HTML 소개하기 미션입니다.

+

작성자 라빈

+
+ + diff --git a/HTML/main.html b/HTML/main.html new file mode 100644 index 0000000..acbd349 --- /dev/null +++ b/HTML/main.html @@ -0,0 +1,55 @@ + + + + + 90년생 HTML + + + + + + +
+

90년생 HTML

+
+
+ + + diff --git a/HTML/question.html b/HTML/question.html new file mode 100644 index 0000000..a60b0bd --- /dev/null +++ b/HTML/question.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + +
번호제목
1HTML을 공부하려는데 가이드 라인을 알려주세요.
2HTML의 태그를 검색하는 유용한 사이트를 알려주세요.
+ +

질문 등록

+ + +
+ +
+ +
+ + + diff --git a/HTML/quiz.html b/HTML/quiz.html new file mode 100644 index 0000000..8d53714 --- /dev/null +++ b/HTML/quiz.html @@ -0,0 +1,57 @@ + + + + + + + + + + +

문 제

+
+
+

1. HTML을 만든 사람은 누구일까요?

+ 포비 + 팀 버너스리 + 라빈 + 준 +
+

2. HTML을 개발한 사람이 속한 연구 기관은 어디일까요?

+ NASA + CERN + WOOWAHANBRO + GOOGLE +
+

3. 세계 최초의 웹 사이트의 주소는 무엇일까요?

+ http://info.cern.ch + http://daum.net + http://woowabros.github.io + http://naver.com +

+ + + + + + \ No newline at end of file diff --git a/HTML/ttf/BMHANNAPro.ttf b/HTML/ttf/BMHANNAPro.ttf new file mode 100644 index 0000000..a9cb718 Binary files /dev/null and b/HTML/ttf/BMHANNAPro.ttf differ diff --git a/HTML/video.html b/HTML/video.html new file mode 100644 index 0000000..f771720 --- /dev/null +++ b/HTML/video.html @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/README.md b/README.md index 8bdeaaf..a9d5f23 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,8 @@ - ## 🚀 미션: 90년생 HTML 소개하기 이번 미션의 주제는 바로 90년생 HTML을 주제로 웹페이지를 작성하는 것입니다. -작성방식은 자유입니다. -신문기사, 블로그, 위키백과 같은 사전 등 여러가지 형태로 남길 수도 있을텐데요. 본인이 원하는 형태로 작성해주시면 됩니다. +작성방식은 자유입니다. +신문기사, 블로그, 위키백과 같은 사전 등 여러가지 형태로 남길 수도 있을텐데요. 본인이 원하는 형태로 작성해주시면 됩니다. 90년생 HTML의 이야기를 담아내면서 글, 링크, 사진, 동영상, 구독 메일 등을 담을 수 있을텐데요. 그 과정에서 필요한 HTML 태그들을 [MDN](https://developer.mozilla.org/ko/docs/Web/HTML/Element) 링크를 통해 직접 찾아보시길 바랍니다. @@ -15,21 +14,71 @@ - 위 미션은 [Repository](https://github.com/woowacourse/html)에서 기존의 미션을 진행하던 방식과 동일하게 진행합니다. - PR을 보내면 **@eastjun**이 확인 후 merge할 예정입니다. - 마감기한은 **2020년 3월 23월 월요일 23:59분** 까지입니다. -- 작성한 html은 **@eastjun**이 웹핸드북으로 제작하여 배포할 예정입니다. 예쁘게 만들 필요는 없지만 내용에 성의를 보여주세요 😀 +- 작성한 html은 **@eastjun**이 웹핸드북으로 제작하여 배포할 예정입니다. 예쁘게 만들 필요는 없지만 내용에 성의를 보여주세요 😀
-## 요구사항 +## 요구사항 -- [ ] `` `` `` `<body>` 태그를 반드시 포함한다. -- [ ] `<head>` 태그 안에는 `<meta charset="utf-8">` 를 삽입한다. -- [ ] 위 5개의 태그를 제외하고 최소 10개 이상의 태그를 이용한다. -- [ ] 1개 이상의 이미지 또는 비디오를 삽입한다. -- [ ] 댓글을 작성하는 `input` 또는 `textarea` 태그를 사용한다. (실제 동작할 필요는 없음) -- [ ] 자신이 사용한 태그들의 기능을 README.md에 작성한다. +- [ ] `<html>` `<head>` `<title>` `<body>` 태그를 반드시 포함한다. +- [ ] `<head>` 태그 안에는 `<meta charset="utf-8">` 를 삽입한다. +- [ ] 위 5개의 태그를 제외하고 최소 10개 이상의 태그를 이용한다. +- [ ] 1개 이상의 이미지 또는 비디오를 삽입한다. +- [ ] 댓글을 작성하는 `input` 또는 `textarea` 태그를 사용한다. (실제 동작할 필요는 없음) +- [ ] 자신이 사용한 태그들의 기능을 README.md에 작성한다. <br/> ## 👏 Contributing -만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요. +만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요. + +## 사용한 태그 설명 + +- link + - css, favicon 등을 적용할 때 사용하는 태그 + +- div + - 페이지의 구역을 나누는 태그 + +- ul + - 순서를 표시하지 않는 리스트를 만드는 태그 + +- ol + - 순서를 표시하는 리스트를 만드는 태그 + +- li + - ul, ol 의 리스트 안의 아이템을 넣는 태그 + +- header + - 웹 문서의 본문 중 가장 상단의 내용 + +- footer + - 웹 문서의 본문 중 가장 하단의 내용 + +- a + - 하이퍼링크를 정의하는 태그 + +- iframe + - html, 이미지, 동영상 등을 출력하는 태그 + +- table + - 표를 만드는 태그 + +- th, tr, td + - 표의 내용을 구성하는 태그 + +- p + - 문단을 써주는 태그 + +- br + - 개행 문자를 삽입해주는 태그 + +- label + - 요소들에 레이블을 달아주는 태그 + +- meter + - 스칼라 값을 측정해 범위로 표현해주는 태그 + +- script + - 클라이언트측 스크립트를 정의하고 src 속성을 통해 외부 스크립트 파일을 가르키는 태그