T아카데미에서 제공하는 html5 & css3 수업자료: http://2107.co.kr/tacademy/
HTML Validator: https://validator.w3.org
SUBLIME 에디터: http://www.sublimetext.com/
(패키지컨트롤 플러그인 설치 URL:https://packagecontrol.io/installation#st2)
ex) 패키지컨트롤 기능: ctrl+/ 누르면 자동 주석 생성 기능
HTML, Javascript, CSS를 간단히 확인 할 수 있는 JS Bin: http://jsbin.com/kiqayucohe/edit?html,output
인라인요소, 블록요소
<div> 태그는 블록영역이기 때문에 한 줄을 다 먹어버림
<span> 태그는 인라인영역
<ul>,<ol> 태그의 자식은 <li> 태그만 가능하고, <li> 태그의 자식은 <ul>,<ol> 태그만 가능하다.
<ul> 태그는 <li>태그를 묶어주는 태그이기 때문에 이 안에 text만 쓰는 것은 안됨
기호를 문자로 표시하고 싶을 때(html 엔티티 코드:http://blog.naver.com/bab5bong/60210177082)
< h1 > -> <h1> / 10° -> 10° / & -> &
<img> 태그에서는 alt 속성을 써서 이미지 제목을 꼭 써주자.
<iframe> 다른 문서 삽입
표
<table>
<caption>
<tr> 행
<th>
<td>
<table>
<thead>
<tfoot>
<tbody>
scope="col" : 열의 제목을 뜻함.(화면상의 변화는 없지만, 소스상에서 구분하기 위해서 사용.)
scope="row": 행의 제목을 뜻함.
input type="submit" 은 부모 form 태그 안에 있는 값(name 값으로 가져와)들을 action 속성에 있는 주소로 전달을 해줌
input type="text" 는 값을 입력하기 때문에 파라메터 값을 가지고 오는데,
input type="radio" 는 값을 value 값으로 가지고 옴.
method=post로 할 경우..
<label> 태그는 id 값을 찾아서 그의 제목을 명시해준다. 클릭하면 input text 창이 활성화됨.
<div> 태그로 인해 멀리 떨어져있을 때 사용된다.
ex) <lebel for="ID명"></lebel>
form 태그 안에 <fieldset> 으로 나눠줄 수 있음
HTML5 섹션(Sections)
- <section> 문서를 구분지어주며, 대체로 제목과 함께 사용됨
- <nav>
- <article>
- <aside>
- <header>
- <footer>
페이지 내 링크
a 태그 href속성에 id 값을 넣으면 그 id 있는 쪽으로 이동
HTML5 form attributes
autocomplete="off" : 브라우저가 저장하고 있는 값을 보여주지 않음(default는 저장함)
autofocus
placeholder : input박스 내용 쓰기 전 회색으로 보이는 글
* textarea 태그에서 placeholder 쓸 때는 textarea 태그 사이에 공백이 없어야해!
required
<video> 태그
코덱을 지원하지 않은 브라우저를 위해서 소스 <source> 태그를 사용한다.
ex)
<video width="300" height="200" controls poster="http://2107.co.kr/tacademy/image/poster_onigiri.png(동영상 재생 전 보여지는 이미지 파일)">
<source src="http://2107.co.kr/tacademy/movie/testmovie_h264_aac.mp4" type='video/mp4; codecs="avc1, mp4a"'>
<source src="http://2107.co.kr/tacademy/movie/testmovie_theora_vorbis.ogv" type='video/ogg; codecs="theora,vorbis"'>
<p>귀하의 브라우저가 이 동영상을 지원하지 않습니다.</p>
</video>
viewport 뷰포트 태그
브라우저 안에 웹 페이지가 표시되는 영역
head 에 넣어주기
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
- width: viewport의 너비
- initial-scale:: 초기 크기
- maximum-scale: 최대 크기
- minimum-scale: 최소크기
- user-scalable: 사용자 확대/축소
a태그 href 속성에다가 href="tel:02-5655-8889" 넣으면 모바일에서 a태그 클릭하면 바로 전화 걸 수 있음
