[기본 테그]1

[기본 테그]1

* 바로가기 원클릭 새창 띄우기

<a href="http://cafe.daum.net/sjk6362" Target=blank"><font size=4 color=green>중년의행복찾기</font></a>

HTML태그란?

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>	작다

<h1> 부터~ </h6> 까지 있으며. 숫자가 클수록 크기가 작음.(font태그와는 반대죠)

2.문자 크기를 굵게.

음냐

3.문자를 이탤릭체로 나타내기.

이탤릭체

4.문자에 밑줄을 침.

중요

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문서에서는 [Esc]키나 [Space Bar]키의 사용은 의미가 없죠. 그런데, 여러번의 엔터 키나 여러개의 스페이스
키를 그대로 웹문서에서 나타나게 하려면 <pre> 태그를 사용해야 합니다.

	source	결과
<pre> 사용	<pre> 하지만 드라군이 출동하면 어떨까? 드!! 러가 ㅅㅂㄻ </pre>	하지만 드라군이 출동하면 어떨까? 드!! 러가 ㅅㅂㄻ
사용없이	하지만 드라군이 출동하면 어떨까? 드!! 러가 ㅅㅂㄻ	하지만 드라군이 출동하면 어떨까? 드!! 러가 ㅅㅂㄻ

4.주석문 : 

문서를 제작하는 사람이 참고로 하고자 하는 내용을 입력해두는 태그로, 이 주석문 안에 있는 내용은 웹 브라우저에서는
보이지 않고, 소스에서만 보여집니다. 홈페이지만드는 사람들에겐 필수죠. 미도 필수
예) 

결과) ↑ "" 사이의 태그와 글씨 등 모두 무시 (적용되지않음)소스에서만 보입니다.

6. "<" or ">"
   마지막으로 이건 "태그에 관한 홈페이지를 만드시는 분" 께 필수가 되는 건데, 자세히 설명은 안하죠.
   태그를 설명할 때,
   웹에서 "<" 이것과 ">" 이것을 나타내는 소스 입니다.

소스	결과
<	<
>	>

Tip 6번 방식 외에 4번을 이용해서 태그 소스가 적용되지 않고 그대로 나타나게
할 수도 있습니다.

소스	<<!-->embed src="#"><<!-->/embed>
결과	<embed src="#"></embed>

글씨 태그

       폰트태그는 글씨의 크기, 색깔, 글씨체 등을
        설정 하여 글씨를 나타내는 태그로서 기본이 됩니다.

       기본 폰트태그 ↓↓

< font size="2(글씨크기)" color="#0000cc(글씨색)" face="굴림(글씨체)"> 나타낼글씨 </font>

         마지막에 </font> 는 폰트 태그를 닫는다는 뜻이며닫기전 폰트태그 시작과 </font> 사이에 쓰이는
         글씨가 크기,색,체,등이 적용되는 부분입니다.
         닫아 주어야 그 다음 부분의 글씨에 적용되지 않습니다. 아.. 설명이 짜증나죠? -_-;

1.font size

     폰트 사이즈. 폰트 사이즈는 글씨의 크기를 조절하는 속성입니다.
        사이즈는 그냥 숫자로 1,2,3,..... 으로 (기본 2 ) 쓸 수도 있고
        8pt, 9pt, 10p, 11pt, 12pt, 등으로 조절 할 수도 있습니다.
        pt 단위가 더 작고 크기 2와 크기 10pt는 같습니다.

소스	결과
<font size="1">냠냠</font>	냠냠
<font size="2">냠냠</font>	냠냠
<font size="3">냠냠</font>	냠냠
<span style="font-size: 8pt">냠냠</span>	냠냠
<span style="font-size: 10pt">냠냠</span>	냠냠
<span style="font-size: 12pt">냠냠</span>	냠냠

2.font coror

    폰트 컬러. 글씨의 색을 조절하는 속성입니다.
     색은 영어로 red, green, black 등으로 써도 되고,
     색상코드를 써서, 0000cc,(파랑) FFFFFF,(흰색) 등으로
     써도 됩니다. 색상 코드가 더 종류가 많겟죠?

소스	결과
<font color="red"> 후훗 </font>	후훗
<font color="black"> 후훗 </font>	후훗
<font color="0000cc"> 후훗 </font>	후훗
<font color="008000"> 후훗 </font>	후훗

3.font face

    폰트 패이스는 글씨체를 조절하는 속성입니다.
    글씨체는 궁서체,굴림체 등이 있는데 기본으로 나오는
    글씨체보다는 지정해서 쓰세요. (ex 굴림, 돋움, 궁서, 바탕)

소스	결과
<font face="궁서체">궁서다</font>	궁서다
<font face="굴림">굴림이다</font>	굴림이다
<font face="돋움">돋움이다</font>	돋움이다

------------------------------------------------------------

이 속성들 몇가지를 같이 종합해서 써 본다면 다음과 같이 되겠지요.

<font color="red" fece="돋움"> 밥은 먹고다니니? </font>
<font size="2" face="궁서"> 신경 끄3 </font>
<font face="바탕" size="2" color="0000cc"> 훗 </font>

<font color="red" fece="돋움">밥은 먹고다니니?</font>	밥은먹고다니니?
<font size="2" face="궁서">신경 끄3</font>	신경 끄3
<font face="바탕" size="2" color="0000cc"> 훗</font>	훗

마퀴 태그

(marquee)

마퀴태그는 과거 채팅을 할 때에 많이 쓰여졌습니다. (지금은 어떠한지;) 기본적으로,
<marquee> 자 빨리하고 끝내자... </marquee> ▼

자 빨리하고 끝내자...

이렇게쓰면 됩니다만 마퀴태그를 더 다양한 방법으로 쓰고 싶다면
태그에 속성을 추가 시키시면 됩니다
NEXT▶

※속성은 붉은색으로 표시.

<marquee direction=right> 오른쪽으로 가자</marquee> ▼

오른쪽으로 가자

<marquee direction=up> 이륙하자~</marquee> ▼

이륙하자~

<marquee direction=down> 착륙하자~</marquee> ▼

착륙하자~

※이 속성은 글씨가 이동하는 "속도" 인데요, 붉은색 숫자가 높을수록 더 빠릅니다.

<marquee scrollamount=70>속도 70!! </marquee> ▼

속도 70!!

<marquee behavior!=alternate> ◀왓다갓다 좌우왕복▶</marquee> ▼

◀왓다갓다 좌우왕복▶

<marquee behavior!=alternate direction=up> 아래위 왕복</marquee> ▼

아래위 왕복

태그에 배경을 넣습니다."FFFF99" 코드를 바꾸면 다른 색의 배경으로 변합니다.
<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"> 문장이 이미지의 하단 부분에 정렬됩니다.

실행 결과) ◀클릭

하이퍼링크

하이퍼링크.
다른 문서나 미디어 파일을 연결(Link)시켜주는 것으로, 'anchor(닻)'을 의미합니다.
<a href="웹페이지주소">연걸어</a> 의 형식으로 쓰이며, 'href'는 Hyper와 Reference
라는 요소를 뜻합니다. <a>태그를 이용하여 웹하이트의 URL은 물론, HTML문서, 워드프로세서,
압축파일, 실행파일 등을 모든 종류의 파일로 링크시킬 수 있습니다.
예)

<a href="http://www.naver.com">네이버</a>
<a href="story.html">이야기</a>
<a href="music.wma">음악</a>
<a href="winzip.exe">윈집다운받기</a>

1. 문자로 링크시키기.

   링크태그의 기본입니다. 글씨를 클릭해서 링크를 시키는 거죠.
소스-
--------------------------------------------------------------------------------
<a href="http://www.naver.com" target="_blank"> <font color="0000cc"> 네이버로 </font> </a>
--------------------------------------------------------------------------------
설명-
<a href="">부분과 </a> 부분은 링크태그의 시작과 끝을 알리는 것입니다.
http://www.naver.com 부분은 링크시킬 주소 부분입니다.
target="_blank" 는 링크된 페이지가 나타날 창을 정해주는 겁니다. 기본적으로 지정해 주지 않으면
현재 페이지를 다른곳으로 넘깁니다. (target의 종류 및 기능은 아래에)
네이버로 부분은 연결어로, 이 글씨를 클릭하면 링크시킨 주소로 넘어가게 되죠.
<font...></font> 부분은 링크시킬 연결어의 글씨 색을 파란색으로 지정한 것일 뿐;

결과-

네이버로

[TIP!]타겟(target)의 종류 및 기능

종류

기능

  target=xxx

