1. 텍스트나 이미지에 링크걸기
Anchor(닻)으로 원하는 곳으로 자유롭게 이동하기
<A href = "파일이름 or URL>텍스트나 이미지</A>
<A href = "링크할 파일주소"
name = "현재문서의 위치표시명(책갈피)"
target = "frame 명" ------------>frame에서 사용
title="도움말 형식의 툴팁으로 사용할 글"
style = "적용할 스타일시트 적용" ></A>
※ 링크점선을 없애려면
<A href="http://www.yahoo.co.kr" onfocus="this.blur()">image1.gif</A>
2. 특정위치로 이동하기
① 현재 페이지내에서
<A href="#원하는 위치의 책갈피명"></A>
<A name="원하는 위치의 책갈피명"></A>
② 다른 페이지의 특정위치이동
<A href="URL#원하는 위치의 책갈피명"></A>
<A name="원하는 위치의 책갈피명"></A>
3. 링크로 전자메일 보내기
<A href="mailto:메일주소"></A>
메일의 제목, 본문내용의 미리 설정방법은
<A href="mailto:메일주소?subject=편지제목&BODY=본문의 내용을 적습니다">
4. 또 다른 링크대상
이미지 파일(gif, jpg), 사운드파일(wav, au, mid). 동영상파일(mpeg, mov),
압축파일(zip): 사용자의 pc로 다운로드 하게 한다.
ㅡㅡ> 단 MS Office가 있는 pc에서는 바로 볼수 있는 파일을 다운로드하고 싶으면
마우스 오른쪽 버튼의 다른이름으로 대상 을 눌러 다운로드한다.
*
1. <IMG> 이미지 삽입하기
<IMG src ="이미지 파일명"
width ="이미지의 넓이"
height ="이미지의 높이"
border ="테두리값"
align ="left/right/top/middle/bottom" --> left,right는 이미지 배치와 관련
top,middle,bottom은 이미지옆의 글자배치
hspace ="이미지와 글자간 좌우여백"
vspace ="이미지와 글자간 상하여백"
alt ="풍선도움말 내용" -------> 대체 텍스트라고도 한다.
lowsrc ="처음에 나타날 이미지명" --> 넷스케이프전용. 용량이 큰 원이미지를 부르기
전에 용량이 작은 이미지를 먼저 읽어보여주는 두단계 가져오기 속성
---> 요즘은 컴퓨터의 발달로 의미가 퇴색된 기능
2. 사운드 걸기
ⓐ 음악파일 종류
AU : 선마이크로시스템사나 NeXT사에서 사용. 플러그인 없이 사용가능. 근래 잘 사용안함
MID : 적은용량이어서 배경음악으로 널리사용. 사용자의 사운드카드에 따라 성능좌우
RA/RAM : Real Player 에서만 재생. 압축률이 뛰어나 온라인 실시간 재생이 가능
인터넷 온라인 방송국에서 가장 많이 이용
AIFF : 맥켄토시용 사운드 파일포맷. 용량이 커서 웹상에선 사용불가.
WAV : 윈도우용 사운드 파일포맷. 용량이 큰편이어서 웹상에서 잘 사용하지 않음
WMA : window media audio. 압축률이 좋고(MP3의 2배) 저작권문제가 없어 많이사용
ⓑ 배경음악 넣기
<BGSOUND src = "사운드 파일명" ---> 익스플로러 전용. 주로 MID파일 사용
loop = "반복횟수" > ------> 반복횟수값이 -1 또는 infinite이면 무한반복
ⓒ웹문서로 불러오면서 실시간 실행방식 : 플래시나 디렉터에 주로 사용
<ENBED src = "사운드 파일명"
autostart = "true/false"
hidden = "true/false" -------> 음악조절기가 보여지게 또는 안보이게 한다.
width, height = "n" ----> 삽입할 음악조절기나 플래시 플레이어의 가로세로값
type = 삽입방식 --------> 삽입할 내용에 따른 지정
예) <EMBED src="music1.mid" autostart="false" hidden="false">
<EMBED src="movie1.asx width="가로" height="세로" type=video/x-ms-asf>
<EMBED src="flash1.swf width="가로" height="세로" type=application/octet-stream>
*
1.Frame이란? 하나의 웹브라우저의 화면을 두개 이상의 분할하여 사용하는 것.
즉, 각각의 독립적인 정보를 갖는 분할된 영역들을 말한다.
- Frameset : 분할된 영역들을 컨트롤할 수 있는 또하나의 페이지
- 장점 : 관리의 편리성, 이동의 일관성(일정한 화면의 제공)
- 단점 : 배치의 문제점(네비게이션 혼란), 검색엔진 등록의 문제(<NOFRAME>으로 해결가능)
2. 프레임 셋 페이지 구조
<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="50%,*"> -----> <HEAD>..</HEAD> 와 <BODY>..</BODY>사이
<FRAME src="영역1에 들어갈 페이지"> --->파일명
<FRAME src="영역1에 들어갈 페이지">
</FRAMESET>
<BODY></BODY> ---> <BODY>는 사용하지 않아도 된다.
</HTML>
- 가로와 세로의 복합된 구조로 영역을 나누는 경우
프레임셋안에 프레임과 또하나의 프레임셋을 지정하는 내재된 프레임셋구조로 구현한다.
<FRAMESET rows지정> ---> rows 와 cols의 속성은 함께 쓰일수 없다.
<FRAME>
<FRAMESET cols지정>
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
3. <FRAMESET rows="n1,n2" ---> n1,n2은 픽셀값 또는 %와 *(나머지크기)로 표시될 수 있다.
cols="n1,n2" n1과 n2로 분할되는 프레임구조임을 표시
frameborder="no/yes" ---> 프레임과 프레임간의 경계선 표시여부
border="픽셀값" ---> 프레임과 프레임의 간격크기
framespacing="픽셀값">--> 프레임셋 내부의 프레임들의 간격
<FRAME src="파일명" -----> 해당 프레임영역에 올려질 페이지의 파일명
name="프레임이름" ----> <A>링크에서 target 에 지정되는 이름
border="픽셀값" ----> 프레임 경계선의 두께
marginwidth="픽셀값" ----> 프레임 문서에 여백주기
marginheight="픽셀값"
scrolling="auto/yes/no" ---> 스크롤바의 표시여부. auto는 페이지길이에 따름
noresize > -----> 사용자들이 화면을 맘대로 조절할 수 없게 한다.
4. 프레임에 링크 설정하기
프레임문서내에서
<A href="주소" target="프레임명"> : 지정된 프레임화면에 링크결과를 보여준다.
="_top" : 모든 프레임화면을 무시하고 새로운 HTML문서를 불러옴
="_blank : 링크되는 문서를 새창으로 보여줌
="_parent" : 프레임의 상위 프레임셋에 보여준다.
*
1. Iframe 이란? Internel Frame 의 약자. 문서내에 일정크기의 영역을 할애하여 프레임삽입
익스플로러와 넷스케이프 7.0 에서만 지원
<IFRAME>...</IFRAME> ---> <BODY>...</BODY> 사이에 삽입되어야 한다.
2. <IFRAME src="불러들일 HTML파일"
width ="픽셀값" -----> iframe의 넓이
height ="픽셀값" -----> iframe의 높이
marginwidth ="픽셀값" ---> 프레임의 좌우여백
marginheight ="픽셀값" ---> 프레임의 상하여백
frameborder ="픽셀값" ---> 프레임의 구분선을 지정
scrolling="yes/no/auto" > --> 프레임의 스크롤바 설정
*
1. Layer : 문서의 층을 구성하게 한다. Layer를 만드는 태그로 <LAYER>와 <DIV>가 있으나, 익스플로러에서는 <DIV>만 사용가능. 레이어 자체에 색상을 지정하거나 투명으로도 지정할 수 있다 ⓐ<DIV> - CSS 를 이용한 두가지 표현방식 <STYLE> #이름 { position:absolute;} <STYLE> ====> <DIV style= "position:absolute;"> <DIV id="이름"> <DIV> </DIV> ⓑ<LAYER> - 넷스케이프 전용 <LAYER 속성="속성값></LAYER> ⓒ자바스크립트상의 표현 익스플로러 : document.all["레이어이름"].style.속성 넷스케이프 : document.layers["레이어이름"].속성 2. 속성 .id : 레이어 이름 지정 .width, heigth : 레이어의 넓이, 높이 .left, top :문서에서 레이어까지의 좌측거리, 상단거리 .backgroundColor : 레이어의 배경색 (넷스케이프에선 bgcolor) .backgroundImage:url : 레이어의 배경이미지 (넷스케이프에선 background) .visiblity : 레이어의 숨김기능 (hidden/visible) .z-index : 레이어의 순위. 숫자가 낮을수록 하단에 위치한 레이어임. 레이어가 하나이면 생략 .clip : 레이어의 일부만 보이게 지정 rect(a b c d)명령과 함께 사용 a:좌측거리 b:a+보여줄 레이어영역의 너비 c:상단거리 d:c+보여줄 레이어영역의 높이 |
[=] : http://mindteam.tistory.com/
'온울에..? > AVA..!' 카테고리의 다른 글
[=] 체스의 알고리즘 (0) | 2008.06.13 |
---|---|
[=] <A> 링크걸기 (0) | 2008.06.07 |
[=] 윈도우 단축키 모음 (0) | 2008.05.27 |
[=] 컴초보 하루만에 컴고수되기 (0) | 2008.05.24 |
[=] css1의 규격 (0) | 2008.05.24 |