1. HTML5 개요
HTML은 HyperText Markup Language의 약자이다. 웹 페이지는 HTML 문서라고도 불린다.
W3C는 World Wide Web Consortium의 약자이다.
이는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관이다.
웹 상에서 콘텐츠를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.
또한 다음과 같은 사항을 모두 문법적으로 유연하게 허용한다.
- 태그 이름에 대문자 사용
- 속성값에 따옴표 생략
- 속성값 생략
- 빈 태그의 종료 태그(/) 생략
2. HTML5 핵심 실습
https://www.youtube.com/watch?v=rgI930gqdaY
< 이 영상을 참고하였습니다. >
<!DOCTYPE html>
<html lang="en">
<!-- head에는 웹 사이트에 대한 정보 및 외부 자료 참조(CSS, JS)가 들어간다 -->
<head>
<meta charset="UTF-8">
<title>나의 웹사이트</title>
</head>
<!-- 실제 화면에 대한 내용은 body tag에 들어간다.-->
<body>
<div style="display: flex;"></div> <!--이 내부는 가로로 또 나뉨-->
<h1>첫 번째 블록</h1>
<h1>H1, 가장 상위 제목</h1>
<h2>H6, 가장 하위 제목</h2>
<p>문단을 집어넣는 태그 p,
여러 문단도
한번에
집어넣을 수 있다.(IDE상에서)
<strong>실제로 줄 바꿈을 하려면<br /></strong>
br/ 태그를 넣어줘야 한다.
</p>
<input type="text" style="width: 500px; height: 200px; font-size: 22px;">
<!-- input태그는 내용이 없기때문에 닫을 필요가 없다.
다시말해 내용이 없는 태그는 닫을 필요가 없다. 내용을 넣으면 닫아줘야됨-->
<div>
<button style="width: 100px; height: 30px;">버튼</button>
</div>
<div>
<button style="width: 100px; height: 30px;">버튼2</button>
<button style="width: 100px; height: 30px;">버튼3</button>
</div>
<!-- div 태그 사용시 웹페이지 상에서 div 내부와 외부를 구분해준다.-->
<div>
<h1>두 번째 블록</h1>
<!-- a태그는 다른 웹사이트로 가는 링크를 걸어주는 태그다.-->
<img src=""
alt="google Logo"><br />
<a href="https://www.google.com"> https://www.google.com 구글로 이동 </a>
<!-- img의 alt는 이미지불러오기 실패시 나타낼 문구
ul과 li은 리스트 표시, ul은 앞에 점, ol은 앞에 숫자
-->
<ul style="font-size: 25px">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol style="font-size: 25px">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<!-- table은 표를 만들 때 사용, 첫 번째 tr에는 colname, 두 번째 부터는 data 입력-->
<div>
<table summary="테이블" style="width: 1000px; height: 250px;">
<caption>테이블 이름</caption>
<tr>
<td>이름</td>
<td>나이</td>
<td>학교</td>
</tr>
<tr>
<td>철수</td>
<td>24</td>
<td>인하대학교</td>
</tr>
<tr>
<td>영희</td>
<td>25</td>
<td>한국과학기술원</td>
</tr>
<tr>
<td>영민</td>
<td>26</td>
<td>서울대학교</td>
</tr>
</table>
</div>
</div>
<div>
<h1>세 번째 블록</h1>
<!-- form 태크는 여러 태그를 묶어서 하나의 폼으로 제출해야 할 때
type이 password인 경우 입력한 글자가 보이지 않는다.-->
<form>
<div><input type="text"></div>
<div><input type="email"></div>
<div><input type="password"></div>
<div><input type="date"></div>
<div><input type="checkbox">체크박스</div></input>
<select name = "coffee">
<option value="1">아메리카노</option>
<option value="2">카페라떼</option>
<option value="3">에스프레소</option>
<!-- 내용이 웹페이지에 보이고 전송할 땐 value가 전송됨-->
</select>
<div>
<button type="submit" style="font-size: 30px; width: 60px; height: 30px"></button>
</div>
</form>
</div>
</body>
</html>가장 상단 <!DOCTYPE html>부터 시작하여 html태그로 선언된 html문서는 크게 head 와 body 부분으로 나뉜다.
head 는 웹사이트에 대한 정보 및 외부자료(CSS, JS)의 레퍼런스가 들어간다.
body 에는 실제 화면에 대한 내용이 들어간다.
각 태그에는 내부에 내용(문자열)이 들어갈 시 반드시 닫아주는 태그를 사용해야한다. 반대로, 태그 속에 내용이 들어가지 않으면 닫는 태그를 사용하지 않아도 된다.
- 각종 태그에 대한 설명
- *각 태그의 하위 리스트는 각각의 파라미터?를 의미
- div : 웹 페이지 상 구역 분리
- h1~h6 : 글자 크기(제목1 ~ 제목6)
- strong : 강조
- p : IDE상 여러 줄의 코드를 삽입하게 해주는 태그
- br : 줄바꿈 태그(닫는 태그 필요 X)
- input : 지정한 type의 정보를 입력받을 수 있는 태그, 내용이 없다면 닫는 태그 필요 X
- input type에는 text, email, password, date, checkbox등이 있고 각각 직관적이고 고유한 기능을 가진다.
- button : 버튼
- button type을 submit으로 지정시 이를 클릭했을 때 로그인 창의 로그인 처럼 작동.
- img : 이미지를 받는 태그
- src : url입력
- alt : 이미지를 불러오지 못할 시 대신 할(alternative) 내용
- ul : 리스트를 만들어주는 태그, 이 줄처럼 맨 앞 점을 찍어줌
- ol : 리스트를 만들어주는 태그, 각 줄의 맨 앞에 1에서부터 오름차순으로 증가하는 숫자를 찍어줌
- li : 리스트 요소
- table : 표를 만들어주는 태그
- tr : 첫 번째 tr태그는 column list를 의미, 이후의 tr태그는 각 행(정보)를 의미
- td : tr태그 속 정보들을 열 단위로 구분해주는 태그
- form : 여러 태그(정보)를 하나로 묶어서 전달해야 할 때
- select : 해당 칸에 선택할 수 있는 리스트를 제공
- option : 선택할 수 있는 리스트의 세부 요소, 내용에 해당하는 걸 누르고 이를 제출(전달) 시 value에 해당하는 값을 전달해준다.
- select : 해당 칸에 선택할 수 있는 리스트를 제공
3. 참조
http://www.tcpschool.com/html/html5_intro_intro