HTML5
Semantic markup
HTML5 = HTML + CSS3 + JavaScript
- 컴퓨터가 웹상의 정보의 의미를 이해할 수 있도록, 문서를 논리적인 구조로 작성하는것- 구조와 내용(컨텐츠)을 완전히 분리함으로써, 검색시, 정확하게 분류될 수 있게 함
참고 사이트: http://www.w3schools.com/html/html5_semantic_elements.asp
전체 구조:
1.<!DOCTYPE>: 어떤 HTML버전을 쓸것이에 대한 정의
2.<header>: 브라우저에서는 랜더링 되지 않는 스크립트나 메타데이타 포함시킴
3.<body>: 브라우저에서 랜더링 되어 사용자가 볼수있는 요소를 포함시킴
e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /> -end tag가 없으므로 '/'를 붙임
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
HTML를 이루는 3가지 중요 구성요소
1.태그(Tag) - 괄호<>안에 들어가는 요소들
브라우저에게 어떤 타입의 html요소인지 알려줌
2.속성(Atrribute) - 태그안에서 기능을 추가하고 싶을때, value와 함께 작성
3.컨텐츠(Content) - 태그 안에 들어가는 내용물
e.g.
<p align="left">내용</p>
<p> : tag
align="left" : attribute="값"
내용: content
▶ Head Elements
1.<title>: 브라우저에 제목에 나타남, 즐겨찾기나 검색엔진에서 이것으로 찾을수 있음.
2.<meta>: 문자 종류, 검색엔진에서 웹페이지의 목적을 찾아낼때, 혹은 키워드를 찾을때, 브라우저가 웹페이지를 일정한 시간마다 새로고침을 하게 만들때 등.. 유용하게 쓸 수 있음.
e.g.
<meta charset="UTF-8">
<meta name="keywords" content="HTML5, CSS3, jQuery, JavaScript">
<meta http-equiv="refresh" content="300"> (60초마다 새로고침)
3.<style>: css코드를 직접 혹은 파일을 링크해 추가할때 사용함.
e.g.
<style type="text/css">내용</style>
4.<script>: javaScript코드 작성, javaScript 파일을 링크해 추가할때 사용.
5.<noscript>: 스크립트를 사용할수 없게 한 브라우저에 경고메세지나, 대신할수 있는 것을 작성할때 사용.
e.g.
<head>
<script src="파일명.js"></script>
<noscript>
<h2>귀하의 브라우저는 자바스크립트를 사용할 수 없으므로
웹페이지의 작동이 제대로 되지 않을 수 있습니다.</h2>
</noscript>
</head>
6.<link>: css파일을 따로 저장했을 경우, 현 페이지에 연결할때 사용
css파일연결:
<link rel="stylesheet" type="text/css" href="링크주소" />
▶ Body Elements
body요소에 포함되는 3가지 중요속성
1.id: 한 요소에 한번 사용됨 (unique해야함)- css/javaScript가 사용 가능하게 함.
2.class: 여러요소들에 한번에 정의할때 사용됨.
3.style: html코드에 바로 css 스타일을 적용하는 것 (되도록 사용하지 않는게 좋음)
e.g.
<div id="d1">
<p id="divHead" class="heading">Head1</p>
<p id="divContent" class='content">Content1</p>
</div>
<div id="d2">
<p id="divHead2" class="heading">Head2</p>
<p id="divContent2" class='content">Content2</p>
</div>
블록과 인라인 요소
차이:
블록: full width 브라우저안에서 먼저 실행됨 (e.g. div, p)
인라인: 공간만큼 순차적으로 실행됨 (e.g. span, a, img)
e.g.
[ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ블록ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ]
[ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ블록ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ]
[ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ블록ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ]
[ㅇ인라인ㅇ][ㅇㅇㅇ인라인ㅇㅇㅇ][ㅇ인라인ㅇ]
CSS로 스타일 변경가능
종류:
1.block: 블록으로 렌더링
2.inline: 인라인으로 렌더랑
3.none: 렌더링 안함
line break tags:
1.<br>: 한줄내리기, 인라인 요소도 한줄 내려가게 됨
2.<hr>: 가로줄 삽입
Container 요소
e.g. <p>, <div>, <span>
그룹으로 묶어서 스타일을 지정할 수 있음.
link요소
1.외부파일 링크
<a href="http://www.~ /">설명</a>
2.내부파일 링크
<a href="#위치">설명</a>
3.Anchor (바로가) - 같은페이지에서 이동 가능
<a id="로컬링크">설명</a>
이미지
<img src="링크" height="높이px" width="넓이px" />
목차
<ul> <li></li> </ul> - 순서 없이
<ol> <li></li> </ol> - 순서 매겨서
테이블
-웹페이지 레이아웃 또는 데이터 테이블에 사용 가능
table
<table> - 테이블 테그 시작/종료
headers
<thead> -써도되고 안써도 됨
body
<tbody> -써도되고 안써도 됨
cell
<tr> -테이블의 한 줄(row), th&td 밖에 정의
<th> -테이블 데이터중 헤더 표시
<td> -테이블 하나의 셀
footer
<tfoot> -써도되고 안써도 됨
기타:
<caption> -설명
<colgroup> -columns 묶는것
<col>-colgroup안의 정의
폼
<form> - 폼 테그 시작/종료
name- 폼이름
value
disabled
입력
<input type="속성">
속성:
button, file, reset, submit,
text, password, search, email, tel, number,range, url,
checkbox, radio,
month, week, date, datetime, time,
image, color, hidden,
<textarea>
속성: cols, rows
사이즈 조절이 가능함
<select>-<option>
속성: value
드롭다운 메뉴
<button>
속성: type, submit, reset
그래픽
그래픽API로 CSS로 속성을 변경 가능
1.<svg> - 벡터 형식,xml기반
2.<canvas> - 비트맵 형식 (픽셀), javaScript
미디어
1.<video>
2.<audio>
시맨틱 마크업
마크업이란?
화면에 출력되는 구조를 정의하는 작업
마크업(Markup)이란 문서의 내용이 아니라 내용이 어떻게 배치되고 어떤 크기와 모양을 가지며 여백은 어느 정도인지를 표현하는 기술
출처: http://www.zdnet.co.kr/news/news_view.asp?artice_id=00000010047880&type=det&re=
마크업은 그 파일이 프린터로 출력되거나 화면에서 어떻게 보여야할 것인지를 나타내기 위해, 또는 그 문서의 논리적인 구조를 묘사하기 위해서, 텍스트나 워드프로세싱 파일의 특정 위치에 삽입되는 일련의 문자들이나 기호들을 말한다. 마크업에 사용되는 표지를 흔히 "태그"라고 부른다. 예를 들어 다음의 태그는 문단을 나누는데 사용된다.
출처: http://www.terms.co.kr/markup.htm
댓글 없음:
댓글 쓰기