2016. 12. 27. 14:57ㆍHTML.CSS3.JavaScript.jQuery
[1] html5 기본 용어 정리
(1) 태그
- 시작과 끝을 가진 태그
ex) <br/> <hr/> <img/>
- 시작만을 가진 태그
ex) <h1> ... <h6> </h1> ... </h6>
<p> </p>
(2) 요소
- <h1> text </h1>
(3) 기본적인 html5 페이지구조
<DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
(3)-1. head태그 : 문서의 정보나 문서에 필요한 스크립트
(3)-2. head태그에 들어가는 태그
meta : 웹 페이지에 추가정보를 전달
title : 웹 페이지의 제목
script
link : 웹 페이지에 다른 파일 추가
style : 웹 페이지에 스타일 시트를 추가
base : 웹 페이지의 기본 경로 지정
[2] 태그 종류
(1) 글자 태그
- h1 ~ h6 (12px)
- <p></p> : 하나의 단락을 만든다
- <br/> : 줄바꿈
- <hr/> : 수평선
- 글자형태 : <b>굵게</b> <i>기울어진</i> <s>작게</s> <sub>아랫첨자</sub> <sup>윗첨자</sup> <ins>밑줄</ins>
<del>취소선</del> <strong>굵게(강조할때사용)</strong><em>기울어진(강조시)</em>
(2) 앵커 태그
- 서로 다른 웹페이지 이동 ( hyperlink생성) , 웹페이지 내부에서 특정위치로의 이동
- <a href = " www.naver.com"></a>
- <a href = "#page"></a> ( id값이 page 인 태그의 위치로 이동)
(3) 목록 태그
- ul ( unordered list) : 순서가 없는 목록
- ol ( ordered list) : 순서가 있는 목록
- li ( list item) : 목록 요소
- ex) <ul>
<li></li>
<li></li>
</ul>
(4) 테이블 태그
- tr ( table row) : 행
- th ( table head) : 제목
- td ( table data) : 셀 내용
- rowspan : 세로 병합
- colspan : 가로 병합
- ex) <table>
<tr>
<th></th>
</tr>
<tr>
<td rowspan="number"></td>
</tr>
</table>
(5) 이미지 태그
- < img / >
- src : 이미지의 경로 지정
- alt : 이미지가 없을 때 나오는 글자 지정
- width, height : 너비, 높이
- ex) <img src="picture.png" width="960px" height="480px" alt="no image" />
(6) 오디오 태그
- <audio></audio>
- src : 음악파일의 경로 지정
- preload : 재생하기전 모두 불러올지 결정
- autoplay : 자동 재생
- loop : 반복 재생
- controls : 음악재생도구
(7) 입력양식태그 ★★
<form> form 내부에 존재 </form>
(7)-1 <input/> : 사용자에게 정보를 입력받는 기능
- <input type="type속성값"/>
- input 태그의 속성 종류
checked : 체크된 상태로 표시
disabled : 비활성화
readonly : 읽기만 가능
maxlength : 최대문자열
autofocus : html 문서 로딩 후 자동 포커스
placeholder : input 요소의 설명
ex) <input type="checkbox" checked="checked" name="go" value="yes"/>
- type속성값 : button checkbox file image password reset submit text ...
(7)-2 <label> : input 태그를 설명
-ex) <form>
<input id="input" type="text" />
<label for="input">name</label>
</form>
(7)-3 <textarea>
- <textarea cols="number" rows="number"></textarea>
(7)-4 <select>
-ex) <select>
<option> option-1 </option>
<option> option-2 </option>
</select>
(8) 공간분할태그
- <div></div> : block 형식
- <span></span> : inline 형식
- inline 형식안에 block 형식을 넣을 수 없지만 block형식 안에는 block,inline 둘다 들어갈 수 있다.
- block형식 태그 : div, h, p, 목록태그, 테이블태그, form태그
- inline형식 태그 : span, a, input, 글자형식태그
'HTML.CSS3.JavaScript.jQuery' 카테고리의 다른 글
| [6] jQuery - Attribute(속성) , Method(메서드) (0) | 2016.12.29 |
|---|---|
| [5] JavaScript - DOM ( Document Object Model ) / Event (0) | 2016.12.28 |
| [4] JavaScript - 객체 (0) | 2016.12.28 |
| [3] JavaScript - 기본개념 (0) | 2016.12.28 |
| [2] CSS3 (0) | 2016.12.27 |