html이란?
html은 태그작성(=글 작성)을 하는 것.
1. 태그 구성
<p> : 열린 태그
<p/> : 닫힌 태그
<태그이름 속성 속성값>으로 구성된다.
ex) <img src="v.jpg"/>
태그이름: img
속성: src
속성값: v.jpg
2. 태그
<h> : 제목
<h1>부터 <h6>까지 존재
<h1>이 가장 큰 글씨
<p> : 일반 글자
<b /> : 줄바꿈
<a> : 텍스트나 이미지에 링크 연결
ex) <p><a href="http://www.google.com" target="_blank">구글 홈페이지</a></p>
_blank : 기존 창은 그대로 있고, 새 창이 열림
_self : 기존 창에서 링크로 연결됨
<i> : 이태리체
<sup> : 위첨자
<ins> : 글자에 언더라인 긋기
<del> : 글자 중간에 라인 긋기
<hr /> : 가로선 긋기
3. 리스트 태그
(1)
<ul> unorder list type
<ol> order list
<li> list 아이템
ex)
<body>
<p>메뉴</p>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</body>
(2)
<dl>
<dt> 메뉴 리스트
<dd> 리스트 목록
4. 테이블 태그
표를 만드는 것으로 회원가입, 로그인에 사용했었지만 요즘엔 사용빈도가 적다.
대신 div로 사용
tr : 행
tb : 열
border="1" : 테이블 테두리 두께값이 1이다
rowspan : 행 합치기
colspan="2" : 열 2개 합치기
=>첫번째 행과 열에 두고 사용, 첫번째 값부터 카운트한다.
ex)
<table border="2">
<tr>
<td rowspan="4">점수표</td>
</tr>
<tr>
<td>국어</td>
<td>영어</td>
<td>수학</td>
</tr>
<tr>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td colspan="2">평균</td>
<td>90</td>
</table>
5. 이미지, 사운드, 비디오 태그
(1) 이미지
<img src="경로" alt="이미지 표현해주는 텍스트" width="가로 사이즈" />
(2) 사운드
<audio src="경로" controls="" autoplay="autoplay" loop="loop">
controls="controls" : 음악 재생하는 플레이어를 보여 줌(안 보여주려면 안 적으면 된다.)
autoplay-"autoplay" : 자동재생
loop="loop" : 무한 재생(default는 1번 재생)
(3) 비디오
<video src="경로.타입" type="video/mp3" controls="controls"></video>
type : 정보값
6. 폼 태그
회원가입, 이벤트 응모, 정보 입력할 때 사용
action : 회원가입 정보 입력 후, db 정보 쌓일 서버 쪽 주소 적기.
method : "get"(브라우저에 정보 노출, 보안에 취약, 주소가 뒤로 붙어서 서버로 이동)
"post"(문서 헤더에 정보가 암호하되서 서버로 감, 정보 은닉됨)
"text" : 일반 문자
"password" : 기호로 대체되서 표시된다
name : input의 유니크한 이름
size="5" : 문자입력가능 수
radio : n개 중 1개 선택 시, name값 "gender"로 같고, value가 달라야 한다.
get.gender하면 m값 혹은 w값 가져온다
checkbox : 한글, //n개 중 n개 선택 가능, 다중선택시 배열로 가져옴, checked는 디폴트값, name이 같아야 한다
option : 태그 아이템
multiple : select와 같은데 n개 선택 가능
submit : 누르면 경로를 찾아서 이동한다
ex)
<form action="#" method="get">
name : <input type="text" name"unname" /><br />
id : <input type="text" name"uid" /><br />
pw : <input type="password" name"upw" /><br />
tel : <input type="text" name"unphone" size="5" /><br /> -
<input type="text" name="unphone2" size="5" /> -
<input type="text" name="unphone3" size="5" /> <br />\
사진 : <input type="file" name="upic"/><br />
성별구분: <input type="radio" name="gender" value="m">남,
<input type="radio" name="gender" value="w">여 <br />
사용언어: <input type="checkbox" name="lan" value="kor" checked="checked"/>
<input type="checkbox" name="lan" value="eng" /> 영어,
<input type="checkbox" name="lan" value="jap" /> 일어,
<input type="checkbox" name="lan" value="chi" /> 중국어<br />
자기소개: <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br />
국적: <select> //업다운 선택지, n개 중 1개 선택 가능
<option>KOREA</option>
<option>USA</option>
<option>JAPAN</option>
<option>CHINA</option>
</select><br />
좋아하는 음식: <select multiple="multiple">
<option>김치</option>
<option>불고기</option>
<option>파전</option>
<option>비빔밥</option>
</select><br />
<input type="submit"/>
</form>
7. 레이아웃 구성
<head> : 설정 관련 내용, meta태그, <title>, css설정
<body> : 정보 전달 내용
<header> : 홈페이지 이름, 회사 로고, 중요한 정보
<nav> : 메뉴
<section> : 정보
<footer> : 회사 정보
8. 레이아웃 태그
<div>: 블럭요소 (br태그 없이도 블럭 쌓듯이 정렬됨)
<span>: 라인요소 (한 칸 뛰고 옆으로 쭉쭉 정렬됨)
section : 영역 구분을 위한 용도
article : 실제 콘텐츠, 내용을 표현할 때 사용
address : 이메일 주소, 연락처 정보, 이텔릭 체로 표시됨
*우편물 주소는 p태그 사용
'programing > html5&css3' 카테고리의 다른 글
| css3 기초 - gradient 속성 (그라데이션) (0) | 2018.01.09 |
|---|---|
| css3 기초 (0) | 2018.01.08 |
| css3 기초-문자선택자, 링크선택자, 부정선택자 (0) | 2018.01.07 |
| css3 기초 - 반응선택자, 상태선택자, 구조선택자 (0) | 2018.01.07 |
| css기초 - 선택자와 태그 (0) | 2018.01.07 |