아주 기초적인 HTML5, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자
Elements
<a target="_blank"> 새창 띄우기
<img src="">
<br />
<pre> 보이는 대로 줄바꿈
style="font-family:'맑은 고딕','Malgun Gothic',verdana;"
style="text-align:center"
<strong> =><b>
<em> 강조된 글자 => <i>
<mark> 형광색
<del> 취소선
<sub> 아래첨자
<sup> 위첨자
<q> 인용문
<blockquote> 블록형태로 문단 들여쓰기 표시 인용문
<cite> 이미지 제목등 표시 약간 기울어짐
<bdo dir="rtl"> 오른쪽에서 왼쪽으로 글짜 방향 바꿈
<kbd> 키보드 고정된 글자크기와 간격으로 표현 - 프로그래밍 코드 표시 등
<samp> 프로그래밍 결과 표시
<code> 프로그래밍 코드 표시 <pre><code>이렇게 사용 권장
<var> 수식및 변수 표현 기울어짐
Comments
<!--[if IE 8]>
<![endif]-->
CSS Cascading Style Sheets
- inline 태그내에 속성
- internal <head>영역
- external 외부 css
<link rel="stylesheet" href="styles.css">
a:link
a:visited
a:hover
a:active
a target="_blank"
_self (default) 동일한 프레임에서 오픈
_parent 부모 프레임에서 오픈
_top 창의 전체에서 오픈
framename
북마크 이동
<h2 id="b-mark">
<a href="#b-mark"> 클릭하면 해당 북마크로 이동
<a href="http://www.naver.com/index.html#news_cast2" target="_blank">
<table>
<tbody>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td colspan="2"></td> //rowspan
</tr>
<ul style="list-style-type:circle;"> 순서안정해진
<ol type="1" start="101"> 순서정해진 //A,a,I,i
<dl> description list
<dl>
<dt> 용어이름</dt>
<dd> 용어설명 </dd>
</dl>
block tag 영역 잡아먹음
<div> <h1> <p> 등
inline tag 자신의 영역만
<span> <a> <img> 등
반응형의 기본 div에 "float:left" 와 width를 넣어주면 해당 width 이후에 옆으로 붙음.
브라우저 사이즈에 따라 계속해서 옆으로 붙음
<head>
<title><style><link>
<meta charset="UTF-8">
<base href="http://test.com/data/icons/" target="_blank">
</head>
<body>
<img src="상대경로/icon.png">
특수 문자 표시
스페이스(공백) non-breaking space : or  
< less than : < or <
> grater than : > or >
& ampersand : & or &
C copyright : © or ©
R registered trademark : ® or ®
표준 ASCII 코드표 http://www.ascii.cl/htmlcodes.htm
w3.org 특수문자 참조 표 http://dev.w3.org/html5/html-author/charref
ASCII 127개 ANSI 256 ISO-8859-1 -> UTF-8 <meta charset="UTF-8">
XHTML 사용이유는 HTML 태그가 정확히 작성되지 않은 경우 모바일에서는 성능 저하가 나타나기 때문에
XML의 장점인 정확히 작성하게끔 재설계한 언어
XHTML DOCTYPE 기입, xmlns 속성 기입 등 필요
HTML form
<form action="https://www.google.co.kr/search" method="get" target="_blank">
<input name="q" type="text" value="test"/>
<input name="tbm" type="radio" value="vid" checked="checked" />
<input type="submit" value="Submit" />
</form>
<select name="test">
<option value="1">1</option>
</select>
<textarea name="test" cols="35" rows="10">test</textarea>
<button type="button">버튼</button>
HTML5
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
유의미(semantic) 태그
header, footer, article, section, svg, canvas, audio, video
오래된 브라우저에서도 정상 동작하기 위해 block 설정해야함.
header, footer, article, section, aside, nav, main, figure{ display: block;}
아래 코드를 head에 넣어줘야 IE 9이전버전에서 동작함
<!--[if lt IE 9]>
http://html5shiv.googlecode.com/svn/truck/html5.js
<![endif]-->
HTML5 기본 뼈대
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
http://html5shiv.googlecode.com/svn/trunk/html5.js
<![endif]-->
<style>
body {font-family: Verdana, sans-serif;}
header, nav, section, article, footer {border:1px solid grey; margin:5px; padding:5px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 기본 뼈대</h1>
</header>
<nav>
<ul>
<li><a href="http://www.naver.com/">네이버</a></li>
<li><a href="https://www.google.com">Google</a></li>
</ul>
</nav>
<section>
<h2>여기 중간 제목</h2>
<article>
<h2>여기 소제목</h2>
<p>여기 내용</p>
</article>
<article>
<h2>여기 소제목</h2>
<p>여기 내용</p>
</article>
</section>
<footer>
<p>© 2016 ... All rights reserved.</p>
</footer>
</body>
</html>
<canvas>
var a = document.getElementById("canvas");
var b = a.getContext("2d");
var c = b.moveTo(); .lineTo .stroke
getContext("2d") .beginPath .arc(centerx,centery,r,0,2*Math.PI) .stroke
getContext("2d") .font = "30px Arial" .fillText("text", 글좌측아래점의 x좌표, y좌표)
.strokeText("text",40,70);
getContext("2d") .createLinearGradient(startx,starty,endx,endy);
.addColorStop(0,"white");
.addColorStop(1,"green");
.fillStyle .fillRect .creatRadialGradient(centerx,centery,r,secondCenterX,secondCenterY,secondR)
<svg> Scalable Vector Graphics
multimedia
.gif, .png .jpg
.mp4, .webm .ogg 만 HTML5에서 지원 됨
.mp3 .wav .ogg 오디오 만 HTML5에서 지원 됨
<video controls="controls" width height autoplay>
<source src="~.mp4">
</video>
<audio controls="controls" autoplay>
<source src="~.mp3">
</audio>
HTML 확장 plug in <object width height data =""></object>
<embed width height src="">
유투브 주소
https://youtu.be/I2cGgb1F7Pw?autohide=0
autohide 0:컨트롤항상보이게 1:컨트롤 감춤 2:화면이 16:9나4:3일 경우 감춤 그외에는보임
controls 0:컨트롤 안나타남 비디오 로딩 1:컨트롤 나타남 비디오 로딩 2:컨트롤 나타남 비디오로딩 안됨
loop 0:한번만 재생, 1:무한 반복재생
list [] :재생목록
<iframe src> <object data> <embed src>
Geolocation
getCurrentPosition() 위도,경도
drag&drop
drag할 태그에 draggable="true" ondragstart="drag(event)"
function drag(ev){
ev.dataTransfer.setData("dragtarget",ev.target.id);
}
drop할 태그에 ondrop="drop(event)" ondragover="allowDrop(event)"
function drop(ev){
ev.preventDefault();
var c = ev.dataTransfer.getData("dragtarget");
ev.target.appendChild(document.getElementById(c));
}
function allowDrop(ev){
ev.preventDefault();
}
Local Storage
window.localStorage :만료기한 없이 데이터 저장
window.sessionStorage :브라우저 탭이 닫히면 데이터 사라짐. 한번의 세션에서만 저장
if(typeof(Storage) !=="undefined")로 브라우저가 지원하는지 확인 필요
localStorage.setItem("","") 또는 localStorage."" = "" 으로 저장
localStorage.getItem("","") 또는 localStorage."" 으로 검색
loclaStorage.removeItem("")으로 삭제
Application Cache
오프라인 브라우징 가능, 속도 향상, 서버 부하 감소
<!DOCTYPE HTML>
<html manifest="이름.appcache"> 로 속성 삽입
이름.appcache 파일 안에
CACHE MANIFEST //이렇게 리스트 된 파일들은 맨 처음 다운로드 된 이후 부터 캐시 됨
/a.css
/b.gif
/c.js
NETWORK //네트워크 아래에 리스트된 파일은 캐시되지 않고 계속 받아옴
d.asp
* //*은 위 명시된 리스트 외의 모든 자원을 인터넷 연결 필요
FALLBACK //이 헤더 아래 리스트된 파일은 어떤 페이지가 접근 불가할 때 대신할 페이지 정의
/디렉토리/파일이름.html
웹워커
백그라운드에서 js 실행
new Worker()
'Development > WEB' 카테고리의 다른 글
| javascirpt 기초(1/2) (0) | 2017.10.30 |
|---|---|
| CSS 기초 (0) | 2017.09.13 |
| MongoDB에서 데이터 가져와서 template 뷰와 바인딩 (0) | 2017.03.06 |
| MongoDB 테스트 데이터 생성 스크립트 (0) | 2017.03.06 |
| ejs-locals 모듈로 head, header, layout, footer 구성하기 (0) | 2017.02.20 |