웹서비스의 세가지 기술인 URL,HTTP,HTML중에서 문서작성 기술인 HTML문서의 특징과 대략적인 구조를 후딱 살펴보고 지나갑시다.
■ HTML문서는 태그(TAG)로 구성된다.
■ 태그(TAG)는 다양한 속성을 가지며 속성은 값을 가질 수 있다.
■ HTML문서는 텍스트 파일이다.(메모장에서 볼 수 있다)
■ 문서 작성은 메모장 또는 나모나 드림위버,워드 한글에서 가능하다.
■ 확장자는 .htm 또는 .html 로 하여야 한다.
■ 결과확인은 브라우저를 통해서 할 수 있다.
■ 문서구조 : 크게 head부분과 body 부분으로 구성된다.
<html> |
이 문서가 html문서임을, 시작임을 알린다 | |
|
| <head> |
head부분 |
| *헤드내용 |
주로 서버와 클라이언트간의통신과 관련된 내용들이 들어감 | </head> |
| |
|
| <body> |
body부분 |
| *body내용 |
사용자 화면에 보여질 내용들이 들어감 | </body> |
| |
|
| </html> |
html문서의 마지막임을 알린다 |
|
* head부분과 body부분에는 많은 태그를 이용하여 정보를 표현하게 된다.
* 대체로 시작태그가 있으면 마감태그가 있지만 마감태그를 갖지 않는 태그도 있다.
■ <title>~</title>(*중요)
문서의 제목을 나타내는 태그로 head부분에 기술되어야 하므로 <head>~</head> 속에 적어주면 된다.
* 드래곤아이 사이트의 title 태그 적용 예 |
<html> <head> <title>드래곤아이 ▒▒▒ asp강좌,asp소스,자료실 ▒▒▒</title> </head> <body>
본문의 내용
<!-- 여기는 주석 -->
</body> </html> |
■ 주석
html문서내에서 특정부분을 브라우저에 나타내고 싶지 않을 경우
<!-- 내용 --> 처럼 주석태그를 이용한다. 여러줄이 들어갈 수 있다.
■ 계층적인 구조
HTML태그 사용시 중첩을 시킬 수 있으며, 이 경우 마감태그는 시작태그의 역순으로 마감을 해야한다.
* 아래는 간단한 테이블 태그의 계층적인 구조를 보고 있다.
<table> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<td> |
|
|
|
|
|
내용 |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</table> |
|
|
|
|
* head부분에 들어가는 태그가 아니고 body부분에 들어가는 태그 연습시에는 head부분을 생략하고 연습을 하는게 시간을 절약할 수 있다. 물론 실제 서비스 될 문서는 모든 태그를 가져야 한다.
* 태그의 예 : font, p, br, body, table ......
* 속성의 예 : color="red", align="left", bgcolor="blue" ......
* 사용 예 : <font color="red"> , <table align="left">, ......
--------------------------------------------------------------------------------
가장 기본적인 줄바꿈 및 문단관련 태그를 살펴보고 직접 해봄으로써 html문서에 익숙해 지도록 하자!!
태그 연습시에는 C:\나 D:\ 드라이브에 작업폴더를 하나 만들고보조프로그램에 있는 메모장을 실행시켜 태그를 작성한 후 저장위치를 위에서 만든 작업폴더를 찾아보기 한뒤 xxx.html 로 저장하면 된다. 실행은 탐색기로 해당파일을 찾아 더블클릭하면.....브라우저가 실행시켜 줄것이다.
■ <br>
줄을 바꾸는(break) 태그로 마감 태그는 없다. 여러번 줄바꿈을 하려면 여러번 기술하면 된다.
* br 태그로 줄바꾸기 |
안녕하세요~~~<br> 드래곤입니다.<br><br><br> 이곳을 찾아주신 모든 분들에게<br> 즐겁고 유익한 시간이 되기를 바랍니다.
|
안녕하세요~~~ 드래곤입니다.
이곳을 찾아주신 모든 분들에게 즐겁고 유익한 시간이 되기를 바랍니다. |
■ <p>
p 태그는 문단(paragraph) 태그로 다른 문단과 구분하는 공간을 띄우게 된다.
* p 태그로 문단 정의하기
|
때로는 웃기도 하고<p>
울기도 하며 ..... <p><p> |
때로는 웃기도 하고
울기도 하며 ..... |
* 마감태그없이 사용, 여러번해도 한번 적용
<p>활짝 열린 인터넷 세상</p>
<p>그 속에서 함께 숨쉬며</p> |
활짝 열린 인터넷 세상
그 속에서 함께 숨쉬며 |
* 범위를 문단으로 할 경우 문단과 문단 사이를 한줄 정도 간격을 둔다
<p align=center>가운데 정렬</p>
<p align=left>왼쪽 정렬</p>
<p align=right>오른쪽 정렬</p> |
가운데 정렬
왼쪽 정렬
오른쪽 정렬 |
* 문단 속의 내용을 align 속성으로 정렬을 ...
■ <center>~</center>
태그사이의 내용을 쉽게 한방에 가운데 정렬을 할 수 있다. 주로 body태그아래에서 문서 내용 전체를 가눙데 정렬할 때 사용한다.
* br 태그로 줄바꾸기
|
<center> 안녕하세요~~~<br> 드래곤입니다.<br><br><br> 이곳을 찾아주신 모든 분들에게<br> 즐겁고 유익한 시간이 되기를 바랍니다. </center>
|
안녕하세요~~~ 드래곤입니다.
이곳을 찾아주신 모든 분들에게 즐겁고 유익한 시간이 되기를 바랍니다. |
■ <pre>~</pre>
태그사이의 내용을 눈에 보이는 데로 출력하고자 할 때.... 브라우저는 사용자의 엔트키나,공백,탭키 같은 걸 이해하지 못하는데 이 태그를 사용하면 메모장에 표현한 그대로를 나타낼 수 있다.
* pre 태그로 보이는 데로 표현하기 * 폰트 크기가 디폴트인 3이 아닌 2정도로 작아진다.
|
<pre> 안녕하세요~~~
드래곤 입니다.
이곳을 찾아주신 모든 분들에게 즐겁고 유익한 시간이 되기를 바랍니다. </pre>
|
안녕하세요~~~ 드래곤 입니다. 이곳을 찾아주신 모든 분들에게 즐겁고 유익한 시간이 되기를 바랍니다. |
가장 많이 사용되는 글자관련 태그로 font 태그가 있다. 글자는 글씨체,색상과 크기가 중요하므로 이들에 관한 속성이 준비되어 있다.
■ <font>~</font>
* 글자체 속성에 사용할 수 있는 값은 사용자 피시에 설치되어 있는 아래 윈도우 글꼴을 사용할 수 있다. |
굴림체, 바탕체, 궁서체, 돋움체, arial, arial black, courier, comic Sans MS, Time New Roman, Modern, Impact, MS song, Verdana, Terminal
|
<font face="궁서체">드래곤아이</font> |
드래곤아이 |
* 색상은 RGB 색상값이나 색상이름을 적어주면 된다.
|
red,blue,white,green.......... #ff0000,#0000ff,#ffffff,00ff00.........
|
<font color="#ff0000">드래곤아이</font> |
드래곤아이 |
* 사이즈는 1-7까지 다양한 크기가 있다. 디폴트 크기는 3 크기이다.
|
1-7 까지 크기를 ...
|
<font size="1">드래곤아이1</font> <font size="2">드래곤아이2</font> <font size="3">드래곤아이3</font> <font size="4">드래곤아이4</font> <font size="5">드래곤아이5</font> <font size="6">드래곤아이6</font> <font size="7">드래곤아이7</font> |
드래곤아이1 드래곤아이2 드래곤아이3 드래곤아이4 드래곤아이5 드래곤아이6 드래곤아이7 |
<font face="궁서체" color="#ff0000" size="5" >드래곤아이</font> |
드래곤아이 |
특별히 제목글의 크기를 나타내는 h 태그가 있다. font 나 h 어느 태그로 크기를 나타내든 상관없다.
■ <hn>~</hn>
* n 에는 1에서 6까지를 사용할 수 있고, 1이 가장 큰 사이즈이다. * 자동 줄바꿈이 들어가고 아래부분에 한줄정도 공간을 확보한다. |
<h1>회사소개</h1> <h2>회사소개</h2> <h3>회사소개</h3> <h4>회사소개</h4> <h5>회사소개</h5> <h6>회사소개</h6> |
회사소개
회사소개
회사소개
회사소개
회사소개
회사소개 |
글자의 모양을 표현하는 태그로 꼭 필요한 경우가 있다. 첨자표현 이나 이탤릭체,볼드체는 자주 사용하는 것이다.
■ 글자모양내기 태그
|
태그 |
소스 |
결과 |
설명 |
<i> |
안녕!<i>드래곤</i>입니다 |
안녕!드래곤입니다 |
이탤릭체 |
<b> |
안녕!<b>드래곤</b>입니다 |
안녕!드래곤입니다 |
볼드체 |
<sub> |
A<sub>2</sub> 지역에 화재발생 |
A2 지역에 화재발생 |
아래첨자 |
<sup> |
10<sup>2</sup>은 얼마죠 |
102은 얼마죠 |
윗첨자 |
<u> |
우리의 목표는 <u>웹마스타</u> |
우리의 목표는 웹마스타 |
밑줄 |
<big> |
이것보다 <big>조금크게</big> |
이것보다 조금크게 |
조금크게 |
<small> |
이것보다 <small>조금작게</small> |
이것보다 조금작게 |
조금작게 |
<strike> |
삭제된 <strike>내용</strike>으로 |
삭제된 내용으로 |
취소선 |
<font color=red>안녕!<b><i>드래곤</i></b>입니다 </font> |
안녕!드래곤입니다 |
* b (볼드체) 는 strong 을 사용해도 같은 효과를...
|
안녕!<b>드래곤</b>입니다 안녕!<strong>드래곤</strong>입니다 |
안녕!드래곤입니다 안녕!드래곤입니다 |
특별히 인용문을 표현하고 싶은 경우 약간 들여쓰기로 표가 나게 되는 blockquote 를 사용할 수 있다. 테이블 태그가 약하다면, 아니면 빨리 문서를 작성해야한다면 사용할 수 있다.
■ <blockquote>~ |