|
|
오늘 |
5,070
|
|
|
어제 |
5,946
|
|
|
최대 |
5,946
|
|
|
전체 |
3,188,928
|
|
| |
|
|
 | 현재위치 : 정보마당 > ☞ 홈페이지 | | |
작성일 : 08-01-19 17:40
|
웹써핑을 통해서 알게된 HTML 에 대한 간략한 내용입니다..
|
 |
|
글쓴이 :
최고관리자
 조회 : 10,771
|
HTML(Hypertext Markup Language)
* 월드와이드웹(WWW)에서 하이퍼텍스트 문서를 만들기 위해 사용되는 기본언어
* 쉽게말해 인터넷을 통해 볼 수 있는 문서를 만들 때 사용되는 프로그래밍 언어
* 인터넷에서 접할 수 있는 모든 웹 페이지들은 HTML로 작성된다.
* 태그(TAG)는 HTML에서 사용하는 명령어이다
* 웹 브라우저(익스플러러, 네스케이프등등)는 HTML로 작성된 문서를 해석하여 화면에 출력하게 된다.
HTML 문서의 특징
* 태그는 대소문자 구분이 없습니다. 단, 파일 이름은 소문자로 해주는 것이 좋습니다.
* HTML 문자열 사이에 있는 하나 이상의 공백은 무시됩니다.
* 태그가 중복 되지 않도록 주의합니다.
* HTML 태그를 잘못 사용했다 하더라도 브라우져에서는 에러를 발생시키지 않습니다.
HTML 문서의 구성
*<HTML> 태그 : HTML 문서 시작
*<HEAD> 태그 : 시작을 알리는 태그입니다.
*<TITLE> 태그 : 문서 제목 정의(브라우저 타이틀바에 표시됨).
*</TITLE> 태그 : 문서의 제목 끝.
*</HEAD> 태그 : 시작을 알리는 태그 끝.
*<body> 태그 : HTML 문서의 본문 부분
*</body> 태그 : 본문내용과 태그 끝.
*</HTML> 태그 : HTML 문서 마무리
<html>
<head>
<title>문서제목</title>
</head>
<body>
↑
이 곳이 본문의 내용을 꾸미는 곳입니다.
↓
</body>
</html>
▶문서 배경 태그의 사용법
*<body bgcolor="색상"> : 윈도우 배경화면색 지정.
*<body background="이미지 주소"> : 배경을 그림으로할때 쓰는 속성.
*<body text="색상"> : 표준 글씨색 지정.
*<body link="색상"> : 링크 부분의 색 지정.
*<body vlink="색상"> : 검색한 링크 부분의 색 지정.
*<body alink="색상"> : 링크된글자를 누르는순간의 색을 지정.
▶<P> 태그의 사용법
*<P> 내용 </P> : 문단을 나누는 태그입니다.
▶빈칸 사용하기
* : 빈칸을 만들어 줍니다.(빈공간,글씨의 공란을 대신함.)
▶주석 사용하기
*한 줄을 주석으로 사용할 때는 <! 주석> 태그를 이용하고 여러줄을 주석으로 이용하려면
<!-- , //--> 태그를 이용합니다. 주석태그는 브라우져에서는 보이지 않는 태그입니다.
▶<br> 사용하기
*<br> 태그는 줄을 바꾸고 싶을 때 사용하는 것입니다.
br 은 예를들어 한번만 사용하면 다음줄로 넘어갑니다.
하지만 여러줄을 띄우고 싶을 때는 br 의 횟수를 더 많이 해주면 됩니다.
3칸을 띄우고 싶으면 3번을 쓰시면 됩니다.
▶문단 정렬하기
*<p align="정렬형태"> : left 나 right 를 써서 줄 단위로 정렬합니다.
*<center></center> : 여러문단을 중앙 정렬합니다.
▶선 태그 사용하기
*<hr size="크기" width="크기" align="정렬형태" style="color:색상;" noshade>
수평선 그리기 태그입니다.
size : 픽셀 단위의 선의 두께입니다.
width : 선의 수평길이 입니다.
align : 길이가 화면보다 작을 때 수평선이 그려질 위치입니다.
noshade : 음영 효과 없는 보통의 선 그리기 입니다.
style="color:색상;" : 선의 색상을 바꿔줍니다.
▶글자 크기 변경
*<basefont size="크기"> : 전체 글자 크기를 지정.
*<font size="크기"> : 일부의 글자 크기를 변경.
▶글자색 변경
*<font color="색상"> : 글자의 색상 지정.
▶글꼴 변경
*<font face="글꼴명"> : 글꼴 지정.
만약, 글자의 크기와 색상,글꼴을 동시에 바꾸시려면
<font size="크기" color="색상" face="글꼴"> 이렇게 하시면 됩니다.
▶글자 모양 정리
태그 관용적 표현(결과) <i>내용 <i><em>내용</em><dfn>내용</dfn><var>내용</var><cite>내용</cite> 이탤릭체 모양 <b>내용</b><strong>내용</strong> 진한 모양 <tt>내용</tt><code>내용</code><samp>내용</samp><kbd>내용</kbd> 타자체courier 체로 표현.
▶입력된 그대로 출력하기
<pre>내용</pre> : 화면에 나와 있는 내용을 그대로 출력합니다.
엔터를 치면 <br> 의 효과를 보게 됩니다.
<xmp>내용</xmp> : <pre> 태그와 비슷하지만 태그 소스까지 표시합니다.
한때 대화방에서 폭탄태그 방어로도 쓰였던 것입니다..^^
▶그림 삽입하기
<img src="이미지 파일 경로(주소)" alt="그림 설명">
그림과 설명을 삽입합니다.
▶그림 크기 지정하기
<img src="이미지 파일 경로(주소)" width="가로크기" height="세로크기">
그림을 자신이 원하는 크기만큼 조정합니다. 숫자가 높을 수록 커집니다.
▶그림의 위치 설정하기
<img src="이미지 파일 경로(주소)" align="정렬위치">
그림을 삽입하고 left 나 right 로 위치를 지정해 줍니다.
▶그림의 여백과 테두리 설정
<img src="이미지 파일 경로(주소)" border="테두리 두께">
그림의 경계선을 만듭니다.
<img src="이미지 파일 경로(주소)" hspace="크기">
그림의 좌우 여백을 지정합니다.
<img src="이미지 파일 경로(주소)" vspace="크기">
그림의 상하 여백을 지정합니다.
▶사운드 태그
<bgsound src="음악주소"> : 주로 배경음악으로 많이 쓰이는 태그입니다.
이 것은 mid 나 wav,mp3 파일등을 사용할때 쓰는 태그인데, 주로 배경음악으로 사용하는
파일은 mid 파일입니다. 용량도 작고해서 홈페이지 로딩시간에 별 지장을 주지 않습니다.
다른 파일들은 시간이 좀 오래 걸립니다. 요즘은 asf 파일도 사용합니다만 그것도 역시
시간이 좀 걸린답니다.
<embed src="음악주소"> : 이 태그는 전에 채팅상에서 많이 쓰이는 태그 였습니다.
주로 사용하는 파일이 asf 나 asx 파일입니다. 이 태그를 쓰게 되면 미디어 재생기가
나타나므로 자신이 맘대루 끌수도 있고 다시 재생시킬수도 있습니다.
이 외에도 리얼음악도 있지만 거의 배경음악으로는 사용이 불가능합니다.
리얼은 링크태그를 써서 클릭하면 들을수 있는 그런 방식입니다.
<a href="리얼 음악주소" target"new_window">여기를 클릭하세요!!</a> 이런식으로 하시면
됩니다.
또 한가지 [Tip], 홈페이지에 리얼과(다른 파일도 해당됨.) 같은 음악을 바로 띄우게 할수 있는
방법도 있습니다. 이건 스크립트를 이용하는 것입니다.
<script>open('음악파일주소')</script>
위의 예제처럼 하시면 홈에 들어오자 마자 플레이어가 나타나게 되죠^^.
<embed src="음악주소"> 이 태그를 쓰실때 재생기가 작게 나오게 하려면.....
width="수치" height="수치" 를 쓰게 되면 재생기의 크기를 마음껏 조절할수 있습니다.
<embed src="음악주소" width="수치" height="수치"> 이런식으로요..^^
음악을 반복해서 여러번 듣고 싶을때는 아래처럼 하시면 됩니다.
<embed src="음악주소" loop="반복횟수"> 이렇게 하시면 자신이 원하는 반복횟수만큼 들으실수 있습니다.
▶간단한 버튼 만들기
버튼만드는 기능은 여러가지가 있지만 여기선 간단한 것만 한가지 설명드리겠습니다.
아래 소스에 주소와 버튼에 들어갈 이름만 고쳐 쓰시면 됩니다.
<form action="http://myhome.naver.com/silverju1/tag.html" target="_blank">
<input type="submit" value="태그연습장">
</form>
스타일시트로 응용해서 이쁜색 버튼을 만들수도 있습니다.
소스
<input type="button" value="이쁜 버튼" style="color:white; font-size: 9pt;
background-color:pink; border:1 solid red;size= 30;height:20px"></style>
소스
<input type="button" value="이쁜 버튼" style="color:white; font-size: 9pt;
background-color:00ccff; border:1 solid blue;size= 30;height:20px"></style>
버튼응용에서 연결까지
<form action="연결시킬주소" target="_blank">
<input type="submit" value="버튼이름" style="color:white; font-size: 9pt;
background-color:pink; border:1 solid red;size= 30;height:20px"></style>
</form>
☞마퀴태그 입니다.글씨가 움직이는 태그를 말하는 데 여러가지로 응용해서 사용할수 있답니다. 태그연습장에서 연습해 보시고 사용바랍니다.
기본속성들 설명
scrollamount 빠르기지정.(숫자가 높을수록 절라빨라짐^^;)
scrolldelay 흔들리는 속성
direction 방향설정(left,right,up,down)
behavior=alternate 좌우,상하왕복
loop 숫자지정(예:loop="2" 를 했을경우 두번 실행됨.)
width 가로 왕복 지정
height 세로 왕복 지정
<marquee>안녕하세요!!</marquee> ☜ 마퀴태그의 기본.
안녕하세요!!
☞왕복하는 글씨...
<marquee behavior=alternate>글자가 좌우로 왕복*^^*</marquee>
글자가 좌우로 왕복*^^*
<marquee direction="left">이건 왼쪽이네요^^</marquee>
이건 왼쪽이네요^^
<marquee direction="right">이건 오른쪽이구여^^</marquee>
이건 오른쪽이구여^^
<marquee direction="up">요번에는 위로?</marquee>
요번에는 위로?
<marquee direction="down">다운이당ㅡㅡ+</marquee>
다운이당ㅡㅡ+
(<marquee behavior=alternate width=30>@^.^@</marquee>) ☜도리도리
(@^.^@)
<marquee direction="RIGHT" scrollamount="1"> __@/``</marquee> ☜달팽이 기어가는 모습.
__@/``
<marquee scrollamount=30>달팽아 난 절라 빠르쥥??</marquee>
달팽아 난 절라 빠르쥥??
<marquee width=500 scrollamount=300><font size=7>반짝반짝!!</marquee>
반짝반짝!!
<marquee bgcolor=red><font color=ffffff>하이~</font></marquee>
하이~
<marquee bgcolor=blue><font color=ffffcc>하이~</font></marquee>
하이~
<marquee bgcolor=000000><font color=00ff00 size=7>하이~</font></marquee>
하이~
<MARQUEE direction=right>ⓘ ⓛⓞⓥⓔ</MARQUEE>♡<MARQUEE direction=reft>ⓨⓞⓤ</MARQUEE>
ⓘ ⓛⓞⓥⓔ♡ⓨⓞⓤ
<marquee direction=up>안♡<ul>녕♡<ul>하♡<ul>세♡<ul>요♡<ul>반♡<ul>가♡<ul>워~♡<ul>요♡</MARQUEE>
안♡
녕♡
하♡
세♡
요♡
반♡
가♡
워~♡
요♡
<marquee><font size=5 color=red>방<br>가<br>워<br>요</font></marquee>
방
가
워
요
<marquee behavior=alternate direction=up height=50><font color=green size=4>정말 방가여^^</font></marquee>
정말 방가여^^
<marquee behavior=alternate width=150><font color=red size=4>띠바! 못 방가!!</font></marquee>
띠바! 못 방가!!
<marquee direction=down height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee><marquee direction=up height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee>
노래 조오타 !!
노래 조오타 !!
<marquee direction=up height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee><marquee direction=down height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>노래 조오타 !!</span></marquee>
노래 조오타 !!
노래 조오타 !!
<marquee direction=up behavior=alternate><marquee behavior=alternate><h2>글씨가 파도를 치넹^^;</h2></marquee>
글씨가 파도를 치넹^^;
|
|
| |
|
◐찬양 & 방송보기◑
