HTML(Hyper Text Markup Language)
- Markup 언어이다.(Markup은 특정부분을 강조하여 보여주는 것이다.)
- 1995년도 팀버너즈리가 HTML 1.0을 발표, 그 후 1999 HTML 4.01가 발표되었고 2014.12월에 HTML 5 표준이 발표될 예정이다.(w3c.org에서 표준안을 제정, 발표한다.)
- <태그명>내용</태그명> : 시작태그(element)+내용+끝태그로 이루어진 tag 언어이다. 태그는 하나의 element이다.
- 사용할 수 있는 tag가 결정되어있다.(DTD : Documnt Type Definition)
- 연산의 기능은 없다
- web broeser안에서 보여지는 언어이며 브라우저가 태그를 그려서 보여준다.(브라우저마다 다른 모양으로 그릴 수 있다.)
- 컴파일이 필요없다.
- 에러가 발생하지 않는다.
- 소스를 만들고 저장할 때 확장자를 .html, .htm으로 저장한다.
- 구조
<!DOCTYPE html> // HTML버전 결정
<html>
<head>
<title>타이틀바에 들어갈 내용</title> -> 최근에는 탭사용으로인해 title대신 tap을 사용한다.
</head>
<body>
사용자에게 서비스할 내용
</body>
</html>
- 주소 : http://Domain/파일명으로 이루어진다. 이때 127.0.0.1, localhost은 내 로컬 컴퓨터를 나타낸다.
[참고] 웹서버로 Tomcat 사용 시 8080포트를 사용하므로 URL은 http://localhost:8080/context명/test.html 이렇게 된다.
각종 html 태그(<시작태그></끝태그>)
- 줄변경 : <br> </br> or 태그 사이에 내용이 없을 때 <br/>
- 문단 : <p> </p>
- 진하게 : <b> </b>
- 글자를 크게 : <big> </big> - html5에서는 지원하지 않는다.
- 글자를 작게 : <small> </small>
- 밑줄 : <u> </u> - html5에서는 지원하지 않는다.
- 이탤릭체 : <i> </i>
- 취소선 : <strike> </strike> - html5에서는 지원하지 않는다.
- 윗첨자 : <sup> </sup>
- 아랫첨자 : <sub> </sub>
특수문자(&문자) 표기
- 공백 :  
- < : <
- > : >
- & : &
- ⓒ : ©
속성의 사용
- 개발자가 원하는 값을 넣어서 태그를 다양한 형태로 사용할 수 있다.
<태그명 속성명 = "값" ... >
- 값은 세가지 방법으로 표기(사용)할 수 있다.
속성 = "값" , 속성 = '값', 속성 = 값
[참고] 마지막 방법은 제일 안 좋은 방법이다. 값에 공백이 포함되어 있다면 구분이 되지 않기 때문이다.
글자(font) 태그 - html5에서는 지원하지 않는다.
<font size = "글자크기" face = "글꼴" color = "색"></font>
- 서버에만 글꼴이 있다면 접속자 브라우저의 기본 글꼴로 보여준다.
- color속성의 값은 영어 단어 혹은 RGBcolor16진수로 넣는다.
표(table) 태그
<table border="테두리선" border color="테두리선색" width="넓이" height="폭넓이" background="바닥이미지" bgcolor="바닥색" cellpadding="td 내부 간격" cellspacing="td 사이 간격" align="정렬">
<thead> // 제목(title) 부문 구분
<tr align="left, right, center" valign="top, middle, bottom" background="" bgcolor=""> // 행만들 때
<th></th> // 제목칸 만들 때(가운데 정렬, 진하게가 기본 속성)
<th align="" valign="" background="" bgcolor="" colspan="합칠 칸의 수" rowspan="합칠 행의 수"></th>
</tr>
</thead>
<tbody> // 내용 부문
<tr>
<td width="넓이" height="높이"></td> // 내용칸 만들 때
<td align="" valign="" background="" bgcolor="" colspan="합칠 칸의 수" rowspan="합칠 행의 수"></td>
</tr>
<tbody>
<tfoot> // 합계내 줄 때
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
embed 태그
- 동영상, 음악 파일 지원 태그이다.
- 모든 브라우저에서 동작하지 않는다.
<embed src="재생할 파일"/>
- html5에서는 <audio>, <video>로 나뉘어서 사용된다.
<audio src="재상할 음악 파일" controls="controls">
<source src="재생할 음악 파일"/> // 위의 source의 파일코덱이 재생이 안된다면 아래 정의한 파일을 사용하며 재생
</audio>
<video src="" controls="">
<source src=""/>
</video>
HTML Format control
input tag
- 사용자에게 값을 입력 받는다.
<input type="text" name="control명" size="보여줄 글자수" value="control이 보여질 때 기본으로 제공될 값" maxlength=" 입력제한 글자 수" readonly="readonly 읽기 전용"/>
<input type="password" value="control이 보여질때 기본으로 제공될 값">
<input type="radio" name="그룹 이름" value="서버쪽으로 보내질 값" checkde="checked"/>
<input type="checkbox" name="그룹 이름" value="서버쪽으로 보내질 값" checkde="checked"/>
<input type="hidden" name="이름" value="서버쪽으로 보내질 값"> : 사용자에게 보여지지 않고 값을 넘길 때
<input type="file" name="이름"/> : 임의로 값을 넣지 못한다, 자바스크립트로 제어할 수 없다
<input type="image" src="이미지경로" width="넓이" height="높이"/> : 클릭시 전송의 기능이 없다
<input type="button, submit, reset" value="버튼 라벨"/>
select tag
- 브라우져에 따라 다르게 보인다.
<select name="이름" size="보여줄 옵션의 개수">
<option value="서버쪽으로 넘길 값" selected="selected">
</select>
textarea tag
- 시작태그와 끝태그 사이에 공백을 넣을 경우 박스에 반영된다.
<textarea name="이름" cols="한 줄에 쓸 글자수"(입력제한) rows="보여줄 줄 수"(입력제한x)></textarea>
hr tag
<hr color="색" width="넓이" size="선 높이"/>
- 수치 작성에 따라 다른 결과를 보여준다.
100 or 100px - pixel, 고정
100% - 비율, 가변
기본값 - 브라우저의 100%
목록 tag
<ol> : 순서목록(1234…, ABCD…, abcd…, ⅰⅱⅲⅳ…, ⅠⅡⅢⅣ…)
<ul> : 도형목록(disc, square, circle)
<dl> : 설명목록
- <ol><ul>태그는 <li>태그를 사용하여 item을 생성한다.
<ol type="1">
<li>값</li>
:
</ol>
- <dl>태그는 <li>태그를 사용하지 않는다.
<dl>
<dt>제목</dt>
<dd>제목에 대한 설명</dd>
</dl>
a tag
- 다른 페이지를 요청할때 사용한다.
< a href="요청할페이지" targe="요청받은페이지를 보여줄 곳" title="풍선도움말" >클릭할 이름</a>
- target 속성 자세히
생략: 현재 browser에서 보여준다.
taget- frame 태그와 연관이 있다.
taget 이름과 일치하는 name 속성이 없다면 새창으로 띄워진다.
요청할 페이지
절대경로: c:/dev/ohtml
url : http://localhost:8080/html/day1024/list.html
url 장점 : 링크를 가지고 있는 페이지의 경로가 달라져도 페이지를 연결 할 수 있다.
상대경고: 파일명, ../상위 폴더이동 ../../
상대경고 장점 : 간단하게 경로를 쓸수 있다.
상대경고 단점 : 링크를 가지고 있는 페이지의 경로가 달라지면 페이지를 연결 할 수 없다.
http://locahost:8080/html_prj/day1024/a.html
http://locahost:8080/html_prj/day1025/c.html
http://locahost:8080/html_prj/day1026/a.html
<a href="../../1025/c.html">
* 이미지
<img src="이미지파일경로" width="넓이" height="높이" alt="설명글" title="풍선도움말" border="테두리선의 두께" />
tooltip type
상대경로
절대경로
* frame
- 사이트의 전체 디자인설정할때
<frameset> ,<frame>
- 브라우저에 100%
* iframe
- 브라우저의 일부분을 변경하여 보여줄때
- 브라우저에서 여러개의 HTML 을 동시에 보여줄때
- 동시에 여러 HTML을 로딩하기 때문에 속도가 느려진다.
<iframe src="보여줄HTML" width="넓이' height="높이"
frameboder="테두리선의두께" scrolling="auto"></iframe>
yes
no
srdling 속성
auto : 들어가는 페이지가 iframe보다 크다면 스크롤바를 생성하고 작다면 스크롤바를 숨겨준다.
yse : 들어가는 페이지의 크기에 상관없이 무조건 스크롤바를 보여준다.
name : 들어가는 페이지의 크기에 상관없이 무조건 스크롤바를 숨겨준다.
name="이름"
target 속성과 연결
* map
- 이미지를 자르지 않고 좌표를 설정하여 특정부분에 링크를 걸때 사용.
<map name="이름"> 좌표는 이미지의 왼쪽상단이 0.0
< area shape="rect" coords="좌표" href="이동할 페이지 url" title ="풍선도움말"/>
. x1,y1,x2,y2
.
.
</map>
<img src="이미지경로" usemap="맵이름">
* 표만들기
<table>,<thead>,<tbody>,<tfoot>,<th>,<tr>,<td> 를 사용할 수 있다.
<table> 표를 열 때
<table border="테두리 선' bordercolor="테두리선 색" width="넓이" height="표 넓이">
background="바닥이미지"
bgcolor="테이블 바닥색" cellpadding="td내부간격"
cellspacing="td 사이간격" align="정렬">
left,right,center
- 제목 (title) 부문 구분
<thead>
- 내용 부문
<tbody>
- 합계내줄때
<tfoot>
- 행만들기
< tr align="left , right, center( 수평정렬 ) , valiagn="top, middle, bottom" (수직정렬) background="" bgcolor="">
tr 내의 td나 th에 적용
- 제목칸 만들때
<th> : 가운데 정렬, 진하게가 기본속성
<th align = "" valign="" bakground="" bgcolor="" colspan="합칠칸의 수" rowspan="합칠행의 수">
- 내용칸 만들때
<td width="넓이" height="높이">
번호이름주소1우승
2경우
<thead><th></th> </tr></thead>
<tbody><tr></tr> </tr>
<tr></tr> </tbody>
'예전 포스팅 모음' 카테고리의 다른 글
| [html] 구분, div, 좌표설정 (0) | 2014.10.30 |
|---|---|
| [html] 테이블 정렬, 칸 합치기, HTML Form control (0) | 2014.10.29 |
| Web이란? (0) | 2014.10.23 |
| [tomcat] 톰캣 소개 및 설치 (0) | 2014.10.22 |
| [JAVA] 입출력(I/O) (0) | 2014.10.21 |