YebinK / html

우테코 크루들이 담아내는 90년생 HTML의 이야기 저장소

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🚀 미션: 90년생 HTML 소개하기

이번 미션의 주제는 바로 90년생 HTML을 주제로 웹페이지를 작성하는 것입니다. 작성방식은 자유입니다. 신문기사, 블로그, 위키백과 같은 사전 등 여러가지 형태로 남길 수도 있을텐데요. 본인이 원하는 형태로 작성해주시면 됩니다. 90년생 HTML의 이야기를 담아내면서 글, 링크, 사진, 동영상, 구독 메일 등을 담을 수 있을텐데요. 그 과정에서 필요한 HTML 태그들을 MDN 링크를 통해 직접 찾아보시길 바랍니다.


안내사항

  • 위 미션은 Repository에서 기존의 미션을 진행하던 방식과 동일하게 진행합니다.
  • PR을 보내면 @eastjun이 확인 후 merge할 예정입니다.
  • 마감기한은 2020년 3월 23월 월요일 23:59분 까지입니다.
  • 작성한 html은 @eastjun이 웹핸드북으로 제작하여 배포할 예정입니다. 예쁘게 만들 필요는 없지만 내용에 성의를 보여주세요 😀

요구사항

  • <html> <head> <title> <body> 태그를 반드시 포함한다.
  • <head> 태그 안에는 <meta charset="utf-8"> 를 삽입한다.
  • 위 5개의 태그를 제외하고 최소 10개 이상의 태그를 이용한다.
  • 1개 이상의 이미지 또는 비디오를 삽입한다.
  • 댓글을 작성하는 input 또는 textarea 태그를 사용한다. (실제 동작할 필요는 없음)
  • 자신이 사용한 태그들의 기능을 README.md에 작성한다.

추가로 작성한 태그

  • <link> : 외부 문서를 연결하는 태그로, 이번 미션에서는 css파일 연결과 favicon을 적용하는데에 사용했다.
  • <img> : 이미지를 삽입하는 태그로, src 속성으로 이미지 경로를 설정한다.
  • <input> : 사용자의 입력을 받는 태그로, type 속성을 통해 여러 형식의 입력을 받을 수 있다. placeholder 속성으로 안내문구를 추가할 수도 있다.
  • <button> : 버튼을 만드는 태그로, 항상 type 속성을 지정해 어떤 버튼인지 명시해줘야 한다.
  • <header> : (semantic tag) 페이지 상단 영역을 의미한다. 사이트의 로고, 검색창 등이 포함된다.
  • <nav> : (semantic tag) 페이지의 네비게이션 역할을 한다. 다른 페이지로의 링크들이 주로 모여있다.
  • <section> : (semantic tag) 주제별로 그룹화된 컨텐츠를 의미할 때 사용된다.
  • <div> : 레이아웃을 나누는 데에 주로 사용된다.
  • <table> : 표나 갤러리 등을 만들 수 있는 태그로, <th>, <tr>, <td> 처럼 제목, 행, 열을 나타내는 태그와 함께 쓰인다.
  • <svg> : 벡터 이미지를 만들 수 있는 태그이다. 사이즈가 늘어나도 깨지지 않고 매끄럽게 표현된다.

👏 Contributing

만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.

About

우테코 크루들이 담아내는 90년생 HTML의 이야기 저장소


Languages

Language:HTML 88.9%Language:CSS 11.1%