링크시킨 html 문서를 <frameset>의 name으로 붙여준 프레임에서 열
게 한다. 예) target=right / targer=main

  target=_top

링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open된
브라우저 화면으로 열도록 한다.

  target=_blank

링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고,
새로운 브라우저(새 창, New Navigator)에서 열게한다.

  target=_parent

기존의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조
로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크한다.

  target=_self

하이퍼링크 시킨 문서를 같은 프레임에서 열게한다.

2. 그림으로 링크시키기.

   그림을 링크시킵니다. 그림에 마우스를 클릭하면 그림에 걸려있는
   링크로 이동시킵니다.
소스- <a href="이동시킬주소"> <img src="그림주소" border="0"> </a>

예) 네이버 사이트를 "img/link.jpg" 라는 그림으로 하이퍼링크 시킬때.

소스.------------------------------------------------------------------------------
<a href="http://www.naver.com"> <img src="img/link.jpg" border="0"> </a>
-----------------------------------------------------------------------------------

실행결과- 클릭해보세요.

※ 여기서 빨간색으로 표시된 border="0" 속성은 그림을 링크시킬 때 꼭 적어줘야 합니다.
    링크시킬 때 그림에 테두리를 없애주는 속성이기 때문이지요.

★TAG TIP!!★★★★★★★★★★★★★★★

그리고 저그림을 클릭할 때 주위테두리에 점선같은게 생깁니다.(클릭하고 나서도 보이죠)
클릭할 때 점선 안생기게 하려면 아래 속성을 이용하면 됩니다
[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonfocus="this.blur()" 아주 좋은 속서이죠. 링크태그에 추가하시면 됩니다
이런식으로...ex)
<a href="http://www.naver.com" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonfocus="this.blur()"> 지식까지 검색해주셈 </a>
<a href="main.html" target="in" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonfocus="this.blur()"> <img src="img/main.jpg"> </a>
대충 보시면 아시리라 믿습니다;;.
연습은 태그연습장에-
ex 하나 보여드립니다. 타겟은 _blank 입니다. 클릭할 때 점선 생기는지를 보세요.

3. 이메일 (e-mail)의 링크.

  전자메일 주소를 링크시키려면 <a> 태그의 href 속성에 반드시 'mailto:'라는 URL 표기 방식을 먼저
  넣어주어야 합니다. 이 'mailto:'라는 속성에 의해 사용자가 링크된 곳을 클릭하면 자동으로 전자우편
  메시지를 작성할 수 있는 작성창이 뜨며, 수취인(To) 란에 E-mail 주소가 자동으로 입력되도록 하는
  겁니다.
예)-(소스)
      <a href="mailto:tokyo-rose@hanmail.net"> tokyo-rose@hanmail.net </a>
      <a href="mailto:jkw87@hanmir.com"> 메일보내기 </a>

아웃룩 익스프레스가 뜨기 때문에 결론적으로 추천은 안합니다.

4. 기타, 파일(동영상,음악,자료,압축,프로그램) 의 링크.

  음악이나 동영상을 클릭해서 띄우거나, 압축파일,프로그램 등을 클릭해서 다운받게 하는 방법입니다.
  이것도 <a href="">사이에 그 파일의 주소만 넣어주면 되는 거죠.
예)-(소스)
      <a href="alzip.exe"> 알집 다운 </a>                 - 프로그램다운
      <a href="mulanluge.wav"> 음악 </a>          - 미디어 열기
      <a href="kensin.asf"> 애니메이션 </a>             - 동영상
//
여기서 상대 경로와 절대 경로가 있습니다.
예를들면 위의 alzip.exe는 상대경로 입니다.
그러면 위 태그를 적용하는 곳이 alzip.exe 가 있는 같은 공간일 경우에는
상관이 없지만 다른 곳에서는 alzip.exe를 쓰면 링크가 걸리지 않습니다.

그래서 이런 경우에는 절대경로를 써 줍니다.
예를들면 http://pierload.x-y.net/util/alzip.exe 와 같이 http부터 모두 써 주는 겁니다.

테이블태그

테이블 태그.<table>
태이블 태그는 표를 만드는 태그를 말합니다.
표(table)의 기본구조

<table>
<coption>...</coption>
<tr>
<th>...</th>
<td>...</td>
</tr>
</table>

<table>

표 작성함을 정의한다 (</table>은 표가 끝남을 정의)

<tr>

Table Row의 약자로, 표 안에서 한줄(Row)이 끝났으
므로 줄바꾸기를 한다.

<th>

Table Heading의 약자로, 표의 머리글 (Header) 임을
나타낸다.

<td>

Table Data의 약자로,보통체와 왼쪽정렬로 적용된다.

<caption>

표의 주석문(제목)을 표화 함께 나타내는 속성이다.
align=top -->표의상단
align=bottom -->표의하단

표에서 사용되는 속성

속성

정의

width=50%

표나 셀의 폭(넓이)을 창의 백문율(%)로 지정한다.

width=400

표나 셀의 폭을 픽셀 값으로 지정한다.

height=pixel수

셀의 높이(세로)를 지정한다.

cellpadding=10

셀의 안쪽 여백(셀의 테두리와 문자열 사이의 간격)을 10픽셀로 지한정다.

cellspacing=5

셀과 셀 사이의 간격을 5픽셀로 지정한다.

border=숫자

표 테두리의 두께를 지정하는 것으로 숫자가 커질수록 두꺼워진다.
border=0 이면 웹 브라우저에서 표의 테두리가 보이지 않는다.

colspan=2

가로의 열(column) 2개를 합치기 한다.

rowspan=3

세로의 줄(row)3개를 합치기 한다.

valign="위치"

align="left,right,center" -셀 안에서의 가로 위치 정렬

align="위치"

valign="top,middle,bottom" - 셀 안에서의 세로위치정렬

bgcolor="색상"

표 전체 또는 선택된 셀의 배경 색상을 지정한다.

backround="주소"

표 전체 또는 선택된 셀의 배경 이미지를 삽입한다.

예제 1)
----------------------------------------------------------------

<table border="1">
<tr>
  <td bgcolor="yellow"> 포토샵 </td>
  <td> 플래시 </td>
</tr>
<tr>
  <td> 나모웹 </td>
  <td> 드림위버 </td>
</tr>
</table>

포토샵 플래시

나모웹 드림위버

예제 2)
----------------------------------------------------------------

<table border="1" bordercolor="red" cellspacing="0">
<tr>
  <td> 포토샵 </td>
  <td> 플래시 </td>
</tr>
<tr>
  <td> 나모웹 </td>
  <td> 드림위버 </td>
</tr>
</table>

포토샵 플래시

나모웹 드림위버

예제 3)
----------------------------------------------------------------

<table border="0">
<tr>
  <td> 포토샵 </td>
  <td> 플래시 </td>
</tr>
<tr>
  <td> 나모웹 </td>
  <td> 드림위버 </td>
</tr>
</table>

포토샵 플래시

나모웹 드림위버

예제 4)
----------------------------------------------------------------

<table background="img/tablebg.jpg" border="1">
<tr>
    <td> <font color="red">포토샵</font>     </td>
    <td> <font color="red">플래시</font>     </td>
</tr>
<tr>
    <td> <font color="red"> 나모웹</font>     </td>
    <td> <font color="red">드림위버</font>     </td>
</tr>
</table>

포토샵 플래시

나모웹 드림위버

예제 5)
----------------------------------------------------------------

<table border="1">
  <td rowspan="4"> 웹제작 </td>
     <td>나모웹 에디터</td>
     <tr>
     <td>드림위버</td>
     <tr>
     <td>포토샵</td>
     <tr>
     <td>플래시</td>
</table>

웹제작 나모웹 에디터
드림위버
포토샵
플래시

음악 태그

멀티미디어 태그. (배경음악, 동영상 태그)

배경음악을 태그로 할 수 있는 방법은 두가지가 있습니다.
하나는 <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound src="음악주소"> 이고, 또하나는 <embed src="주소"> 입니다.
[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound태그는 배경음악으로만 사용할 수 있고, embed태그는 배경음악으로도 쓸 수 있고, 동영상같은
멀티미디어 파일을 띄울 수도 있습니다.

1. <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound src="음악주소">

이건 완전 배경음악전용 태그구요, 음악파일주소 확장자가mp3, mid, wma, wav 등일 경우에 사용하세요.
예제) <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound src="http://myhome.naver.com/jslstory/05.wma">

