앞서 봤듯이 HTML은 Hypertext와 tag로 이뤄져 있다.
그렇다면 HTML에서 사용되는 tag가 무엇이 있고, 그 테그가 가질 수 있는 요소 값을 알면 HTML문서의 작성이 가능하다. 모든 태그를 외울 수없으므로 다음 사이트를 참조하여 레퍼런스를 검색한다.
http://www.w3schools.com
일단, 자주 쓰이는 HTML테그에 대해서 알아보도록 한다. 그에 앞서 HTML작성 방법론에 대해서 말해보겟다.
* HTML 작성 방법론
- HTML은 내용만을 나타내는 역할로 사용하는 것이 좋다. 이는 CSS와의 구분으로 프로그램의 유지보수를 용의 하게 해주는 역할을 해준다. 만일 HTML안에 style을 정의한다면 하나의 내용 및 style을 변경하는데 많은 보수 비용이 필요로 하게 된다. 다시말한다면 css 파일이 없어도 html만으로도 웹을 실행하는데 문제가 없어야 됨을 의미한다.
다음으로 테그에 대해서 알아보도록한다.
1. Element
- 테크를 알기전에 엘리멘트 개념에 대해서 알고 있어야 한다.
- 엘리멘트란 테그의 시작과 끝을 묶어서 엘리멘트라고 한다.
ex)
이 html문서에는 3가지 element가 존재한다
html, body, p 엘리멘트이다 각각의 영역은 다음과 같다.
html : 1줄(<html>)~5줄(</html>)
body : 2줄(<body>)~4줄(</body>)
p : 3줄(<p> </p>)
- 모든 element는 다음 특성을 일반적으로 포함한다.
ⓐ id : element의 unique id로 css나 다른 문서에서 특정 element를 선택하기 위해 사용되는 값
ⓑ class : style을 위한 클래스
ⓒ style : inline style로 요즘은 css에서 스타일을 정의하므로 잘 쓰이지 않는다.
ⓓ title : 부가 정보
2. 기본구조(기본 tag)
- 필수 요소
ⓐ <html> : root element
ⓑ <head> : title, meta정보, script등이 포함 되있는 테크
ⓒ <body> : 본문으로 실제 웹 브라우져에 보여지는 부분
- 기본 요소
ⓐ <h1>~<h6> : 제목으로 사용되는 것으로 숫자가 작을 수록 크다.
ⓑ <p></p> : 단락(기본적으로 블럭의 형태)
ⓒ <br/> : 다음 줄로 넘김
ⓓ <hr/> : 가로 구분선
ⓔ <div></div> : 영역구분(블럭)
ⓕ <span></span> : 영역구분(line)
> ⓔ~ⓕ의 형식적 구분에 대해서는 <div>는 네모 박스이며 <span>은 텍스트 라인 단위이다.
> ⓒ~ⓓ에서의 '/'는 xml의 문법적 요소가 가미 된 것으로 html에서 사용되는 것은 '/'이 없어도 된다.
ⓖ <!-- 주석 --> : 주석이다.
3. 링크
- 형태 : <a href = "url">Text</a>
> a태크는 버튼 을 클릭 가능한 상태로 만들고 href는 링크를 다는 것이다. Text를 클릭하면 url로 연결된다.
> url로 사용되는 특수한 것으로 "#"이 있다. 이는 자기 자신 페이지를 의미한다.
- 속성 값
ⓐ target : 어느 창에 나타 낼 것인가?
- "_blank" : 새창 // "_top" : top프래임 // "frame name" : 특정 프레임
ⓑ name : 페이지 내부의 특정 부분을 링크하고 싶을 때
4. 이미지 추가
- 형태 : <img src = "url">
> url값은 특정 주소를 사용해도 되지만, html이 구현된 디렉토리에서의 그림도 사용가능하다.
ex) img src = "hello.jpg"
- 속성 값
ⓐ width, height : 크기
ⓑ usemap : 이미지맵 / 맵을 분활하여 누르는 곳에 따라 다른 곳으로 연결된다.
- 사용 가능한 그림 확장자
ⓐ jpg : 압축률이 높으나 손실률이 높다
ⓑ gif : 작은 아이콘에 사용된다. 투명 이미지가 구현가능하다.
ⓒ png : 적은 색상수로 구현되고 압축률이 높고 손실이 적다. 또한 투명 이미지 사용이 가능하다.
> 다른 어떤 것을 다룰때도 마찬가지지만 특히 그림(구현시 많이사용됨)은 파일 사이즈에 신경을 많이써야 한다.
> 웹에서 파일의 크기는 서버의 반응속도와 직관적으로 연결되있기 때문이다!!
5. 리스트
- html에서 만들수 있는 리스트의 종류는 2가지가 있다.
ⓐ ul : 순번이 없는 리스트
ⓑ ol : 순번이 있는 리스트
- 리스트를 구성하는 아이탬인 li태그와 같이 사용된다.
6. 표
- 그리드 모양을 띄고 있는 표를 생성 가능하다.
- <table> 테그를 사용하여 표를 나타내주고 다음과같은 것으로 구현을 한다.
- <tr> : 한 행지정 / <th> : header기능이 있는 한칸 / <td> : 일반 적인 한칸이 따라온다.
7. form
- 데이터를 서버로 전송하기 위해 사용되는 테그
- 형태 : <form action = "url" method = "'post'or'get'"></form>
> url로 파일을 보내는데 보내는 방식이 post 또는 get 방식을 취한다.
> 보내는 방식 옵션은 2개중 한개를 선택하며 각각의 의미는 다음과 같다
ⓐ post : http 프로토콜 내부에서 인코딩후 전달한다. 길이 제한이 없으며 받는 사람이 디코딩이 가능해야한다.
ⓑ get : URL뒤에서 전달하는 방식으로 길이제한이 있다.
- 사용 가능한 element(tag)
ⓐ input : 사용자가 입력하는 방식
> 속성으로 Text(일반), Password(페스워드 방식), Radio(라디오 버튼), Checkbox(채크박스),
File(파일 전송창), Hidden(브라우져에 안보이는 입력창), Button(버튼) 등이 있다.
> Button은 폼 전송을 나타내거나 초기화 하는 버튼으로 잘 사용된다.
다음은 form과 표를 같이 사용한 것의 예이다.
그렇다면 HTML에서 사용되는 tag가 무엇이 있고, 그 테그가 가질 수 있는 요소 값을 알면 HTML문서의 작성이 가능하다. 모든 태그를 외울 수없으므로 다음 사이트를 참조하여 레퍼런스를 검색한다.
http://www.w3schools.com
일단, 자주 쓰이는 HTML테그에 대해서 알아보도록 한다. 그에 앞서 HTML작성 방법론에 대해서 말해보겟다.
* HTML 작성 방법론
- HTML은 내용만을 나타내는 역할로 사용하는 것이 좋다. 이는 CSS와의 구분으로 프로그램의 유지보수를 용의 하게 해주는 역할을 해준다. 만일 HTML안에 style을 정의한다면 하나의 내용 및 style을 변경하는데 많은 보수 비용이 필요로 하게 된다. 다시말한다면 css 파일이 없어도 html만으로도 웹을 실행하는데 문제가 없어야 됨을 의미한다.
다음으로 테그에 대해서 알아보도록한다.
1. Element
- 테크를 알기전에 엘리멘트 개념에 대해서 알고 있어야 한다.
- 엘리멘트란 테그의 시작과 끝을 묶어서 엘리멘트라고 한다.
ex)
html, body, p 엘리멘트이다 각각의 영역은 다음과 같다.
html : 1줄(<html>)~5줄(</html>)
body : 2줄(<body>)~4줄(</body>)
p : 3줄(<p> </p>)
- 모든 element는 다음 특성을 일반적으로 포함한다.
ⓐ id : element의 unique id로 css나 다른 문서에서 특정 element를 선택하기 위해 사용되는 값
ⓑ class : style을 위한 클래스
ⓒ style : inline style로 요즘은 css에서 스타일을 정의하므로 잘 쓰이지 않는다.
ⓓ title : 부가 정보
2. 기본구조(기본 tag)
- 필수 요소
ⓐ <html> : root element
ⓑ <head> : title, meta정보, script등이 포함 되있는 테크
ⓒ <body> : 본문으로 실제 웹 브라우져에 보여지는 부분
- 기본 요소
ⓐ <h1>~<h6> : 제목으로 사용되는 것으로 숫자가 작을 수록 크다.
ⓑ <p></p> : 단락(기본적으로 블럭의 형태)
ⓒ <br/> : 다음 줄로 넘김
ⓓ <hr/> : 가로 구분선
ⓔ <div></div> : 영역구분(블럭)
ⓕ <span></span> : 영역구분(line)
> ⓔ~ⓕ의 형식적 구분에 대해서는 <div>는 네모 박스이며 <span>은 텍스트 라인 단위이다.
> ⓒ~ⓓ에서의 '/'는 xml의 문법적 요소가 가미 된 것으로 html에서 사용되는 것은 '/'이 없어도 된다.
ⓖ <!-- 주석 --> : 주석이다.
3. 링크
- 형태 : <a href = "url">Text</a>
> a태크는 버튼 을 클릭 가능한 상태로 만들고 href는 링크를 다는 것이다. Text를 클릭하면 url로 연결된다.
> url로 사용되는 특수한 것으로 "#"이 있다. 이는 자기 자신 페이지를 의미한다.
- 속성 값
ⓐ target : 어느 창에 나타 낼 것인가?
- "_blank" : 새창 // "_top" : top프래임 // "frame name" : 특정 프레임
ⓑ name : 페이지 내부의 특정 부분을 링크하고 싶을 때
4. 이미지 추가
- 형태 : <img src = "url">
> url값은 특정 주소를 사용해도 되지만, html이 구현된 디렉토리에서의 그림도 사용가능하다.
ex) img src = "hello.jpg"
- 속성 값
ⓐ width, height : 크기
ⓑ usemap : 이미지맵 / 맵을 분활하여 누르는 곳에 따라 다른 곳으로 연결된다.
- 사용 가능한 그림 확장자
ⓐ jpg : 압축률이 높으나 손실률이 높다
ⓑ gif : 작은 아이콘에 사용된다. 투명 이미지가 구현가능하다.
ⓒ png : 적은 색상수로 구현되고 압축률이 높고 손실이 적다. 또한 투명 이미지 사용이 가능하다.
> 다른 어떤 것을 다룰때도 마찬가지지만 특히 그림(구현시 많이사용됨)은 파일 사이즈에 신경을 많이써야 한다.
> 웹에서 파일의 크기는 서버의 반응속도와 직관적으로 연결되있기 때문이다!!
5. 리스트
- html에서 만들수 있는 리스트의 종류는 2가지가 있다.
ⓐ ul : 순번이 없는 리스트
ⓑ ol : 순번이 있는 리스트
- 리스트를 구성하는 아이탬인 li태그와 같이 사용된다.
6. 표
- 그리드 모양을 띄고 있는 표를 생성 가능하다.
- <table> 테그를 사용하여 표를 나타내주고 다음과같은 것으로 구현을 한다.
- <tr> : 한 행지정 / <th> : header기능이 있는 한칸 / <td> : 일반 적인 한칸이 따라온다.
7. form
- 데이터를 서버로 전송하기 위해 사용되는 테그
- 형태 : <form action = "url" method = "'post'or'get'"></form>
> url로 파일을 보내는데 보내는 방식이 post 또는 get 방식을 취한다.
> 보내는 방식 옵션은 2개중 한개를 선택하며 각각의 의미는 다음과 같다
ⓐ post : http 프로토콜 내부에서 인코딩후 전달한다. 길이 제한이 없으며 받는 사람이 디코딩이 가능해야한다.
ⓑ get : URL뒤에서 전달하는 방식으로 길이제한이 있다.
- 사용 가능한 element(tag)
ⓐ input : 사용자가 입력하는 방식
> 속성으로 Text(일반), Password(페스워드 방식), Radio(라디오 버튼), Checkbox(채크박스),
File(파일 전송창), Hidden(브라우져에 안보이는 입력창), Button(버튼) 등이 있다.
> Button은 폼 전송을 나타내거나 초기화 하는 버튼으로 잘 사용된다.
다음은 form과 표를 같이 사용한 것의 예이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4.loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>웹 프로그래밍 실습</title>
</head>
<body>
<form method = "post">
<table border = "1">
<tr>
<td>아이디</td>
<td><input type = "text" name = "id" size="10"></td>
<td colspan = "2"><input type = "button" value = "중복조회"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type = "password" name = "pwd" size = "10"></td>
<td>확인</td>
<td><input type = "password" name = "re_pwd" size = "10"></td>
</tr>
<tr>
<td>이름</td>
<td><input type = "text" name = "name" size = "10"></td>
</tr>
<tr>
<td>이메일</td>
<td><input type = "text" name = "e_mail" size = "10"></td>
</tr>
<tr>
<td>성별</td>
<td colspan = "3"><input type = "radio" name = "sex" value = "m">남
<input type = "radio" name = "sex" value = "f">여
</td>
</tr>
<tr>
<td>지역</td>
<td colspan = "3"><select name = "area">
<option value = "seoul">서울</option>
<option value = "seoul">대전</option>
<option value = "seoul">대구</option>
<option value = "seoul">부산</option>
<option value = "seoul">포항</option>
<option value = "seoul">경기</option>
<option value = "seoul">강원</option>
<option value = "seoul">충남</option>
<option value = "seoul">기타</option>
</td>
</tr>
<tr>
<td colspan = "4"><input type ="checkbox" name = "cheak" value = "o">약관에 동의합니다</td>
</tr>
</table>
<input type = "submit" value = "회원가입">
</body>
</html>