-출처 : http://www.ilsancity.com/php/main_01.php -
위 출처 강좌 중 핵심만...
▒ HTML 문서의 구성요소
HTML 문서는 다음 4가지 종류의 코드들의 집합체입니다.
1. 요소(Elements)
요소란 태그에 포함된 가장 중요한 부분을 말하는 것으로, 태그의 의미를 결정하는 역할을 합니다. 시작태그와 종료태그를 가질 수 있으며 태그사이에 텍스트나 다른 요소를 가질 수 있습니다. 예를 들어 <TITLE>, <BODY>는 태그인 반면에 TITLE이나 BODY는 요소라고 부룹니다. <IMG>처럼 시작태그만 있는 요소도 있습니다.
2. 태그(Tags)
태그란 "<"기호와 ">"기호로 둘러 쌓인 문서의 중간에 붙여주는 일종의 꼬리표입니다. 태그에는 시작태그와 종료태그 두 종류가 있습니다. 시작태그는 요소를 시작하며 종료태그는 요소를 끝냅니다. 물론 모든 요소들이 종료태그로 끝나는 것이 아닙니다. 예를 들어 <TITLE>로 시작한 제목요소는 </TITLE>라는 종료태그를 갖는 복합태그이지만, 앞에서 말씀드린 데로 이미지 요소인 <IMG>는 종료태그를 갖지 않는 단독태그입니다.
3. 속성(Attributes)
속성은 요소의 시작태그 내에 사용하는 것으로 명령을 구체화시키는 것입니다. 예를 들어 텍스트의 폰트 지정을 위해 사용하는 <FONT>....</FONT>요소는 SIZE, COLOR, FACE 등의 속성을 갖습니다.
<FONT SIZE = 5>처럼 시작태그 내에 사용되며 속성과 변수사이에는 "="라는 부호를 사용하여 연결합니다. 속성은 보통변수를 갖지만 NOSHADE 등 일부 속성은 변수를 갖지 않습니다.
4. 변수(Arguments)
변수는 속성과 관련된 값을 말 합니다. <BR CLEAR = "left">에서 " "내에는 right나 all도 사용될 수 있는 데, 이들은 속성 CLEAR의 변수이며 속성과 변수는 등호(=)에 의해 구분됩니다. 변수 중에는 변수를 " "내에 넣는 것과 SIZE = 5처럼 넣지 않는 것이 있으므로 속성마다 사용여부를 잘 알아두어야 합니다.
▒ HTML 문서의 기본구조 알기
HTML 문서의 기본 구조는 머리글(Heading)과 본문(Body)으로 나누어 집니다. 머리글은 문서의 제목(Title)을 적고 본문은 문장의 실제 내용들이 들어가게 되는 것이지요.
그러면, 기본 형태를 한번 보실까요?
<HTML>
<HEAD>
<TITLE> 웹 문서의 제목 </TITLE>
</HEAD>
<BODY>
본문 내용
</BODY>
</HTML>
○ <HTML> : HTML 문서 지정
작성된 문서가 HTML로 작성되었다는 의미를 가지고 있으며, 앞으로 사용할 모든 태그는 <HTML>과 </HTML>사이에 들어가야 합니다.
○ <HEAD> : 문서의 머리글
보여주는 문서의 제목을 작성하는 부분으로 <TITLE>...</TITLE>태그와 함께 사용하지요. 이곳에는 문서의 내용을 가장 잘 나타낼 수 있는 짧고 명료한 단어나 문장을 입력합니다. 여기서 입력한 제목이 웹 브라우저의 화면 상단의 [제목표시줄]에 표시가 되거든요.
○ <BODY> : 문서의 본문
표현하고자 하는 모든 문서들이 나열되는 곳으로 홈페이지의 내용을 전부 포함한다고 할 수 있죠!
▒ 태크 요약
1. 서식 관련 태그 요약
|
<BR> |
기능 : 한 줄 바꿈 |
|
<P> |
기능 : 문장의 단락 구분 |
|
<CENTER>..</CENTER> |
기능 : 가운데 정렬 |
|
<DIV>......</DIV> |
기능 : <P>태그와 거의 비슷한 역할을 하지만, |
|
<HR> |
기능 : 줄 긋기 |
2. 글꼴 관련 태그 요약
|
<B>......</B> |
기능 : 굵은 글씨 |
|
<I>.......</I> |
기능 : 이탤릭체 |
|
<U>......</U> |
기능 : 밑줄 |
|
<TT>......</TT> |
기능 : 타이프체 |
|
<SUB>......</SUB> |
기능 : 아래 첨자 |
|
<SUP>......</SUP> |
기능 : 위 첨자 |
|
<BLINK>.....</BLINK> |
기능 : 깜빡글자(단, 넷스케이프에서만 사용) |
|
<STRIKE>.....</STRIKE> |
기능 : 텍스트 가운데 줄을 그음 |
|
<BLOCKQUOTE></BLOCKQUOTE> |
기능 : 인용문 등에 사용. 자동으로 줄을 바꿔주고 들여쓰기를 한채 나타남. |
|
<!-- --> |
기능 : 주석을 달 때 사용. 지정한 글자는 브라우저에 나타나지 않음 |
3. 목록 관련 태그 요약
|
<UL>......</UL> |
기능 : 순서가 필요없는 목록을 적을 때 사용 |
|
<OL>.....</OL> |
기능 : 순서가 필요한 목록을 적을 때 사용. <LI>태그와 함께. 옵션으로 'START='하고 시작번호를 지정할 수 있다. 1로 지정하면 1부터 시작하고, 3으로 지정하면 3부터 시작하는 목록이 작성된다. |
|
<LI> |
기능 : 단일태그로 조그만 동그라미나 네모같은 아이콘을 보여준다. |
|
<DL>.....</DL> |
기능 : 제목과 내용을 표현하고 싶은 목록을 지정. <DT>, <DD>태그와 함께 쓰인다. <DT>태그에는 제목을 적고 <DD> 태그에는 내용을 적는다. |
4. 배경색,배경 이미지,텍스트 부분 색상 지정하기 등 BODY 관련 태그
색깔은 영문이름 지정 또는 16진수로 표현
예) 검정색 #000000 ~ 흰색 #FFFFFF까지 표현 (RED / Green / Blue )
Green : 00FF00, Blue : 0000FF, Black : 000000, White : FFFFFF, Gray : 888888, Yellow : FFFF00, Cyan : 00FFFF
아래 칼라테이블을 클릭하시면 다양한 색상표를 볼 수 있어요.
☞ RGB 색상표를 참고해 보세요.
5.문서 연결 태그
<A>...</A> 태그
- 기능 : 링크 지정
6.이미지 태그
|
<IMG>태그 |
|
<IMG SRC="그림파일명"> |
경로가 다르면 상대경로를 넣어준다 |
|
<IMG ALT="설명문"> |
이미지는 글자로다 로딩되는 속도가 느리고 브라우저에 따라 이미지를 보이지 않게 하는 기능이 있기 때문에 그림이 나올 부분에 설명을 붙여 주면 이용자 입장에서 도움이 된다 |
|
<IMG BORDER=n> |
이미지 테두리선 굵기지정. 0은 테두리 안보이게, 1은 테두리 보이게 |
|
<IMG WIDTH=n> |
이미지 가로폭 지정. 단위는 픽셀 |
|
<IMG HEIGHT=n> |
이미지 세로폭 지정 |
|
<IMG ALIGN="정렬방식"> |
left, center, right를 줌으로써 왼쪽,가운데,오른쪽으로 정렬할 수 있다. |
7. <TABLE> 태그
|
<TABLE>...</TABLE>태그 |
|
<TABLE BORDER=n> |
표의 테두리 두께를 조절. (0은 테두리를 숨기고, 1부터 숫자가 커질수록 두께는 굵어짐. BORDER 지정하지 않으면 O으로 설정됨.) |
|
<TABLE BORDERCOLOR="#색상코드"> |
표의 테두리 색깔 지정. |
|
<TABLE WIDTH=n HEIGHT=n> |
표의 가로폭과 세로높이 지정. (단위는 픽셀) |
|
<TABLE CELLPADDING=n> |
셀의 크기 조절. 셀과 글자의 간격 조절. (0은 간격을 없애고 1부터 숫자가 커질수록 간격은 넓어짐.) |
|
<TABLE CELLSPACING=n> |
셀과 셀의 간격을 조절. (0은 간격을 없애고 1부터 숫자가 커질수록 간격은 넓어짐.) |
|
<TABLE BGCOLOR="#색상코드"> |
표 전체의 색깔 지정 |
TR 태그
일단 위의 <TABLE>이 정의 되면 그 내부에 TR(Table Row)태그와 TD(table Data)태그를 이용해서 열(Row)과 행(Column)을 만들어 내게 되며, 이렇게 해서 만들어 진 여러개의 직사각형 공간을 셀(cell)이라고 합니다.
여기 TR태그는 표를 가로로 자르는 열을 만드는 태그인데 이 태그만으로는 화면상 아무것도 출력이 되지 않지요.
|
<TR>...</TR>태그 |
TD 태그
TD태그는 TR태그와 동등한 위치에 있는 것이 아니라 항상 TR태그에 종속되어 TR태그가 나누어 놓은 열을 세로로 자르는 역할을 합니다.
이렇게 해서 만들어진 행은 비로서 내부에 출력될 텍스트나 이미지를 포함할 수 있게 되는 것이지요.
|
<TD>...</TD>태그 |
TH 태그
TH태그는 테이블의 헤더로서 내용이 진한 글씨로 나타나고 가운데 위치로 정렬됩니다.
헤더셀은 TH태그를 써서 표현하는데 주로 1열에 위치하여 아래에 있는 셀들의 제목이나 특징을 대표하는 데 사용되지요.
만약 헤더 셀을 테이블의 왼쪽에 정렬시키면 TR태그의 처음에 TH태그를 하나씩 넣어주면 됩니다.
|
<TH>...</TH>태그 |
<TD ALIGN=정렬방식> : 셀 안의 내용을 LEFFT, CENTER, RIGTHT로 왼쪽,가운데,오른쪽으로 정렬 할 수 있습니다.
<TD VALIGN=정렬방식> : 셀 안의 내용을 TOP, MIDDLE, BOTTOM로 위,중간,아래로 세로정렬 할 수 있습니다.
※ <TR>에 ALIGN, VALIGN을 주면 TD 하나하나에 주지 않아도 TR에 묶여있는 모든 TD에 적용됩니다.
<TD COLSPAN=n> : 셀을 가로로 합치고 싶을 때 사용.
<TD ROWSPAN=n>: 셀을 세로로 합치고 싶을 때 사용.
|
|
|
| |||||||||||||||||
|
기본 틀 |
<TD COLSPAN=2> |
<TD ROWSPAN=2> | |||||||||||||||||
'자기개발 > JSP' 카테고리의 다른 글
| The server does not support version 3.0 of the J2EE Web module specification 에러 (0) | 2012.02.14 |
|---|---|
| HTML강좌 (0) | 2012.01.22 |