https://www.w3schools.com/html/default.asp
HTML5 브라우저 호환성
https://html5test.com/results/mobile.html
* 글자 형식
<mark> - 형광펜
<small> - Small text
<del> - 삭제표시(중간줄)
<ins> - 밑줄
<sub> - 아래 첨자
<sup> - 위 첨자
//=========
<script>
자바스크립트
<noscript>
<script> 가 작동하지 않는 브라우저에서 작동
//==========
< CSS >
* 내부에 정의
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
* 외부 파일
<link rel="stylesheet" href="styles.css">
* 전체
p { border: 1px solid powderblue; }
* id
#p01 { color: blue; }
<p id="p01">I am different</p>
* class
p.error { color: red; }
<p class="error">I am different</p>
//=============
< 리스트 >
<ul> unordered list, 숫자 없는 리스트
<ol> ordered list, 숫자 있는 리스트
<li> 리스트 아이템
<dl> description list, 설명 리스트
<dt> description term - 용어 이름
<dd> describe the term in a description - 용어 설명
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
//===================
< 블록 >
<div> 줄바꿈
<span> 줄 바꾸지 않음
//===========================
class
다중 클래스
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
<h2 class="city main">London</h2>
//===========================
id
- 페이지 내에서 유일한 요소
- 링크를 걸수 있음
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
//============================
input type
https://www.w3schools.com/html/html_form_input_types.asp
color = 색 선택
date = 날짜 선택
file = 파일 선택
image = 글자대신 이미지 사용
number = 번호 선택(상하 버튼)
range = 범위 지정
input 속성
https://www.w3schools.com/html/html_form_attributes.asp
autocomplete - 다시 돌아왔을때 이전 입력값을 유지
min and max - 입력값 범위 지정(상하 버튼)
pattern (regexp) - 패턴 지정
placeholder - 안내문구
//================
비디오 삽입, 제어
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
페이지 내에서 개체 드래그&드롭
https://www.w3schools.com/html/html5_draganddrop.asp
img, div 등
//==============================
< Web Storage >
https://www.w3schools.com/html/html5_webstorage.asp
//===========================
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
//===========================
* 저장 용량
Firefox,[6] and Opera : 5M
Chrome, Internet Explorer : 10M
* 저장 폴더 위치(경로)
Chrome (SQLite 사용)
AppData\Local\Google\Chrome\User Data\Default\Local Storage
Mac OS X 경로 :
~/Library/Application Support/Google/Chrome/Default/Local Storage
IE 경로
C:\Users[YOUR USER ACCOUNT]\AppData\LocalLow\Microsoft\Internet Explorer\DOMStore
//==================
Web Workers
- 자바스크립트를 백그라운드에서 실행 시킴
Server-Sent Events (SSE)
- 요청없이 서버에서 정보 받음
'Code > Web' 카테고리의 다른 글
| [W3School] Bootstrap 정리 (0) | 2018.11.08 |
|---|---|
| [W3School] CSS 정리 (0) | 2018.11.07 |
| Wget 설치 방법 (0) | 2018.10.10 |
| 도커(docker) 간단 설명 (0) | 2018.10.03 |
| AWS 로드밸런서 생성 방법 (0) | 2018.09.29 |
