<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #wrap{ padding: 4%; margin:auto; text-align: center; } body{ background-color: gainsboro; } img{ position: relative; width: 200px; height:400px; vertical-align: middle; } .story{ border: 1px solid; padding: 2%; } div.m1,div.m2, div.m3, div.m4, div.m5{ margin: auto; width: 80%; display: none; padding: 0 2% 2% 2%; border: 1px solid; } .aaa{ width: 150px; height:150px; } .one{ text-align: center; } </style>
<script src="js/jquery-3.2.1.min.js"></script> <script> var prevElm; var cn; $(function () { $('[src^="image/m"]').click(function () { $(prevElm).removeAttr('style'); /*$(#wrap).append($(this)); * $('img:eq(1)').after($(this));*/ $('img:eq(2)').before($(this)); if($('img:eq(0)')){ $('img:eq(3)').before($(this)); } imgattr = {width:"250px", height:"500px"} $(this).animate(imgattr, 500, function () { prevElm = this; cn = prevElm.className; $("div."+cn).show(); }) $("div."+cn).hide(); }) }) </script> </head> <body> <div id="mydiv"> <div id="wrap"> <img class="m1" src="image/m1.jpg"> <img class="m2" src="image/m2.jpg"> <img class="m3" src="image/m3.jpg"> <img class="m4" src="image/m4.jpg"> <img class="m5" src="image/m5.jpg"> </div><br>
<div class="m1"> <h2>영화제목</h2> 택시운전사 <h2>영화이미지</h2> <div class="one"> <img class="aaa" src="image/1_1.jpg"> <img class="aaa" src="image/1_2.jpg"> <img class="aaa" src="image/1_3.jpg"> <img class="aaa" src="image/1_1.jpg"> <img class="aaa" src="image/1_2.jpg"> <img class="aaa" src="image/1_3.jpg"> <img class="aaa" src="image/1_1.jpg"> <img class="aaa" src="image/1_2.jpg"> <img class="aaa" src="image/1_3.jpg"> </div> <h2>영화줄거리</h2> <div class="story"> 1980년 5월, 서울 택시운전사.<br> “광주? 돈 워리, 돈 워리! 아이 베스트 드라이버”<br> 택시운전사 만섭(송강호)은 외국손님을 태우고 광주에 갔다 통금 전에 돌아오면<br> 밀린 월세를 갚을 수 있는 거금 10만원을 준다는 말에<br> 독일기자 피터(토마스 크레취만)를 태우고 영문도 모른 채 길을 나선다.<br> 광주 그리고 사람들. “모르겄어라, 우덜도 우덜한테 와 그라는지…”<br> 어떻게든 택시비를 받아야 하는 만섭의 기지로 검문을 뚫고 겨우 들어선 광주.<br> 위험하니 서울로 돌아가자는 만섭의 만류에도<br> 피터는 대학생 재식(류준열)과 황기사(유해진)의 도움 속에 촬영을 시작한다.<br> 그러나 상황은 점점 심각해지고 만섭은 집에 혼자 있을 딸 걱정에 점점 초조해지는데…<br> </div> </div>
<div class="m2"> <h2>영화제목</h2> 군함도 <h2>영화이미지</h2> <div class="one"> <img class="aaa" src="image/2_1.jpg"> <img class="aaa" src="image/2_2.jpg"> <img class="aaa" src="image/2_3.jpg"> <img class="aaa" src="image/2_1.jpg"> <img class="aaa" src="image/2_2.jpg"> <img class="aaa" src="image/2_3.jpg"> <img class="aaa" src="image/2_1.jpg"> <img class="aaa" src="image/2_2.jpg"> <img class="aaa" src="image/2_3.jpg"> </div> <h2>영화줄거리</h2> <div class="story"> 1945년 일제강점기.<br> 경성 반도호텔 악단장 ‘강옥’(황정민)과 그의 하나뿐인 딸 ‘소희’(김수안).<br> 그리고 종로 일대를 주름잡던 주먹 ‘칠성’(소지섭), 일제 치하에서 온갖 고초를 겪어온 ‘말년’(이정현) 등<br> 각기 다른 사연을 품은 조선인들이 일본에서 돈을 벌 수 있다는 말에 속아 군함도로 향한다.<br> 하지만 그들이 함께 탄 배가 도착한 곳은 조선인들을 강제 징용해 노동자로 착취하고 있던 ‘지옥섬’ 군함도였다.<br> 영문도 모른 채 끌려온 조선인들이 해저 1,000 미터 깊이의 막장 속에서<br> 매일 가스 폭발의 위험을 감수하며 노역해야 하는 군함도.<br> 강옥은 어떻게 하든 일본인 관리의 비위를 맞춰 딸 소희만이라도 지키기 위해 온갖 수를 다하고,<br> 칠성과 말년은 각자의 방식으로 고통스런 하루하루를 견뎌낸다.<br> 한편 전쟁이 막바지로 치닫자 광복군 소속 OSS 요원 ‘무영’(송중기)은<br> 독립운동의 주요인사 구출 작전을 지시 받고 군함도에 잠입한다.<br> 일본 전역에 미국의 폭격이 시작되고 일본의 패색이 짙어지자<br> 일본은 군함도에서 조선인에게 저지른 모든 만행을 은폐하기 위해 조선인들을 갱도에 가둔 채 폭파하려고 한다.<br> 이를 눈치 챈 무영은, 강옥, 칠성, 말년을 비롯한 조선인 모두와 군함도를 빠져나가기로 결심하는데...!<br> 지옥섬 군함도, 조선인들의 목숨을 건 탈출이 시작된다!<br> </div> </div>
<div class="m3"> <h2>영화제목</h2> 슈퍼배드3 <h2>영화이미지</h2> <div class="one"> <img class="aaa" src="image/3_1.jpg"> <img class="aaa" src="image/3_2.jpg"> <img class="aaa" src="image/3_3.jpg"> <img class="aaa" src="image/3_1.jpg"> <img class="aaa" src="image/3_2.jpg"> <img class="aaa" src="image/3_3.jpg"> <img class="aaa" src="image/3_1.jpg"> <img class="aaa" src="image/3_2.jpg"> <img class="aaa" src="image/3_3.jpg"> </div> <h2>영화줄거리</h2> <div class="story"> 전 세계를 점령할 놈들이 온다!<br> 최고의 악당만을 보스로 섬기는 ‘미니언’<br> 가족을 위해 악당 은퇴를 선언한 ‘그루’<br> 그루의 배신에 실망한 미니언들은<br> 스스로 악당이 되기 위해 그루를 떠난다.<br> 한편, 같은 얼굴 다른 스펙의 쌍둥이 동생 ‘드루’의 등장으로 인해<br> 그루는 자신이 역사상 가장 위대한 악당 가문의 후예임을 알게 되고,<br> 거부할 수 없는 슈퍼배드의 운명을 따르게 되는데…<br> 돌아온 그루와 미니언들은<br> 다시 함께할 수 있을까?<br> </div> </div>
<div class="m4"> <h2>영화제목</h2> 명탐정코난:진흥의 연가 <h2>영화이미지</h2> <div class="one"> <img class="aaa" src="image/4_1.jpg"> <img class="aaa" src="image/4_2.jpg"> <img class="aaa" src="image/4_3.jpg"> <img class="aaa" src="image/4_1.jpg"> <img class="aaa" src="image/4_2.jpg"> <img class="aaa" src="image/4_3.jpg"> <img class="aaa" src="image/4_1.jpg"> <img class="aaa" src="image/4_2.jpg"> <img class="aaa" src="image/4_3.jpg"> </div> <h2>영화줄거리</h2> <div class="story"> 오사카와 교토에서 발생한 의문의 사건들!<br> 헤이지와 카즈하, 그리고 모미지의 운명은 과연?!<br> 갑작스러운 폭발로 대혼란에 빠지고 만 오사카의 한 TV 방송국.<br> 마치 테러와도 같은 사건. 하지만 범인의 정체는 물론 범행 목적조차 파악되지 않는 상황이 계속되고,<br> 혼란 속에서 코난과 친구들은 헤이지의 약혼자임을 주장하며 당돌하게 대시하는 카루타(일본의 전통 카드 게임)<br> 대회 고교 챔피언 오오카 모미지를 만나 더욱 당황한다.<br> 한편, 방송국 폭발과 동시에 교토에서는 카루타 대회 2년 연속 우승자가 살해당하는 사건이 발생하고,<br> 현장의 TV에서는 다름 아닌 모미지의 경기 모습과 함께 한편의 시가 고요히 울려 퍼지고 있었는데......<br> </div> </div>
<div class="m5"> <h2>영화제목</h2> 덩케르트 <h2>영화이미지</h2> <div class="one"> <img class="aaa" src="image/5_1.jpg"> <img class="aaa" src="image/5_2.jpg"> <img class="aaa" src="image/5_3.jpg"> <img class="aaa" src="image/5_1.jpg"> <img class="aaa" src="image/5_2.jpg"> <img class="aaa" src="image/5_3.jpg"> <img class="aaa" src="image/5_1.jpg"> <img class="aaa" src="image/5_2.jpg"> <img class="aaa" src="image/5_3.jpg"> </div> <h2>영화줄거리</h2> <div class="story"> "우린 끝까지 싸울 것이다" 살아남는 것이 승리다! 해변: 보이지 않는 적에게 포위된 채 어디서 총알이 날아올지 모르는 위기의 일주일<br> 바다: 군인들의 탈출을 돕기 위해 배를 몰고 덩케르크로 항해하는 하루<br> 하늘: 적의 전투기를 공격해 추락시키는 임무, 남은 연료로 비행이 가능한 한 시간<br> “우리는 해변에서 싸울 것이다. 우리는 상륙지에서 싸울 것이다. 우리는 들판에서 싸우고 시가에서도 싸울 것이다. 우리는 끝까지 싸울 것이다”<br> </div>
</div> </div> </body> </html> |
summary.pptx
hw_0804.zip