[W3School] HTML5 정리

Code/Web 2018. 11. 7. 05:49

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
Posted by codens