<![CDATA[
<div class="figure-video" data-ke-type="video" data-video-url="https://kakaotv.daum.net/embed/player/cliplink/rv7lvvtveu8poibz38h80skrf@my?service=daum_cafe" data-video-host="kakaotv" data-video-play-service="daum_cafe" data-video-width="712" data-video-height="400" data-ke-style="alignLeft" data-video-thumbnail="https://thumb.kakaocdn.net/dna/kamp/source/rv7lvvtveu8poibz38h80skrf/thumbs/2.jpg?credential=TuMuFGKUIcirOSjFzOpncbomGFEIdZWK&expires=33328746663&signature=cn86zcynH6ojrhj93b8cvUDTFgg%3D&ts=1771837863" data-ke-mobile-mobileStyle="widthFull" data-video-origin-width="712" data-video-origin-height="400"><iframe src="https://kakaotv.daum.net/embed/player/cliplink/rv7lvvtveu8poibz38h80skrf@my?service=daum_cafe&ptoken=v2_078251e4a1f67b3a504595d84f924343f5eee53260e383c03acc1bdb0ffed963d452651f5abae6dabf7ab1c5d9f6e3f9ef2f1bb8f0cf1879b66c2a1d91" width="712" height="400" frameborder="0" scrolling="no" allowfullscreen="" allow="encrypted-media"></iframe><div class="figcaption"></div></div><p><span style="color: #010101;"><</span><span style="color: #066de2;">%@</span> <span style="color: #0a9989;">page</span> <span style="color: #0a9989;">language</span>=<span style="color: #df5000;">"java"</span> <span style="color: #0a9989;">contentType</span>=<span style="color: #df5000;">"text/html; charset=UTF-8"</span> <span style="color: #0a9989;">pageEncoding</span>=<span style="color: #df5000;">"UTF-8"</span><span style="color: #0a9989;">%</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">!DOCTYPE</span> <span style="color: #0a9989;">html</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">html</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">head</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">meta</span> <span style="color: #0a9989;">charset</span>=<span style="color: #df5000;">"UTF-8"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">meta</span> <span style="color: #0a9989;">name</span>=<span style="color: #df5000;">"viewport"</span> <span style="color: #0a9989;">content</span>=<span style="color: #df5000;">"width=device-width, initial-scale=1"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">title</span><span style="color: #010101;">></span>이미지 뷰어<span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">title</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">script</span> <span style="color: #0a9989;">src</span>=<span style="color: #df5000;">"<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" target="_top" class="ke-link">https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js</a>"</span><span style="color: #010101;">></span><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">script</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">link</span> <span style="color: #0a9989;">href</span>=<span style="color: #df5000;">"<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" target="_top" class="ke-link">https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css</a>"</span> <span style="color: #0a9989;">rel</span>=<span style="color: #df5000;">"stylesheet"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">script</span> <span style="color: #0a9989;">src</span>=<span style="color: #df5000;">"<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" target="_top" class="ke-link">https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js</a>"</span><span style="color: #010101;">></span><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">script</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">link</span> <span style="color: #0a9989;">href</span>=<span style="color: #df5000;">"<a href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap" target="_top" class="ke-link">https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap</a>"</span> <span style="color: #0a9989;">rel</span>=<span style="color: #df5000;">"stylesheet"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">style</span><span style="color: #010101;">></span></p><p><span style="color: #ff3399;"> * </span>{<span style="color: #0099cc;"> font-family</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 'DM Sans', sans-serif</span><span style="color: #ff3399;">;</span> }</p><p><span style="color: #ff3399;"> body </span>{<span style="color: #0099cc;"> background-color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #ffffff</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #1a1a1a</span><span style="color: #ff3399;">;</span> }</p><p><span style="color: #ff3399;"> .main-subject </span>{<span style="color: #0099cc;"> font-size</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.75rem</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> font-weight</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 500</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> letter-spacing</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.15em</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> text-transform</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> uppercase</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #999</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> margin-bottom</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 2rem</span><span style="color: #ff3399;">;</span> }</p><p><span style="color: #ff3399;"> .sub-tag </span>{<span style="color: #0099cc;"> font-size</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.7rem</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> font-weight</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 500</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> letter-spacing</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.12em</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> text-transform</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> uppercase</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #bbb</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> margin-bottom</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.5rem</span><span style="color: #ff3399;">;</span> }</p><p> </p><p><span style="color: #ff3399;"> .pick-dropdown </span>{</p><p><span style="color: #0099cc;"> appearance</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> none</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> -webkit-appearance</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> none</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> border</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 1px solid #e0e0e0</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> border-radius</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 6px</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> padding</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.55rem 2.2rem 0.55rem 0.9rem</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> font-size</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.875rem</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #333</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> background-color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #fff</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> background-image</span><span style="color: #ff3399;">:</span><span style="color: #0099cc;"> url("data</span><span style="color: #ff3399;">:</span><span style="color: #0099cc;">image/svg+xml,%3Csvg xmlns='http</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;">//www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> background-repeat</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> no-repeat</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> background-position</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> right 0.75rem center</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> cursor</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> pointer</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> transition</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> border-color 0.2s</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> min-width</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 200px</span><span style="color: #ff3399;">;</span></p><p>}</p><p> </p><p><span style="color: #ff3399;"> .thumb-container </span>{<span style="color: #0099cc;"> width</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 220px</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> height</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 500px</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> overflow-y</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> auto</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> border</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 1px solid #e0e0e0</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> border-radius</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 8px</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> padding</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 10px</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> background</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #fafafa</span><span style="color: #ff3399;">;</span> }</p><p><span style="color: #ff3399;"> .thumb-container img </span>{<span style="color: #0099cc;"> width</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 100%</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> border-radius</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 5px</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> margin-bottom</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 10px</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> cursor</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> pointer</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> display</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> block</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> transition</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.2s</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> border</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 2px solid transparent</span><span style="color: #ff3399;">;</span> }</p><p><span style="color: #ff3399;"> .thumb-container img</span><span style="color: #4da51b;">:hover </span>{<span style="color: #0099cc;"> opacity</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.85</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> transform</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> scale(1.02)</span><span style="color: #ff3399;">;</span> }</p><p><span style="color: #ff3399;"> .thumb-container img.active-item </span>{<span style="color: #0099cc;"> border-color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #1a1a1a</span><span style="color: #ff3399;">;</span> }</p><p> </p><p><span style="color: #ff3399;"> .vertical-line </span>{<span style="color: #0099cc;"> width</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 1px</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> background</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #ececec</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> margin</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0 3rem</span><span style="color: #ff3399;">;</span> }</p><p> </p><p><span style="color: #ff3399;"> .viewer-frame </span>{</p><p><span style="color: #0099cc;"> width</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 500px</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> height</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 500px</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> border</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 1px dashed #ddd</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> border-radius</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 12px</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> display</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> flex</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> align-items</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> center</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> justify-content</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> center</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> background</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #fafafa</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> overflow</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> hidden</span><span style="color: #ff3399;">;</span></p><p>}</p><p><span style="color: #ff3399;"> .viewer-frame .info-text </span>{<span style="color: #0099cc;"> font-size</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 0.8rem</span><span style="color: #ff3399;">;</span><span style="color: #0099cc;"> color</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> #ccc</span><span style="color: #ff3399;">;</span> }</p><p><span style="color: #ff3399;"> #mainView </span>{</p><p><span style="color: #0099cc;"> width</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 100%</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> height</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 100%</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> object-fit</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> contain</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> border-radius</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> 11px</span><span style="color: #ff3399;">;</span></p><p><span style="color: #0099cc;"> display</span><span style="color: #ff3399;">:</span><span style="color: #0066cc;"> none</span><span style="color: #ff3399;">;</span></p><p>}</p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">style</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">head</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">body</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"container py-5"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">p</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"main-subject"</span><span style="color: #010101;">></span>이미지 뷰어<span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">p</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"d-flex align-items-start justify-content-center"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">p</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"sub-tag"</span><span style="color: #010101;">></span>옵션 선택<span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">p</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">select</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"pick-dropdown"</span> <span style="color: #0a9989;">xxonchange</span>=<span style="color: #df5000;">"displayImage(this)"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">option</span> <span style="color: #0a9989;">value</span>=<span style="color: #df5000;">""</span><span style="color: #010101;">></span>이미지 선택<span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">option</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">%</span></p><p><span style="color: #0a9989;">for(int</span> <span style="color: #0a9989;">j</span>=<span style="color: #0a9989;">11;</span> j<span style="color: #0a9989;"><</span>=<span style="color: #0a9989;">20;</span> <span style="color: #0a9989;">j++)</span> <span style="color: #0a9989;">{</span></p><p>out.println(<span style="color: #df5000;">"<option value='"</span>+request.getContextPath()+<span style="color: #df5000;">"/images/"</span>+j+<span style="color: #df5000;">".jpg'>"</span>+j+<span style="color: #df5000;">".jpg</option>"</span><span style="color: #0a9989;">);</span></p><p><span style="color: #0a9989;">}</span></p><p><span style="color: #0a9989;">%</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">select</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"mt-4"</span><span style="color: #010101;">></span><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">p</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"sub-tag"</span><span style="color: #010101;">></span>리스트 (스크롤)<span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">p</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"thumb-container"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">%</span></p><p><span style="color: #0a9989;">for(int</span> <span style="color: #0a9989;">j</span>=<span style="color: #0a9989;">11;</span> j<span style="color: #0a9989;"><</span>=<span style="color: #0a9989;">20;</span> <span style="color: #0a9989;">j++)</span> <span style="color: #0a9989;">{</span></p><p>out.println(<span style="color: #df5000;">"<img src='"</span>+request.getContextPath()+<span style="color: #df5000;">"/images/"</span>+j+<span style="color: #df5000;">".jpg' xxonclick="</span>+<span style="color: #df5000;">"displayImage(this)"</span>+<span style="color: #df5000;">">"</span><span style="color: #0a9989;">);</span></p><p><span style="color: #0a9989;">}</span></p><p><span style="color: #0a9989;">%</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p> </p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"vertical-line align-self-stretch"</span><span style="color: #010101;">></span><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p> </p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">p</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"sub-tag"</span><span style="color: #010101;">></span>크게 보기<span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">p</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">div</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"viewer-frame"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">span</span> <span style="color: #0a9989;">class</span>=<span style="color: #df5000;">"info-text"</span> <span style="color: #0a9989;">id</span>=<span style="color: #df5000;">"guideText"</span><span style="color: #010101;">></span>사진을 선택하면 크게 나타납니다.<span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">span</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #066de2;">img</span> <span style="color: #0a9989;">src</span>=<span style="color: #df5000;">""</span> <span style="color: #0a9989;">id</span>=<span style="color: #df5000;">"mainView"</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">div</span><span style="color: #010101;">></span></p><p> </p><p><span style="color: #010101;"><</span><span style="color: #066de2;">script</span><span style="color: #010101;">></span></p><p><span style="color: #63a35c;">'use strict'</span></p><p><span style="color: #a71d5d;">function</span> displayImage(target) {</p><p><span style="color: #a71d5d;">let</span> source <span style="color: #a71d5d;">=</span> target.src ? target.src : target.value;</p><p><span style="color: #a71d5d;">if</span> (source <span style="color: #a71d5d;">&</span><span style="color: #a71d5d;">&</span> source <span style="color: #a71d5d;">!</span><span style="color: #a71d5d;">=</span><span style="color: #a71d5d;">=</span> <span style="color: #63a35c;">""</span>) {</p><p><span style="color: #a71d5d;">const</span> viewElement <span style="color: #a71d5d;">=</span> <span style="color: #066de2;">document</span>.querySelector(<span style="color: #63a35c;">"#mainView"</span>);</p><p><span style="color: #a71d5d;">const</span> guideElement <span style="color: #a71d5d;">=</span> <span style="color: #066de2;">document</span>.querySelector(<span style="color: #63a35c;">"#guideText"</span>);</p><p> </p><p>viewElement.src <span style="color: #a71d5d;">=</span> source;</p><p>viewElement.style.display <span style="color: #a71d5d;">=</span> <span style="color: #63a35c;">"block"</span>;</p><p>guideElement.style.display <span style="color: #a71d5d;">=</span> <span style="color: #63a35c;">"none"</span>;</p><p> </p><p><span style="color: #066de2;">document</span>.querySelectorAll(<span style="color: #63a35c;">'.thumb-container img'</span>).forEach(unit <span style="color: #a71d5d;">=</span><span style="color: #a71d5d;">></span> unit.classList.remove(<span style="color: #63a35c;">'active-item'</span>));</p><p><span style="color: #a71d5d;">if</span> (target.tagName <span style="color: #a71d5d;">=</span><span style="color: #a71d5d;">=</span><span style="color: #a71d5d;">=</span> <span style="color: #63a35c;">'IMG'</span>) target.classList.add(<span style="color: #63a35c;">'active-item'</span>);</p><p>}</p><p>}</p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">script</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">body</span><span style="color: #010101;">></span></p><p><span style="color: #010101;"><</span><span style="color: #010101;">/</span><span style="color: #066de2;">html</span><span style="color: #010101;">></span></p>
<!-- -->
]]>
카페 게시글
조경민
2026.02.23 그림 과제
조경민
추천 0
조회 23
26.02.23 18:11
댓글 1
다음검색
첫댓글 콤보상자는 좋습니다.
아래쪽의 리스트를 레이어박스로 처리한부분도 수행되면 좋겠네요. 수고하셨습니다.