실험은 태그연습장에서 해보시구요,
음악을 반복재생 하실려면, loop 속성을 추가하시면 됩니다.
<[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound src="http://myhome.naver.com/jslstory/05.wma" loop="3">
이렇게요. loop="3"은 3번 반복재생.이란 뜻입니다.

그리고 loop="infinite" 으로 하시면 무한반복입니다.
<[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound src="http://myhome.naver.com/jslstory/05.wma" loop="infinite"> 이런식으로요.

2. <embed src="음악 또는, 멀티미디어주소">

이건 위에서 말씀드렸듯이 동영상, 음악 등을 띄울 수 있는 태그이며
대신 멀티미디어 재생기가 뜹니다. (지원하는 파일-asx, asf, wma 등등..)

예제) <embed src="http://myhome.naver.com/jslstory/05.wma">

결과) x-text/html; charset=UTF-8" width=300 src=http://myhome.naver.com/jslstory/05.wma xxonresize="parentResizeIframe('cafe_main')" autostart="false" x-x-allowscriptaccess="sameDomain" invokeurls="false" allownetworking="internal">

멀티미디어 재생기를 안보이게 하려면 hidden="true" 속성을 넣으세요.

<embed src="http://myhome.naver.com/jslstory/05.wma" hidden="true"> 이렇게요.

그리고 embed 태그에서 재생기의 크기를 조절할 수 있는데 값을 width="70" height="25" 로 하면
  EX) <embed src="http://myhome.naver.com/jslstory/05.wma" width="70" height="25"> 이런식..
  아주 아담한 재생기가 뜨죠. 하하핫. 꼭 해보시구요,

그리고, embed 태그에서는 몇 번씩 반복속성은 적용되지만 무한반복은 안된답니다.
예) [loop="숫자" (o)적용됨, loop="infinite"(x)적용안됨.]

음. 에 또 그리고 위에서 말했던 동영상 띄우는 방법은 그냥 동영상 주소를 embed 태그로 사용하시면 됩니다.
픽셀값으로 크기지정도 width="x" height="x" 속성으로 정할 수 있구요. 동영상은 짤리지 않습니다. 크기로
그럼 그만 마치기로 하죠. 꾸준히 써먹어보고 연습해보는 것이 태그를 빨리익힐 수 있는 방법입니다.^^

＃ 사용예제로 쓰인 음악(wma)파일 - http://myhome.naver.com/jslstory/05.wma

배경 태그

배경태그 (background)

자 이제 홈페이지에 배경색,또는 배경화면을 넣는 태그를 배워봅시닷!

먼저 배경을 지정하는 태그는 두가지가 있습니다.
배경 색만 지정하는 bgcolor 와 배경을 이미지로 하는 background 태그입니다.

1. 그럼 우선 bgcolor 태그를 사용하는 방법을 알아보겠습니다.

HTML 문서에 <body> 라고 되어있는 부분이 있습니다.
그럼 이제 <body> 부분을 고쳐줍니다.
<body bgcolor="red"> ㅡ> 배경 색깔이 빨간색(red) 이 됩니다.
<body bgcolor="black"> 이렇게하면 검은 바탕이되죠.(black)
<body bgcolor="0000cc"> 이런식으로 코드를 넣어도 됩니다.(0000cc=진한파랑)
아무튼, <body bgcolor="이 사이에"> 원하는 색깔의 코드나 색명을 적으세요.
그럼,

2.다음으로 background 태그입니다.

이것도 마찬가지로 <body>에 지정해줍니다.
<body background="그림주소"> 이렇게요.
아무 그림이든 상관없습니다. (jpg,gif,bmp...등등. 그러나 배경은 gif를 가장 선호)
EX) <body background="http://pierload.x-y.net/images/imgmap.jpg">
태그연습장에 실행시켜 보세요. 그림이 바둑판식으로 배경에 나타납니다.
바둑판식으로 하기에 좋은 배경그림 몇가지>
<body background="http://pierload.x-y.net/img/exbg1.gif">
<body background="http://pierload.x-y.net/img/exbg2.gif">
<body background="http://pierload.x-y.net/img/exbg3.gif">
<body background="http://pierload.x-y.net/img/exbg4.gif">
<body background="http://pierload.x-y.net/img/exbg5.gif">
<body background="http://pierload.x-y.net/img/exbg6.gif">
<body background="http://pierload.x-y.net/img/exbg7.gif">
<body background="http://pierload.x-y.net/img/exbg8.gif">

음. 그리고 또 그림을 특정위치에 고정시킬 수 있는 방법도 있습니다.
이렇게 하면 됩니다.

<style TYPE="TEXT/CSS">
BODY {background:url(http://pierload.x-y.net/img/bgimg2.jpg) white fixed no-repeat 100% 100%}
</style>

여기서 파란색으로 되어있는 주소 부분과 퍼센트 부분만 바꾸시면 원하시는 그림을
원하는 위치에 고정시키실 수 있으며 스크롤바가 내려가도 절대 움직이지 않습니다..
<<※ 퍼센트에서 왼쪽건 가로, 오른쪽건 세로 이고, 퍼센트가 높을수록 오른쪽으로,아래로 갑니다>>

그냥 바디(body) 태그로 고정시킬 수 도 있습니다!

<body background="그림주소" bgproperties="fixed">
이렇게 해주시면 되구요. 이 속성을 쓰시면 바둑판식으로 되고, 고정됩니다.
알겠죠? 위에껀 그냥 위치정하구 고정,요건 바둑판식고정.
그럼,

아이프레임

아이프레임(iframe)
개인적으로 자주 사용하는(;) 태그입니다..
별로 잘 사용 되지 않는 태그로 알고있지만
많은 곳에 유용하게 쓸 수 있습니다.

음.. 아이프레임은... 말로하기 어렵군요; 한마디로 한 페이지 안에 또다른 페이지를
작은(?) 공간에 넣을 수 있습니다. 가령 네이버란 사이트를 아이프레임 시킨다면

Source) <iframe src="http://www.naver.com" width="500" height="300"></iframe>

이렇게 페이지 안에 다른 주소의 작은 페이지를 넣게 됩니다.

기본 형식
<iframe src="주소"></iframe>
뒤에 꼭 </iframe>으로 아이프레임의 끝을 정해주어야 합니다.

속성(option)

설명

src="주소"

iframe에서 표시할 경로를 지정해 줍니다. "http://..."

name="down"

iframe의 이름을 지정 합니다. 이름을 Yanni 로 했음.

width="숫자(픽셀값)"

frame의 가로길이를 지정합니다.

height="숫자"

frame의 세로길이를 지정합니다.

frameborder="숫자"

iframe의 경계선 두께입니다. "2"로 하면 깔끔(?)하게 안보이더군요.

marginwidth="0"

iframe의 좌우여백입니다.

marginheight="0"

iframe의 상하여백입니다.

scrolling="셋중하나"

yes:무조건생성,no:무조건생성않음,auto:페이지 내용크기에 따라.

align="셋중하나"

문장과 상관되는 정렬위치입니다.[left/right/center(왼쪽/오른쪽/중간)] 셋중 하나 선택.

ex) 소스에 속성을 조합해서 사용한 예제 )

<iframe src="http://www.naver.com" name="down" width="500" height="400" frameborder="2" marginwidth="0" marginheight="0" scrolling="auto"></iframe>

AND!!
아이프레임을 프레임셋과 비슷하게 쓰는 방법.
요기 위에 name="down" 한거 보이시나요. 아이프레임 name을 down 으로 한겁니다.
그럼 이것을 링크태그와 같이 써보면 (한페이지에) 그냥 프레임처럼 사용할 수 있습니다.
링크태그에 타겟.target 을. 이렇게. <a href="http://www..." target="down">ㅁㄴㅇㄹ</a>
그럼 이 링크를 클릭하면 나타나게 되는곳은 바로 아이프레임입니다. 제 설명이 좀 어려운가요?;
다음 예제로 확인 해 보세요. [[click]]

동영상태그

동영상(embed) 태그

모든 멀티미디어는 기본적으로 <embed> 태그를 씁니다.
(ex - <embed src="http://movi.com/movi.asf">)
예를들면 음악(mp3,wma,mid), 플래시(swf)등은 모두 이 태그로
이루어 지죠.

동영상도 마찬가지입니다.
동영상의 확장자는 avi,wmv,asf,asx,mpg,mpeg 등이 있으며 모두embed
태그로 나타냅니다.

