■ 기본 HTML 태그 익히기
1. <HR> 선을 그릴때 사용되는 태그
▶ 형식
| <HR WIDTH=선길이 SIZE=높이 ALIGN=정열위치 NOSHADE> |
| WIDTH | 비율(%)이나 픽셀값으로 설정할수있습니다. |
| SIZE | 선의 높이를 설정합니다. |
| ALIGN | 위치조정 (LEFT,CENTER,RIGHT) ALIGN생략하면 자동으로 중간정렬합니다 . |
| NOSHADE | 입체감이 없어집니다. |
2. 글자크기나 모양을 정해주는 태그
|
이탤릭체 |
<CITE></CITE> | 이텔릭체로보여줍니다 |
| <EM></EM> | ||
| <I></I> | ||
| <VAR></VAR> | ||
| 아래첨자 | <SUB></SUB> | 아래첨자로 보여줍니다 |
| 위첨자 | <SUP></SUP> | 웟첨자로 보여줍니다 |
| 굵은체 |
<STRONG></STRONG> | 굵은체로 보여줍니다 |
| <B></B> | ||
| 타자기체 |
<KBD></KBD> | 타자기체로 보여줍니다 |
| <CODE></CODE> | ||
| <TT></TT> | ||
| 조금크게 | <BIG></BIG> | 글자를 조금 크게 보여줍니다 |
| 조금작게 | <SMALL></SMALL> | 글자를 조금 작게 보여줍니다. |
| 깜박이는 글자 | <BLANK></BLANK> | 깜박이는 글자를 지원합니다.(넷스케이프에서만 지원 합니다.) |
| 가운데 줄근 글자 | <STRIKE></STRIKE> | 글자 가운데에 줄그은 글자체로 보여줍니다. |
| 밑줄그은 글자 | <U></U> | 밑줄 그의 글자체로 보여줍니다 |
| <HTML> <HEAD> <TITLE>선그리기와 글자모양</TITLE> <BODY> 선을 그리자 <HR> 선을 그리자 <HR WIDTH=40% SIZE=4> 선을 그리자 <HR WIDTH=400 SIZE=30 NOSHADE> 선을 그리자 <HR WIDTH=400 SIZE=10 ALIGN=CENTER><P> <I>이텔릭체 글자<I><B>굵은글자<B><BR> <U>밑줄그은 글자</U><TT>타자기 글자</TT><BR> <BIG>조금크게</BIG><SMALL>조금작게</SMALL><BR> <SUP>위첨자</SUP> 일반글자 <SUB>아래첨자</SUB><BR> <STRIKE>가운데 줄근 글자</STRIKE><BR> </BODY> </HTML> |
3. 목록 만들기
|
태그종류 |
설명 |
| <OL></OL> | 번호가 있는 목록을 만들어 줍니다 |
| <UL></UL> | 번호가 없는 목록을 만들어 줍니다 |
| <MENU></MENU> | 짧은 문자열의 목록을 만들때 사용합니다 |
| <DIR></DIR> | 단어와 같은 목록을 만들때 사용합니다 |
| <LI> |
목록 테그에서 기호를 보여줍니다 |
4. 링크
|
문서사용의 예 |
설명 |
| <A HREF="TEXT">문장</A> | 현재디렉토리에서 TEXT.HTML를 찾습니다 |
| <A HREF="HTTP://WWW.DAUM.NET>문장</A> | 다음으로 연결합니다 |
| <AHREF="MAILTO:CABBAGE75@HANMAIL.NET> 문장</A> |
이메일 보내집니다 (아웃룩 익스프레스) |
| <A NAME="A">문장</A> | 현재 페이지 내에서 이동할때 쓰입니다. |
5. 이미지 삽입
홈페이지 안에 삽입할수 있는 이미지의 파일 형식은 BMP,JPG,GIF등이 있습니다 가장많이 사용하는 형식은 JPG와GIF 인데 GIF는 JPG에 비해 다양한 색을 사용 할수는 없지만 배경을 투명색으로 설정할수있어 배경에 손상을 주지 않고 이미지르 볼수있습니다. 그리고 움직이는 GIF파일도 만들수 있습니다. JPG는 다양한 색을 사용할수 있고 이미지 압축률이 높아서 이미지를 빠르게 전송할수 있습니다.
▶ 형식
| <IMG SRC="파일명" ALIGN=위치 WIDTH=너비 HEIGHT=높이 HSPACE=왼쪽여백값 VSPACE=위쪽여백 ALT=설명 > |
|
속성 |
설명 | |
| 파일명 | 디렉토리를 포함한 파일명이나 경로명을 설정합니다. 파일명만 넣으면 현재디렉토리를 기준으로 찾습니다 | |
| BORDER | 이미지 테두리의 값을 설정합니다. | |
| ALIGN |
LEFT | 이미지 문장의 왼쪽에 정렬합니다. |
| RIGHT | 이미지 문장의 오른쪽 정렬합니다. | |
| CENTER | 이미지 문장의 가운데에 정렬합니다. | |
| TOP | 문자을 이미지 상단부분에 정렬시킨다. | |
| BOTTOM | 문자을 이미지 하단부분에 정렬시킨다. | |
| MIDDLE | 문자을 이미지 중심부분에 정렬시킨다. | |
| TEXTTOP | 이미지를 행에서 가장 위에 있는 문장에 맞추어 정렬합니다. | |
| ABSBOTTOM | 이미지를 하단에 맞추어 정렬합니다. | |
| ABSMIDDLE | 이미지의 중간지점을 가운데 줄에 정렬합니다. | |
| BASELINE | 이미지 하단을 현재 문장의 기준선에 맞춰 정열합니다. | |
| WIDTH | 이미지의 너비를 설정합니다 픽셀값이나 퍼센트로 설정할 수 있습니다. | |
| HEIGHT |
이미지의 높이를 설정합니다.픽셀값이나 퍼센트로 설정할 수 있습니다. | |
| HSPACE | 왼쪽 여백값을 설정합니다. | |
| VSPACE | 오른쪽 여백값을 설정합니다. 위쪽여백은 <P>나<BR>태그 등으로 사용해도 됩니다. | |
| ALT | 이미지 설명을 설정합니다. | |
|
<HTML> </BODY> |
■ 기타태그
<meta http-equiv="refresh" content="number; URL=URL">
number 만큼의 초(second)가 지난 후에 URL에 지정된 URL을 load하라는 의미이다. URL이 없다면 디폴트로 reload된다. 이 태그를 잘 이용하면 간단한 애니메이션도 구현할 수 있지만 요즘은 GIFCon을 이용한다. head 태그 안에 들어가야 한다
◆ 한페이지를 로드후 몇초후에 다음페이지가 로드 되는 경우에 사용된다.
: html문서가 로드된후 사용자의 동작이 있어야만 다음 페이지로 넘어간다. 슬라이드 쇼 같은 분위기를 만들수 있다. start.html-->01.html-->02.html
◆ 서치엔진을 위하여 사용됨 서치엔진중에 로봇검색을 사용하는 경우에는 이 서치엔진에 정보를 제공하여 주는 역활을 한다.
<meta content="나의 홈페이지 입니다">※ MARQUEE
marquee태그는 글자를 간단하게 움직이게 할수 있는 쉬운 태그입니다
marquee태그는 explorer 에서만 실행됩니다▶ <marquee>쓰고 싶은내용을 요기에</marquee>
쓰고 싶은내용을 요기에▶ <marquee direction=left>글자가 왼쪽 </marquee>
글자가 왼쪽<marquee direction=down>글자가 아래로
<marquee direction=up>글자가 위로로
<marquee direction=right>글자가 오른쪽으로direction은 up, down, left, right 를 적용할수 있습니다
▶ <marquee behavior=alternate>와리가리</marquee>
와리가리배경색깔도 적용할수 있습니다
▶ <marquee bgcolor="blue">파란색이 배경이네</marquee>
파란색이 배경이네▶ <marquee direction=up behavior=alternate height=40>위아래로 </marguee>
위아래로▶ <marquee direction=up behavior=alternate height=100><marquee>비취타임~!</marquee></marquee>
비취타임~!▶ <marquee direction=down><ul>배<u>추<ul>네<ul>집<ul></marquee>
배
추
네
집
▶ <marquee scrollamount=200>어디야</marquee>
어디야
▶ <marquee scrollamount="10"><font color="green">도기 월드 나 잡아봐라 ~~~</font></marquee> <marquee scrollamount="3"><font color="blue">상전~~ 거기서바~</font></marquee>
<marquee scrolldelay="150">쇼한다ㅋㅋㅋ</marquee>도기 월드 나 잡아 봐라상전~~거기서봐~쇼한다ㅋㅋㅋ
|
학습정리 |
<hr>태그는 구분하는 선을 그려주는 태그입니다.<img>태그를 이용하여 이미지를 보여줄 수 있으며 여러가지 속성을 이용하여 다양하게 위치를 조절할 수 잇습니다. <a href>태그는 다른 문자를 호출하거나 사이트 이동을 할수 있습니다. |
[출처] 주짱
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
