computer & internet 07. FRAME TAG
FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2
FRAME 문서의구조 HTML 문서에서 <body> 태그기능을 프레임문서구조에서는 <frameset> 이대신함 일반웹페이지구조 <HTML> <HEAD><TITLE>..</TITLE> </HEAD> <BODY>.. 웹페이지본문.. </BODY> </HTML> 일반웹페이지구조 <HTML> <HEAD><TITLE>..</TITLE> </HEAD> <FRAMSET>.. 프레임선언.. </FRAMSET> </HTML> 3
FRAME 관련태그 1. <FRAMESET ROWS = "..." 또는 COLS = "...">...</FRAMESET> <BODY> 태그대신사용하기때문에 <BODY> 가없는특징을가짐화면분할에대한정보를정의할뿐, 실제로화면에출력되는내용을담고있는것은아님속성 (ROWS 또는 COLS) 을사용하여화면을분할하여프레임을만듦 < 속성 > 1 % 비율을이용한분할예 ROWS="50%, 50%" : 화면을가로로 50:50 비율로분할 COLS="20%, 50%, 30%" : 화면을세로로 20:50:30 비율로분할 2 픽셀수를이용한분할예 ROWS="100,200,*" : 화면을가로로 100 픽셀, 200 픽셀, 그리고나머지영역으로분할 4
2. <FRAME> FRAME 관련태그 실제로지정된프레임이들어갈정보를정의 <FRAMESET> 태그에의해화면이분할여러개의프레임이생성되면 각각의프레임마다출력할실제적인 HTML 문서들을하나하나정의할때사용 속성내용 SRC =... NAME = "... MARGINWIDTH = n MARGINHEIGHT = n SCROLLING = AUTO 또는 YES 또는 NO NORESIZE 지정된프레임에서보여줄 HTML 문서의 URL 을지정 현재의프레임이름을정의 해당프레임의좌우여백을픽셀단위로지정 해당프레임의상하여백을픽셀단위로지정 프레임의우측과하단에스크롤바를만들것인지아닌지를결정 이속성을지정하면사용자가프레임의크기를임의로변경할수없음 5
3. <NOFRAMES> </NOFRAMES> 프레임이지원되지않는웹브라우저를위하여사용 <html> <head> <title> 프레임나누기 </title> </head> <frameset cols="30%,70%"> FRAME 관련태그 <frame src="left_menu.html"name="left" scrolling="auto"> <frame src="main.html"name="right" scrolling="auto"> </frameset> <noframes> 현재귀하의웹브라우저는버전이낮아프레임기능을 사용할수없습니다. </noframes> </html> 6
FRAME TAG 실습 1 7
FRAME TAG 실습 2 8
FRAME TAG 문제! 아래의결과가나올수있는코드를작성하시오 9
iframe TAG 1. <iframe> </iframe> HTML 문서의일부분만을프레임영역으로이용. <html> <head> <title> 인라인프레임 </title> </head> <body bgcolor= ##FFA500 > </body> </html> <h2> 인라인프레임사용예제 </h2> <p> 인라인프레임을이용하면 HTML 문서의일부영역을 프레임처럼사용할수있습니다. </p> <iframe name="iframe1" src="09_01.htm width="300 height="300"> </iframe> 10
2. <iframe> 속성 iframe TAG 속성내용 Frameborder 인라인프레임테두리두께를설정 ( 숫자 ) Height 인라인프레임의높이를설정 ( 숫자 or 백분율 ) MARGINWIDTH = n 인라인프레임과내용사이의상하간격설정 ( 숫자 ) MARGINHEIGHT = n 인라인프레임과내용사이의좌우간격설정 ( 숫자 ) Name 인라인프레임의이름을설정 ( 문자 ) Scrolling 인라인프레임의스크롤바를숨기거나보여줌 (auto, no, yes) Width 인라인프레임의너비를설정 ( 숫자 or 백분율 ) 11
iframe TAG 실습 <html> <head> <title> 인라인프레임에링크걸기 </title> </head> <body> <a href="http://www.daum.net" target="iframe1">daum 바로가기 </a> <a href="11.jpg" target="iframe1 > 사진보기 1</a> <a href="22.jpg" target="iframe1"> 사진보기 2</a> <a href="33.jpg" target="iframe1"> 사진보기 3</a> <iframe name="iframe1" width="100%" height="500"></iframe> </body> </html> 12
iframe TAG 실습 13
FRAME TAG main.htm pubilc_html 폴더에올려주시면됩니다 ^^* menu.htm profile.htm 14
웹브라우저와멀티미디어 예전방법 : HTML 안에서는 <embed> 나 <object> 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: <audio> 와 <video> 태그가추가
오디오
<audio> 요소의속성
오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG 기술의음성압축기술 Wav - 윈도우에서사용되는표준사운드포맷 Ogg - 특허권을반대하고보다좋은음질을위하여오픈소스로개발되었음.
오디오예제 <!DOCTYPE html> <html> <body> <audio src="old_pop.mp3"" autoplay controls> Your browser does not support the audio element. </audio> </body> </html>
<source> 태그사용 모든브라우저가지원하는오디오형식은아직까지없다! 호환성을높이기위하여다음과같이한다. <!DOCTYPE html> <html> <body> <audio controls autoplay > <source src="old_pop.ogg" type="audio/ogg"> <source src="old_pop.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> </body> </html>
비디오
<video> 요소의속성
비디오예제 <video controls src="movie.ogv"> Your user agent does not support the HTML5 Video element. </video>
비디오예제 <!DOCTYPE html> <html> <body> <video width="640" height="480" controls> <source src="trailer.mp4" type='video/mp4'> <source src="trailer.ogv" type='video/ogg'> <p>your user agent does not support HTML5.</p> </video> </body> </html>