예제로 쓸 동영상파일 하나를 주웠(;;)습니다.
[[http://myhome.naver.com/jslstory/ex.wmv]]
그냥 페인터 카페...같은곳에서 주웠는데 기억은 잘 안나는군요;;;
아무튼 용량은 261KB 밖에 안되니 예제용으로 딱입니다;;

x-text/html; charset=UTF-8" width=320 src=http://myhome.naver.com/jslstory/ex.wmv autostart="false" x-x-allowscriptaccess="never" invokeURLS="false" allowNetworking="internal" x-x-allowscriptaccess="sameDomain">

0.태그사용 기본
<embed src="http://myhome.naver.com/jslstory/ex.wmv">
결과 - [↑]-_-;

기본적으로 <embed src="동영상주소">를 사용하면 태그가 작동됩니다.

1.반복효과 주기
<embed src="http://myhome.naver.com/jslstory/ex.wmv" loop="-1">
결과 - [보기]

(계속해서 반복됩니다.)

2.플레이어 크기 조절
<embed src="http://myhome.naver.com/jslstory/ex.wmv" width="500" height="200">
결과 - [보기]

width="500" height="200"=넓이500픽셀, 높이200픽셀 으로
지정한 경우입니다.
동영상화면비율이 변하기 때문에 그다지 특별한 경우가 아니라면
사용하지 않습니다.

3.플레이어 오른쪽클릭 금지하기
<embed src="http://myhome.naver.com/jslstory/ex.wmv" EnableContextMenu="false">
결과 - [보기]

소스방지태그와 오른쪽클릭금지 태그를 사용해도 동영상은
오른쪽 클릭이 가능해서 동영상주소를 가져갈 수 있습니다.
그래서 다운로드나 트래픽피해를 보는 경우가 많죠...
하지만 위의 태그를 쓰면 플레이어에서 오른쪽클릭을해도 반응이 없습니다.

4.플레이어 상태 바 감추기
<embed src="http://myhome.naver.com/jslstory/ex.wmv" ShowControls="false">
결과 - [보기]

5.플레이어 상태 바 흑백으로 나타내기
<embed src="http://myhome.naver.com/jslstory/ex.wmv" style="filter:gray();">
결과 - [보기]

플레이어의 상태 바가 흑백으로 나타내어 질 뿐이며 동영상 자체의 색에는
변화를 주지 않습니다.

5-1.(상태 바를 색반전/xray 효과로 나타내기)
다음과 같은 방법을 쓰면 됩니다.
<embed src="http://myhome.naver.com/jslstory/ex.wmv" style="filter:invert();">
<embed src="http://myhome.naver.com/jslstory/ex.wmv" style="filter:xray();">
각각 결과 - (플레이어만)

x-text/html;charset=ks_c_5601-1987 src=#.wmv autostart="false" x-x-allowscriptaccess="never" invokeURLS="false" allowNetworking="internal" x-x-allowscriptaccess="sameDomain"> - 색반전
x-text/html;charset=ks_c_5601-1987 src=#.wmv autostart="false" x-x-allowscriptaccess="never" invokeURLS="false" allowNetworking="internal" x-x-allowscriptaccess="sameDomain"> - 흑백반전(xray)

플레이어의 상태 바가 흑백으로 나타내어 질 뿐이며 동영상 자체의 색에는
변화를 주지 않습니다.

6.플레이어 상태바하단에 파일정보나타내기기
<embed src="http://myhome.naver.com/jslstory/ex.wmv" showstatusbar="1">
결과 - [보기]

플레이어의 하단에 파일정보(재생음악의 제목과 저작권, 만든이 등의 정보)가
나타납니다. 기본적으로는 나타나지 않고 이 태그를 적용시켜야만 나타납니다.

※기타//동영상을 자동으로 재생시키지 않고 사용자가 플레이버튼을
눌러야 재생되게 하려면 autostart="false"를 넣으시면 됩니다.
EX) <embed src="http://myhome.naver.com/jslstory/ex.wmv" autostart="false">

웹에파일올리기

자신의 컴퓨터에 있는 파일, 웹에올려 태그 사용하기

누구나 안다고 생각하실 지 모르지만
모르시는 초보분들이 많아서 만들었습니다.

여러 방법이 있지만 여기서는 무료계정을 얻어서
파일을 올린 후 주소를 쓰는방법을 설명해봤습니다.

일단은 네이버(http://www.naver.com) 기준의 설명입니다.

1. 먼저 네이버(naver.com)에서 하는 방법을 예제로 설명 드리겠습니다.
우선 네이버에 가입을 하신 후 메인화면에서 "마이홈"을 찾아 들어갑니다.
(가입하신분은 로그인을 하시구요)

2. 네이버 마이홈에 들어가시면 파일매니져 라는 곳이 있습니다.
역시 클릭해서 들어가줍니다.

3. 처음 들어가시면 파일이 이미 있으신 분도 있으실거고
없거나... 아니면 index.html파일만 있거나 할겁니다(잘모르겠지만
상관없으니 그냥 끄덕하고 넘어가삼;)
아무튼 여기서 '파일전송'이라는 부분이 있습니다. 클릭해줍니다

4. 오른쪽 아래의 "찾아보기"버튼을 눌러서 자신의 컴퓨터에서
웹에올리려고 하는 파일을 찾아 줍니다.
'열기'버튼을 누른 후 버튼으로 전송시킵니다.

이 때 전송할 수 없는 파일 확장자가 나오며 용량이 2M 가 넘는 파일은
전송 할 수 없습니다. (네이버의 경우일 뿐이므로 모든 곳이 2M로 제한하는
것은 아닙니다)

5. 자신이 올린 파일이 곧 메인 부분에 나타날겁니다.
그러면 그 파일에 마우스를대고 오른쪽클릭을 해 줍니다.
'속성(P)'를 선택합니다.

6. 그러면 주소(URL)부분에 그 파일의 주소가 나타납니다.
이젠 그 주소를 어느 인터넷 공간에서 사용하던 잘 작동됩니다.
파일이 그림 파일일 경우엔 <img src="주소"> 의 방법으로 그림태그를
쓰시면 되고 음악파일일 경우에는<embed src="주소">의 방법으로 멀티
미디어 태그를 써 주시던가 하면 됩니다.

마지막으로 이 강좌를 올리는 이유는...
다시한번 말하지만 이런걸 몰라서 헤매시는 초보분들을 많이 봐
왔기 때문입니다 -_- 저는 사실 이 전단계부터 공부했기 때문에
이런적은 없었지만 초보였을때 답답했던 마음은 다 같을거라 생
각 합니다. 그럼// 많은 도움 되길 바라3/

중/고급태그설명

object태그

기본적으로 사용하는<embed> 나 <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-bgsound> 대신 <object>를 이용해서
음악이나 동영상을 올리는 방법입니다.
<object>를 이용하면 음악을 좀더 많이 제어 할 수 있습니다.
또 최근 우연치않게;; 웹사이트에서 <embed>를 막은곳도 보이고;; 해서;

<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300">
<PARAM NAME="Filename" VALUE="음악 파일 경로">
<param name="ClickToPlay" value="true">
<param name="AutoSize" value="true">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="ShowAudioControls" value="true">
<param name="ShowDisplay" value="false">
<param name="ShowTracker" value="true">
<param name="ShowStatusBar" value="false">
<param name="EnableContextMenu" value="false">
<param name="ShowPositionControls" value="false">
<param name="ShowCaptioning" value="false">
<param name="AutoRewind" value="true">
<param name="Enabled" value="true">
<param name="EnablePositionControls" value="true">
<param name="EnableTracker" value="true">
<param name="PlayCount" value="1">
<param name="SendWarningEvents" value="true">
<param name="SendErrorEvents" value="true">
<param name="SendKeyboardEvents" value="false">
<param name="SendMouseClickEvents" value="false">
<param name="SendMouseMoveEvents" value="false">
<param name="ShowGotoBar" value="false">
<param name="TransparentAtStart" value="false">
<param name="Volume" value="0">
</OBJECT>

ㅁ결과...(음악파일경로=http://myhome.naver.com/jslstory/05.wma)

윈도미디어플레이어로 음악을 재생시키기 위해 흔히들 사용하시는 소스입니다.
이 소스에 보시면 PARAM속성이 많이 지정이 되어 있는데...
이 속성의 역할과 활용에 대해 간단히 알아보기로 하겠습니다.

----------------------------------------------------------------------

<PARAM NAME="Filename" VALUE="음악 파일 경로">
이 부분에서 음악 파일 경로를 삽입하고,
밑부분의 <param name> 부분은 기능을 제어하는 태그입니다.

만약 링크 못가져가게 마우스 우측 클릭 후 나타나는 정보창을 막고자 한다면,
<param name="EnableContextMenu" value="false">
이 부분에서 value 값을 true 혹은 false 로 지정하면서 제어할 수 있습니다.
보기와 같이 false로 지정하면 우측 클릭을 해도 반응을 하지 않습니다.

이제 하나하나의 기능을 살펴봅시다.

<param name="ClickToPlay" value="true">

: 동영상 등을 재생할때 화면을 클릭하면 일시 정지되거나 다시 재생하는 기능을 제어하는 기능입니다. true / false로 제어합니다.

<param name="AutoSize" value="true">

: 화면의 비율을 자동으로 제어할 것인지, 말 것인지를 제어하는 기능입니다.
true로 해 놓으면 원래 정해진 화면 비율로 자동으로 재생됩니다.

<param name="AutoStart" value="true">

: 플레이어창이 뜨면서 자동실행 여부, 즉 autostart와 같은 기능입니다. false로 해놓으면 재생 버튼을 클릭해야 플레이 됩니다.

<param name="ShowControls" value="true">

: hidden 태그와 같은 기능으로 false로 지정시 플레이어가 보이지 않게 됩니다.

<param name="ShowAudioControls" value="true">

: 이 기능은 플레이어 우측의 볼륨 조절기능과 음소거 기능을 제어하는 기능입니다.
false로 지정하시면 플레이어에서 볼륨 조정과 음소거 조절하는 부분이 사라집니다.

<param name="ShowDisplay" value="false">

: 이 부분은 플레이어 아래에 파일의 디스플레이 정보를 출력할 것인가 말것인가를 제어하는 부분입니다.
true로 해 놓을 경우 아래에 쇼, 클립, 만든이, 저작권 등의 정보가 출력됩니다.

<param name="ShowTracker" value="true">

: 재생 구간을 보여주는, 재생이 되면서 옆으로 움직이는 막대, 트랙커를 제어하는 기능입니다.
이 부분을 움직여서 원하는 부분만을 들을 수도 있지요.
false로 지정시 트랙커가 사라집니다.

<param name="ShowStatusBar" value="true">

: 플레이어 아래에 버퍼링과 남은시간/총시간 을 보여주는 한줄의 정보창을 제어하는 부분입니다.
false로 해놓으면 보이지 않습니다.

<param name="EnableContextMenu" value="true">

: 마우스 오른쪽 클릭시 나타나는 메뉴를 제어하는 기능입니다.
false로 해놓으면 우측 클릭을 해도 등록정보 등이 있는 메뉴가 나타나지 않습니다.

<param name="ShowPositionControls" value="true">

: 이 부분은 플레이어의 뒤로 가기(▶▶), 앞으로 가기(◀◀) 등의 버튼을 제어하는 부분입니다.
false로 해놓으면 재생 버튼과 정지 버튼만 출력됩니다.

<param name="ShowCaptioning" value="false">

: 동영상 등의 자막이 있을때 이를 제어하는 기능입니다.
음악 파일 재생시는 false로 해놓으시면 됩니다.

<param name="AutoRewind" value="true">

: 재생이 끝났을 경우 이 부분을 true로 해놓으면 처음으로 돌아갑니다.
false로 해 놓으면 끝부분에 머물러 있습니다.

<param name="PlayCount" value="1">

: <embed>의 loop와 같은 기능으로 플레이 반복 횟수를 결정합니다.
'-1'로 해놓으면 무한 반복 됩니다.

<param name="Volume" value="0">

: 재생시 자동으로 설정할 볼륨 량을 지정해주는 부분입니다.
보기와 같이 0으로 해놓으면 최대 볼륨으로 재생됩니다.

이미지 맵

이미지 맵은 하나의 그림에 부분적으로 링크를 걸어서 각각 다른 경로로
링크시키는 것을 말합니다.

문서안에 있는 그림의 특정 부분에 여러 개의 하이퍼링크를 걸어주는 <map>
태그이며, 이것은 그림의 여러 위치에 링크를 거는 것이기 때문에 이미지파일에
하이퍼링크를 사용하는 것과는 다릅니다.
이미지 맵에서 사용되는 영역(Area)을 정의하는 형태(Shape)의 속성은 다음과 같습니다.

shaoe="rdct"

사각형

shaoe="circle"

원

shaoe="poly"

다각형

예) imgmap.jpg 라는 그림에 3가지의 형태로 이미지 매핑을 시킨 경우
----------------------------------------------------------------------------------------------------
소스)

<img src="images/imgmap.jpg" usemap="#imagemap1">
   <map name="imagemap1">
          <area shape="rect" coords="189, 167, 393, 271" href="http://tokyos.hompy.com" target="_blank">
          <area shape="circle" coords="288, 61, 52" href="http://www.naver.com" target="_blank">
          <area shape="poly" coords="137, 20, 169, 20, 209, 128, 35, 103, 65, 21" href="http://kr.yahoo.com" target="_blank">
   </map>

----------------------------------------------------------------------------------------------------

실행결과)     마우스로 클릭해보세요.(3영역이 링크되었습니다.)

