|
| |
|
|
인터넷활용1 아이프레임을 이용하여 이미지와 영상 갤러리 페이지를 작성하시오. 작성한 페이지를 화면 캡쳐하고 소스 및 태그를 정리하여 보고서 형태로 제출하시오.
파일 
인터넷활용1 아이프레임을 이용하여 이미지와 영상 갤….docx
[Size :
430 Kbyte
]
인터넷활용1 아이프레임을 이용하여 이미지와 영상 갤….docx
[Size :
430 Kbyte
]
분량 5 Page
가격 3,000 원
×
링크주소가 복사 되었습니다.
원하는 곳에 붙혀넣기 하세요
원하는 곳에 붙혀넣기 하세요
카트
|
다운받기
|
 네이버 ID로 다운 받기  카카오 ID로 다운 받기  구글 ID로 다운 받기  페이스북 ID로 다운 받기 |
뒤로
|
본문/내용
아이프레임을 이용하여 이미지와 영상 갤러리 페이지를 작성하시오. 작성한 페이지를 화면 캡쳐하고 소스 및 태그를 정리하여 보고서 형태로 제출하시오.
I. 서론
아이프레임(iframe)은 독립된 문서를 현재 문서 안에 삽입할 수 있도록 지원하는 기능이다. 이 기능을 통해 한 페이지 안에서 여러 콘텐츠를 동시에 표시하거나, 특정 영역에 동적으로 다른 페이지나 이미지를 불러올 수 있다. 이런 방식은 웹 페이지의 구조를 유연하게 만들고, 사용자에게 직관적인 인터페이스를 제공하는 데 도움이 된다.
이미지 삽입 태그는 웹에서 필수적인 요소 중 하나이다. 시각적인 정보 전달은 텍스트만으로 이루어질 때보다 더욱 빠르게 인지할 수 있는 장점이 있다. 사진이나 그림을 배치하는 방법, 크기 조절, 클릭 시 다른 화면으로 전환되도록 설정하는 기법 등을 숙지하면 웹 콘텐츠의 완성도를 높일 수 있다.
영상 태그 또한 빠질 수 없다. 동영상은 단순히 정적인 이미지를 넘어 움직임과 소리를 함께 전달하기 때문에 다양한 분야에서 활용된다. 짧은 클립이나 긴 강의 영상 등을 적절히 삽입함으로써, 방문자가 웹 페이지에서 얻을 수 있는 정보의 폭이 넓어진다. 웹 기술이 발달함에 따라 동영상 재생 속도와 화질도 꾸준히 개선되고 있다.
II. 본론
화면캡처
작성코드
이미지 및 영상 갤러리</title>
<style>
body {font-family: Arial, sans-serif;}
#gallery {margin-bottom: 20px;}
.thumbnail {
width: 100px;
margin: 5px;
cursor: pointer;
border: 2px solid #ccc;
transition: border 0.3s;
}
.thumbnail:hover {
border: 2px solid #555;
}
/ 아이프레…<br />
…
</div>
</Div>
<DIV style='clear:both; float:left; border:solid 0px gray;'>
<Center>
<br>
<script>googlead3(860)</script>
<br><br>
</DIV>
<DIV style='clear:both; float:left; border:solid 0px gray;'>
<TABLE width=100%>
</table>
<div id=dv_cart style="display:none">
(보관된 자료가 없습니다)
</div>
<script>
if(dv_cart.innerHTML.indexOf(pk)>-1) {
SW_CartClick = 1;
cartfull = "/main/pics/big_cartfull.gif"
if(document.getElementById("imgCartDetailBtMobile")) { imgCartDetailBtMobile.src = cartfull; imgCartDetailBtMobile.style.filter = "grayscale()"; }
if(document.getElementById("imgCartDetailBt")) { imgCartDetailBt.src = cartfull; imgCartDetailBt.style.filter = "grayscale()"; }
}
</script>
</Div>
</DIV id = td_Detail_Left>
<style>
.sideTable { border:solid 1px #cdcdcd; border-radius:10px; overflow:hidden; width:100%; max-width:160px; }
.sideTitle { padding-left:5px; font-size:14px; font-family:NanumGothic; color:gray; background:#F5F6F8; height:40px; font-weighxt:bold; }
</style>
<!--Right td_Detail_Right-->
<DIV id=td_Detail_Right class="td_Detail_Right">
<span id="span_hd" style="width:160px; overflow:hidden"></span>
<table class=sideTable style='min-height:142px' cellpadding=0 cellspacing=0>
<tr><td class=sideTitle>📝 Regist Info
<tr><td height=1 bgcolor=#DCDCDC>
<tr><td style='padding:10 10 10 10; font-size:14px; font-family:NanumGothic; line-height:1.8' >
I D : gjwj*********<br>
<span style='font-family:굴림체'>Date</span> : 2025-09-03<br>
<span style='font-family:굴림체'>FileNo</span> : 30000161
</table>
<Script>if(plevel == 8) { w("<br>"); print_hongbo() }</script>
<br>
<table class=sideTable cellpadding=0 cellspacing=0>
<tr><td class=sideTitle>
<div style='float:left;'><span style='cursor:pointer' onclick=location.href='/mypage/cart/'><img id=imgCartDetailSide src=/main/pics/big_cart.gif height=20 align=absmiddle style='margin-top:-3px'> Cart </span></div>
<div style='float:right; padding-right:5px; cursor:pointer' onclick=location.href='/mypage/cart/'><img src=/search/pics/icon_prev.png height=14></div>
<tr><td colspan=2 height=1 bgcolor=#DCDCDC>
<tr><td colspan=2 style='padding:10px' class=B116 id=td_cart1><img src=/main/pics/loading.gif>
<tr bgcolor=#F5F6F8 id=td_cart0><td colspan=2 height=5>
</table>
<Script>
td_cart1.innerHTML = dv_cart.innerHTML
if(cook_cart) imgCartDetailSide.src = '/main/pics/big_cartfull.gif'
</script>
<Script>if(plevel != 8) { w("<br>"); print_hongbo() }</script>
<script>if(PC) { if(cat1 != "표지") print_cover() }</script>
<script>if(PC) { w("<br>"); print_help() }</script>
<script>if(PC) { w("<br>"); print_copy() }</script>
<script>if(PC) { w(""); print_partner() }</script>
<script>if(PC) print_sid()</script>
</DIV id = td_Detail_Right>
</TABLEㅌ>
</div>
<br><br>
<Script>
//if(MOBILE) td_Detail_Right.style.display = "none"
</script>
<script>
check_prev() // 미리보기 없는거 갱신용
</script>
<Script charset="utf-8" src=/main/bottom_asp.js?ver=2026-07-17></script>
<footer role="contentinfo">
<div style='clear:both; padding-top:20px'></div>
<br><br><br>
</footer>
<br>
</body>
</html>
<Script>
//if(Mobile) location.href = "#Top2"
</script>