1.HTML의 기본요소
웹의 표준 HTML 문서는 마크업 태그(Markup)를 사용하여
제작된 웹문서를 뜻합니다. 마크업 태그란 HTML 문서 작성시 문장,
그림 등을 지정하는 언어이며 현재 버전은 HTML4.0 입니다.
2.태그의 특징
태그는 보통 여는태그와 닫는태그로 있습니다.
예)
<html> = html이 시작되었다 [열다]
</html> = html이 끝났다.[닫다]
단, <hr>, <br>, <p>, <img>, <tr>, <meta> 등은 단독으로 쓰입니다.
3.HTML 문서의 기본 구조
- <html>-html 문서임을 시작과 끝에 정의함.
- <head>-헤더에 속하는 부문으로 <title>과 <meta> 태그가 여기에 속한답니다.
- <title>-웹페이지의 제목(타이틀) 을 나타냅니다.
- <body>-웹 브라우저의 본문에 보여지는 내용들을 태그로 쓰는곳.
| <html> <head> <title>문서의 제목이 들어가는 곳 </title> </head> <body> 웹 브라우저의 화면에 보여지는 내용 ㆍ ㆍ </body> </html> |
(문자 태그)여러 가지 문자 관련 속성을 알아봅니다.
1.이건 약간 비슷하긴 하지만, 문자의 크기를 정하는 태그입니다.
|
view-source: |
결과 |
|
<h1> 크다 </h1> |
크다 |
|
<h3> 중간 </h3> |
중간 |
|
<h5> 작다 </h5> |
작다 |
2.문자 크기를 굵게.
| <b> 음냐 </b> | 음냐 |
3.문자를 이탤릭체로 나타내기.
|
<l> 이탤릭체 </l> |
|
4.문자에 밑줄을 침.
|
<u> 중요 </u> |
중요 |
5.문자를 주변문자보다 크게.
|
으<big>으하하</big>하 |
으으하하하 |
6.문자를 아래첨자,윗첨자로 표현.(수학에...뭐; 여러운 표기하는데에 쓰면 좋을듯)
|
아<sub>래첨</sub>자 |
아래첨자 |
|
윗<sup>첨</sup>자 |
윗첨자 |
8.문자를 주변문자보다 작게.
|
주변보다<small> 작냐</small>훗 |
주변보다 작냐훗 |
9.글씨나 이미지, 테이블 등을 위치 정렬하는 태그입니다.
|
<div align="right">오른쪽구석</div> |
결과-> |
오른쪽구석 |
|
<div align="left">왼쪽퉁이</div> |
결과-> |
왼쪽퉁이 |
|
<center>중앙*-_-*</center> |
결과-> |
중앙*-_-* |
↓ 다음은 문자태그는 아니고. 그냥 유용할거같은 문서속성. 마크업태그입니다. ↓
1.저작권표시(©)의 삽입 : ©
문서에 대한 저작권 표시를 삽입하려면 반드시 특수문자 (©)를 사용해야 합니다. 단, ©만 사용해도 되지만, 넷스케이프 내비게이터에 깨지지 않고 나타나게 하려면 반드시 <font>태그와 함께 사용해야 합니다.
예) 인터넷 익스플로러 → ©
결과) ©
2.공백 (space)의 삽입 :
HTML문서에서는 스페이스키(Space Key)를 여러번 쳐도 1개의 공백만을 허용하죠. 따라서 여러개의
공백을 넣으려면 반드시 공백(Space)에 해당하는 특수문자( )를 사용해야 합니다.
예) 진~ 짜
결과) 진~ 짜
3.정형화된 문서(Preformatted Text) : <pre>
HTML문서에서는 [Enter]키나 [Space Bar]키의 사용은 의미가 없죠. 그런데, 여러번의 엔터 키나 여러개의 스페이스키를 그대로 웹문서에서 나타나게 하려면 <pre> 태그를 사용해야 합니다.
|
|
source |
결과 |
|
<pre> 사용 |
<pre> |
하지만 드라군이 출동하면 어떨까? |
|
사용없이 |
하지만 드라군이 출동하면 어떨까? |
하지만 드라군이 출동하면 어떨까? 드!! 러가 ㅅㅂㄻ |
4.주석문 : <!-- 이 사이 -->
문서를 제작하는 사람이 참고로 하고자 하는 내용을 입력해두는 태그로, 이 주석문 안에 있는 내용은 웹 브라우저에서는 보이지 않고, 소스에서만 보여집니다.
홈페이지만드는 사람들에겐 필수죠. 미도 필수
예) <!-- <textarea> 샒 </textarea> -->
결과) ↑ "<!--" 와, "-->" 사이의 태그와 글씨 등 모두 무시 (적용되지않음)소스에서만 보입니다.
6. "<" or ">"
마지막으로 이건 "태그에 관한 홈페이지를 만드시는 분" 께 필수가 되는 건데, 자세히 설명은 안하죠. 태그를 설명할 때, 웹에서 "<" 이것과 ">" 이것을 나타내는 소스 입니다.
|
소스 |
결과 |
|
< |
< |
|
> |
> |
Tip 6번 방식 외에 4번을 이용해서 태그 소스가 적용되지 않고 그대로 나타나게
할 수도 있습니다.
|
소스 |
<<!-->embed src="#"><<!-->/embed> |
|
결과 |
<embed src="#"></embed> |
(marquee)
<marquee> 자 빨리하고 끝내자... </marquee> ▼
이렇게쓰면 됩니다만 마퀴태그를 더 다양한 방법으로 쓰고 싶다면
태그에 속성을 추가 시키시면 됩니다
NEXT▶
※속성은 붉은색으로 표시.
<marquee direction=right> 오른쪽으로 가자</marquee> ▼
<marquee direction=up> 이륙하자~</marquee> ▼
<marquee direction=down> 착륙하자~</marquee> ▼
※이 속성은 글씨가 이동하는 "속도" 인데요, 붉은색 숫자가 높을수록 더 빠릅니다.
<marquee scrollamount=70>속도 70!! </marquee> ▼
<marquee behavior=alternate> ◀왓다갓다 좌우왕복▶</marquee> ▼
<marquee behavior=alternate direction=up> 아래위 왕복</marquee> ▼
<marquee bgcolor=ffff99> 마퀴태그에 배경넣기</marquee> ▼
- 휴.. 또 해 봅시다. 이미지,사진,그림 모두 같습니다. 이미지태그는 기본 <img src="그림주소">가 됩니다.
웹에서 이미지의 주소를 보려면 그림에
오른쪽클릭을 한 후 "등록 정보" 또는 "속성" 을 선택하시면
주소(URL):에 그림의 주소가 나옵니다.
1.이미지 크기 정하기▶
<img src="img/totoro" width="500" height="100"> ▶ 가로500, 세로100 크기 입니다.
크기는 퍼센트% 로 적어도 됩니다. (%로 지정하면 해당페이지 크기가 100%기준이 됩니다)
실행 결과)
2.alt문자열 넣기▶
<img src="img/totoro.jpg" alt="토토로"> ▶ 그림에 마우스를 가져가면 "토토로"라는문자가 뜹니다.
실행 결과)
3.테두리 넣기▶
<img src="img/totoro.jpg" border="7"> ◀ 이 숫자 "7" 이 테두리 굵기가 7이라는 겁니다.
링크태그에 그림을 링크한다면 border="0" 으로 해줘야 깔끔하게 나옵니다;
실행 결과)
4.문장의 위치 정렬하기(작은 이미지라해도 문자와 같은줄에 쓴다면 필요합니다.)▶
<img src="img/totoro.jpg" align="top"> 문장이 이미지의 상단 부분에 정렬됩니다. <img src="img/totoro.jpg" align="middle"> 문장이 이미지의 중간 부분에 정렬됩니다. <img src="img/totoro.jpg" align="bottom"> 문장이 이미지의 하단 부분에 정렬됩니다. |
'취미 & 상식 > IT & Web' 카테고리의 다른 글
| 3년 약정시 아이패드 공짜? '요금제 유출' 논란 (0) | 2010.11.05 |
|---|---|
| 웹디자인 폰트와 컬러 이야기 (0) | 2010.07.22 |
| 갤럭시S 출시에 따른 디자인 및 스펙 해부 (0) | 2010.06.15 |
| [iPHONE 4] 아이폰4 출시에 따른 집중 해부 (0) | 2010.06.15 |
| 낡은 플랫폼의 붕괴… 방송사들이여 TV를 버려라 (0) | 2010.06.08 |