기본적으로 사각형 영역만 쓰지만 그래도 HTML태그를 직접 적어서 하는 작업은 좌표맞추기가 매우
까다롭기 때문에 나모웹 에디터나 드림위버 같은 웹 에디터 프로그램으로 쉽게
이미지 맵을 만드는 것을 추~천(!)♡ 합니다..................(;;ㅈㅅ)

프레임태그

프레임셋 (Frameset)

자 그럼 이제 태그중에 초보들한테 제일 머리에 안들어온다는
그 재수없고 짜증나는 프레임 태그를 배워볼까요-
일단 개념이 안잡혀서 그러니까 개념부터 알아보도록 하죠!

프레임 태그는 기본적인 태그들과는 다른 개념입니다.
한 페이지에 태그를넣고 그걸 걍 보고 음~ 하는게 아니라..
홈페이지 전용 태그입니다.
문서가 여러개 있어야죠. (html문서) home.html , menu.html , main.html 이런식으로
적어도 세 개는 있어야죠-
암튼 자 이제,
프레임 태그를 배워봅시다아앗!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ~!
★따라해보기-
프레임을 처음 접하시는 분들은 작업을 같이 하면서 설명을 들어볼까요?
따라해보면 쉽게 알게되요!
일단. 자기 계정에 html 문서를 준비해요. ^^
계정이 없으신분은 만드세요. (네이버, 네띠앙, 한미르 등)
그리고는, html 문서를 만드세요. 이름을 각각 home.html , menu.html , main.html , news.html 로 해서 네개요.
그리고 home.html 문서에다가 이런 프레임 태그를 적으세요.
이렇게.↓ (기본)

<frameset cols="200, *">

<frame name="left" src="menu.html">

<frame name="right" src="main.html">

</frameset>

← 자. 그럼 이 소스에 대해 쪼끔(?) 설명을... 음하핫
대충 이런 명령을 한겁니다.
첫째 줄은- 프레임셋이 시작됐다!!.
프레임셋을 가로로(cols) 나눠라. 왼쪽
프레임은, 절대적으로 200픽셀이고 그다음은
나머지 값으로 알아서 해라!! (*)
그리고 둘째줄은- 이쪽 칸(프레임)은 이름이 left 이다.
(name="left") 그리고 이프레임의 문서는 menu.html을
불러라.(나타내라) (src="menu.html")
셋째줄은 알아서....둘째줄하고 비슷한 식입니다
넷째줄은 프레임셋이 끝났다 (/frameset)입니다.
   -이 설명은 적지 말고 왼쪽의 소스만 복사하세요!!-

자 그리고 이젠 다음 문서인 menu.html 에다가 소스를 적습니다
메뉴에 맞는 태그를 적어야 합니다. 링크태그를요.
이케여↓ ※링크시킬 때 타겟은 right 로-

<h3> 메뉴다! </h3>
<p>
<a href="main.html" target="right">메인화면</a>
<p>
<a href="news.html" target="right">news</a>
<p>
<a href="http://www.naver.com" target="right">
지식까지 검색해줄거같아 보이는 네이버
</a>

참! 그리고 저기 위에 home.html 은 소스를 <head>와
</head> 사이에 넣구요, 왼쪽의 menu.html 소스는
<body>와</body> 사이에 넣으세요.
꼭 그렇게 하지 않고 소스만 그냥 적어도 되지만...
암튼 또 왼쪽 소스에 대해 아주 조오..금 설명을하죠
첫 번째줄 은 h3의 글씨크기로 메뉴다! 라고 글씨를
쓴 거구요. 그담에, 두 번째줄은,
링크태그가 시작되었다. ( <a )
링크될 주소는 main.html 이다.(href="main.html")
클릭하면 나타날 곳은 바로 right 라는 네임을가진
창이다.또는, ( target="right" ) rigth에 링크시켜라!
그리고 클릭될 것은 "메인화면" 이라는 글씨이다.
[ <a> 와</a> 사이에 있는건 클릭될 문자이다. ]
그리고 세 번째 줄은 또 알아서 하시구~ ^^
네 번째줄부터 끝까지는 그냥 다른사이트도 링크
된다는걸 보여주기 위해 한 거에요.그것도 복사.

자 또 다음 문서인 main.html 에 다가 소스를 적습니다.
아무거나. -_-; 그냥 님들이 알아보실수 있는 메인화면으로.
암꺼나 적어요~ 메인화면이다~ 등. 정말 아무거나.

그리고 마지막으로 news.html 에다가 소스를 적어요.
이렇게 적으세요.

<html>
<head>
<title>뉴스</title>
</head>
<body bgcolor="black">
<br><p><br><center>
<img src="http://w2.hompy.com/tokyos/news.jpg">
</center>
</body>
</html>

이젠 home.html 문서를 열어보세요. 프레임이 나눠졌습니다.
왼쪽 메뉴도 클릭해 보시구요. 음. 대충 알겠죠? 프레임이 뭔지.
역시 해보는게 최고에요. 해보고나면 알죠.
그치만 쓰는 저도 참 힘들군요. -_ㅠ 흑.
암튼 따라해보기는 끝입니다.

그럼 이제 프레임의 속성에 대해 알아볼까요.
프레임셋을 만들 때 쓰는 속성은 다른 태그들보다 중요합니다.
꼭 알아두어야겠죠.

속성

설명

bolder="숫자"

중간선 두께. 0 으로 해주세요. 꼭이요.

cols="150, *"   (꼭이런식은아님)

가로로 나눌 때의 속성. 왼쪽몇.오른쪽몇. 이런식.(숫자,%,* 들로 씀)
숫자는 픽셀값(권장) 퍼센트는 창의 몇%로 할 것인가, *는 남는대로.

name="이름.영어로."

메뉴에서 링크시킬 때 타겟(target="")에 적을 이름이 됩니다.

rows="숫자 또는 퍼센트 또는 *

세로로 나누겠다는 속성.

scrolling="셋중하나"

그 프레임칸에 스크롤바를 있게할지 없게할지 auto/yes/no 중 선택. [auto=알아서선택(초기값), yes=무조건생성 no=무조건생성않음]

src="주소"

그 프레임에 처음에 나타나게 될 페이지의 주소.

종합적으로 이러한 속성들을 사용해서 소스를 작성해 볼 때.
이런식이 됩니다.

메뉴,내용형. (기본형)

인사말,메뉴,내용 형. (이렇게도 되요)

<frameset cols="200, *" border="0">
<frame name="a" scrolling="no" src="a.html">
<frame name="b" scrolling="auto" src="b.html">
</frameset>
<frameset rows="50, *" border="0">
<frame name="a" scrolling="no" src="a.html">
<frameset cols="200, *">
<frame name="b" scrolling="auto" src="b.html">
<frame name="c" scrolling="auto" src="c.html">
</frameset>
</frameset>

빨간색으로 된 부분들은 님들이 반드시 바꾸어 주어야 할 부분이구요.

암튼. 열심히 연습해보는 것보다  빨리익히는건 없죠. 그럼~
참!! 그냥 태그연습장에 여기서 주는 프레임 태그를 넣어서 해보셔도 되요.
제 계정에 a, b, c, d.html 문서를 만들어 놨으니까요.

내용은없구요.. 프레임셋구분을 위해 배경색지정만..

출처 : http://pierload.x-y.net/ 테그박스

태그예제자료

소스 복사 및 기본

[[왕초보씨 몇가지 알아가기]]

왕초보씨들이 태그를 배우기 위해 몇가지 알아야 할 필수적인 것들을
몇가지 알려 드리겠습니다.
먼저 컴맹아니고서야 다안다는 소스 복사방법.

1.소스 복사하기
뭐 다들 아시리라 믿지만 모르시는분들도;;
복사하는 방법- 복사할 글씨를 드래그 해서(클릭해서 끕니다) 파랗게 블록이 씌워 지면
Ctrl + C를 누릅니다.<키보드의 [Ctrl]키와 [C] 키를 같이 누름>
그럼 이제 글자가 복사 된거구요. 붙여넣기는 붙여넣기 할곳에다가
Ctrl + V를 누르면 붙기가 됩니당.
자 그럼 아래의 태그를 복사해서 저기 하얀 텍스트박스에 붙여넣기 해보세요.
<img src="http://pierload.x-y.net/ex.jpg">
↗이걸 복사해서 이 안에↓ 붙여넣기 하세요.

자. 성공했으면 다음입니다.

2.기본적인 태그의 영어뜻 알기
일단 태그를 이해 하려면 뭐가 무슨말인지 알아야 합니다.
몇가지만 알아보도록 하죠.
자. 일단 여기서 본 태그들을 복사해서 태그연습장에다가 붙여넣기 하고
결과를 보면서 약간씩 익히세요.
태그는 영어로 씁니다. 모두 영어로 되있죠.
그러므로 영어를 알아야 합니다. 반드시 알아만 하는 영어들...

color -

컬러. 색깔이란 뜻이죠. 태그에서 많이쓰입니다.

border -

두께, 테두리 뭐 그런뜻입니다.

src    -

태그에서 src라고 나오면 그다음은 바로 주소가 나옵니다. 경로란 뜻이죠.

img    -

이미지란 뜻입니다. 그림,사진

size   -

크기란 뜻이죠. 글씨태그에서 주로 쓰이구요...

width -

외워두면 좋습니다. 넓이,가로길이 그런 뜻이구요.

height -

이것두 위에것과 비슷한.. 세로길이, 높이 이런뜻입니다.

table -

테이블이라고 읽는데 태그에선 표를 의미합니다.

자. 달달 외워서 그냥 안보고도 적을 수 있도록 하시구요. 뜻도

3.자 그럼 색상 코드를 약간 외워보겠습니다.
기본적인 색상 몇가지를 알아보겠습니다.
폰트태그에서 <font color="red">레드</font> 이렇게 하는 경우가 있습니다.
글씨를 빨간색으로 지정한 겁니다.
위에 쓰인 태그를 잘 보세요.
폰트 컬러 ="레드" 이런뜻이죠. 글씨색을 레드로 하겠단 겁니다.
영어로 red 라고 해도 되지만 6자리의 코드로 할 수도 있습니다.
<font color="ff0000">블루</font> 이렇게 색깔명에 ff0000이라고 넣었습니다.
자 색깔을 정할 때 쓸 코드를 몇가지 외워두는 것이 편합니다.

코드명

영어명

색깔

000000

black

검정

FFFFFF

white

흰색

0000FF

blue

파랑

FF0000

red

빨강

FFFF00

yellow

노랑

C0C0C0

silver

밝은회색

808080

gray

어두운회색

00FF00

green

초록

00008B

darkblue

어두운파랑

5A2A2A

brown

브라운색

808000

olive

올리브색

FFC0CB

pink

핑크색

코드를 적어도 되고 영어로 적어도 됩니다. 아무거나 외우세요.
꼭 외울 필요는 없지만 ffffff (흰색) 000000(검정) 이정도는
그냥 알 수 있겟죠?

그럼 이제 태그를 배우세요.
[기본태그설명] 에 가서 하나하나 배우는걸 추천합니다.

추천 강좌 순서=

문자태그 - 글씨태그 - 마퀴태그 - 그림태그 - 배경태그 - 테이블태그 -
음악태그 - 링크태그 - 이미지 맵 - 아이프레임 - 프레임셋 - object

위의 순서대로 배우는 것이 가장 (서로좋을 듯;;)

글씨 테그 예제

<span style="font-family:굴림;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=0000ff,strength:2)"><h2>
파랑색 테두리글씨
</h2></span>

파랑색 테두리글씨

<span style="font-family:굴림;font-size:12pt;color:white;width:100%;height:20;Filter:Glow(color=red,strength:2)"><h2>
분홍색 테두리글씨
</h2></span>

분홍색 테두리글씨

<span style="font-weight:none; color:yellow; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=orange,direction=135)">
글씨를고쳐서쓰세요
</span>

글씨를고쳐서쓰세요

<table width=100%><td width=450><span style=color:pink;filter:shadow(color=ff00cc);height:0px><font face=돋움><FONT SIZE=7><MARQUEE DIRECTION=right><MARQUEE DIRECTION=left>
제목만 글씨태그
</marquee></marquee></font></font></span></td></table>

제목만 글씨태그

<div style="width:320; height:50; font-size:25pt; filter:shadow(color=#9966ff,direction=45)">
제목용글씨
</div>

제목용글씨

<span style=color=plum;filter:shadow;height:10px> <font size=5 face=굴림 color="#0099FF"><h1>
진파랑 테두리네
</h1></font></span>

진파랑 테두리네

<span style=color:white;filter:glow(color=0000cc);height:10><b><font size=3>
조용히 앉아서 낙서하세요
</font></b></span>

조용히 앉아서 낙서하세요

<span style=color:ffffff;filter:glow(color=ff99ff);height:0px><font face=굴림체 size=5>
분홍색이구나
</font></span>

분홍색이구나

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=blue,direction=135)">
파랑색 그림자글씨
</span>

파랑색 그림자글씨

<span style="font-weight:none; color:White; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=red,direction=135)">
에혀..그만하졍
</span>

에혀..그만하졍

<div style="width:320; height:50; font-size:25pt; filter:dropshadow(color=#cccccc, offx=10, offy=10, positive=1)">태그마스터1 </div>

태그마스터1

<font style="width:320; height:50; font-size:25pt; filter:dropshadow(color=red, offx=4, offy=4, positive=1)">태그마스터2</font>

태그마스터2

<div style="font-family:굴림; font-size:30pt; line-height: 200%; font-weight:bold; width:100%; color:blue; filter:blur(add=1,strength=10)">태그마스터3 </div>

태그마스터3

<div style="font-family:굴림; font-size:30pt; line-height: 200%; font-weight:bold; width:100%; color:blue; filter:blur(add=0,strength=10)">태그마스터4 </div>

태그마스터4

<div style="font-family:굴림; font-size:30pt; line-height: 200%; font-weight:bold; width:100%; color:blue; filter:blur(add=1,strength=10,direction=300)">태그마스터5 </div>

태그마스터5

<div style="font-family:굴림; font-size:30pt; line-height: 200%; font-weight:bold; width:100%; color:blue; filter:blur(add=0,strength=10,direction=300)">태그마스터6 </div>

태그마스터6

마귀 테그 예제

<MARQUEE bgcolor=yellow scrollamount=80>호호호</marquee>
호호호
<MARQUEE SCROLLAMOUNT=500>한곳에서만 반짝</marquee>
한곳에서만 반짝
<MARQUEE scrollamount=150>왼쪽</marquee>
왼쪽
<MARQUEE scrollamount=100>오른쪽</marquee>
오른쪽
<marquee behavior!=alternate width=700scrollamount=600>좌우반짝반짝!</marquee>
좌우반짝반짝!
<MARQUEE BGCOLOR=YELLOW SCROLLAMOUNT=2>(노란색바탕에서)</MARQUEE>
(노란색바탕에서)
<MARQUEE diretion="wave" behavior!=alternate>천천히</marquee>
천천히
<MARQUEE behavior!="alternate" width="120">우에서 좌로.숨어서이동</marquee>
우에서 좌로.숨어서이동
<marquee>마퀴의 기본</marquee>
마퀴의 기본
<marquee width=200> <marquee direction=up behavior!=alternateheight=25>~껑충~</marquee></marquee>
~껑충~
<marquee bgcolor=red>레드바탕</marquee>
레드바탕
<marquee behavior!=alternate width=600> <h2>왕복</h2></marquee>

<marquee bgcolor=grey width=300 scrollamount=200>왼쪽바탕에서 반짝</marquee>
왼쪽바탕에서반짝
<marquee bgcolor=yellow scrollamount=80>배경. 빠른마퀴</marquee>
배경. 빠른마퀴
<marquee bgcolor=yellow scrollamount=300>좌우 반짝반짝!!!</marquee>
좌우 반짝반짝!!!
<marquee behavior!=alternate width=700 scrollamount=600>좌우반짝반짝!</marquee>
좌우반짝반짝!
<marquee width=300 scrollamount=20>작은 마퀴박스</marquee>
작은마퀴박스
<marquee bgcolor=#"00ff00">연두색바탕 마퀴</marquee>
연두색바탕 마퀴

배경 테그 예제

배경태그 예제입니다.
여기서 쓰이는 태그는 <body>를 바꾸거나 <body>와 </body>의 사이에 넣으셔야 합니다. <ㅡ중요!

다음은 홈페이지에서 배경색을 정하는 태그입니다.

<body bgcolor="white"> - 흰색바탕(기본이죠^^)
<body bgcolor="black"> - 검은바탕
<body bgcolor="red"> - 붉은바탕
<body bgcolor="green"> - 초록바탕
<body bgcolor="blue"> - 파란바탕
<body bgcolor="aqua"> - 연녹색바탕
<body bgcolor="pink"> - 분홍바탕
<body bgcolor="brown"> - 브라운바탕
<body bgcolor="navy"> - 남색바탕
<body bgcolor="gray"> - 회색바탕
<body bgcolor="lime"> - 라임색바탕
<body bgcolor="olive"> - 올리브색바탕
<body bgcolor="purple"> - 보라색바탕
<body bgcolor="silver"> - 은색바탕
<body bgcolor="teal"> - 군청바탕
<body bgcolor="orange"> - 오렌지색바탕
<body bgcolor="skyblue"> - 하늘색바탕

아래는 기본배경으로 쓸만한 이미지들을 배경태그로 적용시킨 예제입니다.

<body background="http://pierload.x-y.net/img/exbg1.gif"> - 기본체크
<body background="http://pierload.x-y.net/img/exbg2.gif"> - 고급스런문양 (빨강)
<body background="http://pierload.x-y.net/img/exbg3.gif"> - 고급스런문양 (핑크)
<body background="http://pierload.x-y.net/img/exbg4.gif"> - 이것도무슨 문양같은데
<body background="http://pierload.x-y.net/img/exbg5.gif"> - 주황색 구불구불
<body background="http://pierload.x-y.net/img/exbg6.gif"> - 핑크색 구불구불
<body background="http://pierload.x-y.net/img/exbg7.gif"> - 가로세로엇갈림
<body background="http://pierload.x-y.net/img/exbg8.gif"> - 그린체크
<body background="http://pierload.x-y.net/img/bg/blue8.gif"> - 나름대로...
<body background="http://pierload.x-y.net/img/bg/01.jpg"> - 드문드문있는 별
<body background="http://pierload.x-y.net/img/bg/02.jpg"> - 사랑해
<body background="http://pierload.x-y.net/img/bg/03.jpg"> - 웃기는 해
<body background="http://pierload.x-y.net/img/bg/04.jpg"> - 막만든 바탕
<body background="http://pierload.x-y.net/img/bg/05.jpg"> - 핑크계열희미한무늬
<body background="http://pierload.x-y.net/img/bg/01.gif"> - 포도
<body background="http://pierload.x-y.net/img/bg/02.gif"> - 사과
<body background="http://pierload.x-y.net/img/bg/03.gif"> - 별
<body background="http://pierload.x-y.net/img/bg/04.gif"> - 분홍색별(?)
<body background="http://pierload.x-y.net/img/bg/05.gif"> - 개구리
<body background="http://pierload.x-y.net/img/bg/06.gif"> - 병아리체크
<body background="http://pierload.x-y.net/img/bg/07.gif"> - 딸기
<body background="http://pierload.x-y.net/img/bg/08.gif"> - 파란체크
<body background="http://pierload.x-y.net/img/bg/09.gif"> - 무슨무늬지
<body background="http://pierload.x-y.net/img/bg/10.gif"> - 스몰하트
<body background="http://pierload.x-y.net/img/bg/11.gif"> - 복잡
<body background="http://pierload.x-y.net/img/bg/12.gif"> - 이걸 머라구하더라..
<body background="http://pierload.x-y.net/img/bg/13.gif"> - 분홍체크
<body background="http://pierload.x-y.net/img/bg/14.gif"> - 하늘색무늬
<body background="http://pierload.x-y.net/img/bg/15.gif"> - 이쁜별
<body background="http://pierload.x-y.net/img/bg/16.gif"> - 하늘색체크
<body background="http://pierload.x-y.net/img/bg/17.gif"> - 음표
<body background="http://pierload.x-y.net/img/bg/18.gif"> - 발자국
<body background="http://pierload.x-y.net/img/bg/19.gif"> - 하얀별
<body background="http://pierload.x-y.net/img/bg/20.gif"> - 희미한구름(작음)
<body background="http://pierload.x-y.net/img/bg/21.gif"> - 선명한구름(큼)
<body background="http://pierload.x-y.net/img/bg/22.gif"> - 분홍바탕에 작은별

body가 없는 곳 (홈페이지가아닌 카페 또는 게시판)에 쓸 경우 아래 방법을 써 주시면 됩니다.
<style>
body { background-image:url("배경주소");background-attachment: fixed; } table { background-color: transparent; } td { background-color: transparent; }
</style>

(ex)이런식으로..

<style>
body { background-image:url("http://pierload.x-y.net/img/exbg2.gif");background-attachment: fixed; } table { background-color: transparent; } td { background-color: transparent; }
</style>

프레임 예제 자료

＃자료실에 들어가기 전에...

프레임에 대한 기초 지식.
프레임은 한 페이지 안에 여러 페이지를 프레임셋에 넣어서
한꺼번에 보여주는 걸 말합니다.
예를들어, a.html 파일과 b.html 그리고, c.html
이렇게 세개의 파일이 있을 경우,(파일이름이 꼭 a,b,c,여야 하는건 아님.)
a.html 이란 페이지에에 프레임태그를 써서 b.html 과 c.html 이 나타나게 하는것입니다.
그림설명)

DHTML 테그 모음

이미지 태그에 필터효과 준것.

원본 이미지. ^^

<img src="images/dr9.gif">

좌우 뒤바뀜.

<img src="images/dr9.gif" style="filter:fliph()">

상하 뒤바뀜.

<img src="images/dr9.gif" style="filter:flipv()">

이미지 흑백.

<img src="images/dr9.gif" style="filter:gray()">

물결.

<img src="images/dr9.gif" style="filter:wave(strength=5,freq=3,lightstrength=10,phase=25,add=0)">

중심부터 원을그리며 부드럽게. 배경색 관계없이 깨끗하게 사악~

<img src="images/dr9.gif" style="filter:alpha(opacity=100, style=2, finishopacity=0)">

이미지 색 반전.

<img src="images/dr9.gif" style="filter:invert()">

와우.. -_-; 이걸 머라구 해야되나. 햇살 내리는거 같네요. ㅋㅋ

<img src="images/dr9.gif" style="filter:blur(direction=135,strength=100)">

흑백 반전. [x-ray 효과]

<img src="images/dr9.gif" style="filter:xray()">

저작자표시 비영리

'기타 > 컴맹에서 태그까지 ' 카테고리의 다른 글

묶인 곡 풀기 (0)	2014.01.11
많은 곡을 하나의 플레이바로 (0)	2013.12.29
mp3 용량 줄이기 (0)	2013.12.29
유투브 동영상 오토스타트 그리고 무한 반복~~~~희승연의 안부(전국노래자랑) (0)	2013.10.29
처음 태그에 도전하시는 분에게 (0)	2013.07.28

태라라의 블로그

[기본 테그]1

크다

중간

작다

파랑색 테두리글씨

분홍색 테두리글씨

진파랑 테두리네

'기타 > 컴맹에서 태그까지 ' 카테고리의 다른 글

티스토리툴바

종류	기능
target=xxx	링크시킨 html 문서를 <frameset>의 name으로 붙여준 프레임에서 열 게 한다. 예) target=right / targer=main
target=_top	링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open된 브라우저 화면으로 열도록 한다.
target=_blank	링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고, 새로운 브라우저(새 창, New Navigator)에서 열게한다.
target=_parent	기존의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조 로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크한다.
target=_self	하이퍼링크 시킨 문서를 같은 프레임에서 열게한다.

<table>	표 작성함을 정의한다 (</table>은 표가 끝남을 정의)
<tr>	Table Row의 약자로, 표 안에서 한줄(Row)이 끝났으 므로 줄바꾸기를 한다.
<th>	Table Heading의 약자로, 표의 머리글 (Header) 임을 나타낸다.
<td>	Table Data의 약자로,보통체와 왼쪽정렬로 적용된다.
<caption>	표의 주석문(제목)을 표화 함께 나타내는 속성이다. align=top -->표의상단 align=bottom -->표의하단

속성	정의
width=50%	표나 셀의 폭(넓이)을 창의 백문율(%)로 지정한다.
width=400	표나 셀의 폭을 픽셀 값으로 지정한다.
height=pixel수	셀의 높이(세로)를 지정한다.
cellpadding=10	셀의 안쪽 여백(셀의 테두리와 문자열 사이의 간격)을 10픽셀로 지한정다.
cellspacing=5	셀과 셀 사이의 간격을 5픽셀로 지정한다.
border=숫자	표 테두리의 두께를 지정하는 것으로 숫자가 커질수록 두꺼워진다. border=0 이면 웹 브라우저에서 표의 테두리가 보이지 않는다.
colspan=2	가로의 열(column) 2개를 합치기 한다.
rowspan=3	세로의 줄(row)3개를 합치기 한다.
valign="위치"	align="left,right,center" -셀 안에서의 가로 위치 정렬
align="위치"	valign="top,middle,bottom" - 셀 안에서의 세로위치정렬
bgcolor="색상"	표 전체 또는 선택된 셀의 배경 색상을 지정한다.
backround="주소"	표 전체 또는 선택된 셀의 배경 이미지를 삽입한다.

속성(option)	설명
src="주소"	iframe에서 표시할 경로를 지정해 줍니다. "http://..."
name="down"	iframe의 이름을 지정 합니다. 이름을 Yanni 로 했음.
width="숫자(픽셀값)"	frame의 가로길이를 지정합니다.
height="숫자"	frame의 세로길이를 지정합니다.
frameborder="숫자"	iframe의 경계선 두께입니다. "2"로 하면 깔끔(?)하게 안보이더군요.
marginwidth="0"	iframe의 좌우여백입니다.
marginheight="0"	iframe의 상하여백입니다.
scrolling="셋중하나"	yes:무조건생성,no:무조건생성않음,auto:페이지 내용크기에 따라.
align="셋중하나"	문장과 상관되는 정렬위치입니다.[left/right/center(왼쪽/오른쪽/중간)] 셋중 하나 선택.

속성	설명
bolder="숫자"	중간선 두께. 0 으로 해주세요. 꼭이요.
cols="150, *" (꼭이런식은아님)	가로로 나눌 때의 속성. 왼쪽몇.오른쪽몇. 이런식.(숫자,%,* 들로 씀) 숫자는 픽셀값(권장) 퍼센트는 창의 몇%로 할 것인가, *는 남는대로.
name="이름.영어로."	메뉴에서 링크시킬 때 타겟(target="")에 적을 이름이 됩니다.
rows="숫자 또는 퍼센트 또는 *	세로로 나누겠다는 속성.
scrolling="셋중하나"	그 프레임칸에 스크롤바를 있게할지 없게할지 auto/yes/no 중 선택. [auto=알아서선택(초기값), yes=무조건생성 no=무조건생성않음]
src="주소"	그 프레임에 처음에 나타나게 될 페이지의 주소.

메뉴,내용형. (기본형)	인사말,메뉴,내용 형. (이렇게도 되요)
<frameset cols="200, *" border="0"> <frame name="a" scrolling="no" src="a.html"> <frame name="b" scrolling="auto" src="b.html"> </frameset>	<frameset rows="50, " border="0"> <frame name="a" scrolling="no" src="a.html"> <frameset cols="200, "> <frame name="b" scrolling="auto" src="b.html"> <frame name="c" scrolling="auto" src="c.html"> </frameset> </frameset>

	원본 이미지. ^^
	<img src="images/dr9.gif">
	좌우 뒤바뀜.
	<img src="images/dr9.gif" style="filter:fliph()">
	상하 뒤바뀜.
	<img src="images/dr9.gif" style="filter:flipv()">
	이미지 흑백.
	<img src="images/dr9.gif" style="filter:gray()">
	물결.
	<img src="images/dr9.gif" style="filter:wave(strength=5,freq=3,lightstrength=10,phase=25,add=0)">
	중심부터 원을그리며 부드럽게. 배경색 관계없이 깨끗하게 사악~
	<img src="images/dr9.gif" style="filter:alpha(opacity=100, style=2, finishopacity=0)">
	이미지 색 반전.
	<img src="images/dr9.gif" style="filter:invert()">
	와우.. -_-; 이걸 머라구 해야되나. 햇살 내리는거 같네요. ㅋㅋ
	<img src="images/dr9.gif" style="filter:blur(direction=135,strength=100)">
	흑백 반전. [x-ray 효과]
	<img src="images/dr9.gif" style="filter:xray()">

[기본 테그]1

크다

중간

작다

파랑색 테두리글씨

분홍색 테두리글씨

진파랑 테두리네

'기타 > 컴맹에서 태그까지 ' 카테고리의 다른 글

관련글

티스토리툴바