김형규

<p>네 그렇게 해야할것같아요 감사합니다!</p>

모달창에 img를 링크시 가로가 넘쳐 스크롤이 생깁니다

<div style="background-color: #0f111a; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div style="color: #8f93a2;">html</div>
<div style="color: #8f93a2;">&nbsp;</div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"> <</span><span style="color: #f07178;">div</span> <span style="color: #c792ea; font-style: italic;">class</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">project-content</span><span style="color: #89ddff;">"></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">div</span> <span style="color: #c792ea; font-style: italic;">class</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">project-photo</span><span style="color: #89ddff;">"></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">a</span> <span style="color: #c792ea; font-style: italic;">href</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">link/orion/main/main.html</span><span style="color: #89ddff;">"</span> <span style="color: #c792ea; font-style: italic;">data-featherlight</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">iframe</span><span style="color: #89ddff;">"></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">img</span> <span style="color: #c792ea; font-style: italic;">src</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">images/project01-orion-mokup.png</span><span style="color: #89ddff;">"</span> <span style="color: #c792ea; font-style: italic;">alt</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">오리온</span><span style="color: #89ddff;">"></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"></</span><span style="color: #f07178;">a</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"></</span><span style="color: #f07178;">div</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">div</span> <span style="color: #c792ea; font-style: italic;">class</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">project-txt</span><span style="color: #89ddff;">"></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">h3</span><span style="color: #89ddff;">></span>오리온<span style="color: #89ddff;"></</span><span style="color: #f07178;">h3</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">p</span> <span style="color: #c792ea; font-style: italic;">class</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">project-txt01</span><span style="color: #89ddff;">"></span></div>
<div style="color: #8f93a2;">기존 홈페이지의 복잡한 메뉴구성과 메인, 서브페이지를 통일성있게 디자인하고</div>
<div style="color: #8f93a2;">프리미엄 브랜드와 제품을 소비자에게 소개하는 내용을 중점적으로 리뉴얼 하였습니다.</div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"></</span><span style="color: #f07178;">p</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">p</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">span</span><span style="color: #89ddff;">></span>제작 방식<span style="color: #89ddff;"></</span><span style="color: #f07178;">span</span><span style="color: #89ddff;">></span> : HTML5 / CSS / JQuery<span style="color: #89ddff;"><</span><span style="color: #f07178;">br</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">span</span><span style="color: #89ddff;">></span>제작 기간<span style="color: #89ddff;"></</span><span style="color: #f07178;">span</span><span style="color: #89ddff;">></span> : 14일<span style="color: #89ddff;"><</span><span style="color: #f07178;">br</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">span</span><span style="color: #89ddff;">></span>제작 참여율<span style="color: #89ddff;"></</span><span style="color: #f07178;">span</span><span style="color: #89ddff;">></span> : 팀프로젝트 (기획, 서브메뉴-제품소개, 고객센터 100% 제작)</div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"></</span><span style="color: #f07178;">p</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">div</span> <span style="color: #c792ea; font-style: italic;">class</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">project-btn</span><span style="color: #89ddff;">"></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">이부분이 버튼 부분이고 폴더에 있는 이미지와 사이트 링크를 모달로 사용한 부분입니다</span></div>
<div style="color: #8f93a2;"><span style="background-color: #34495e;"> <span style="color: #89ddff;"><</span><span style="color: #f07178;">a</span> <span style="color: #c792ea; font-style: italic;">href</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">link/orion/main/main.html</span><span style="color: #89ddff;">"</span> <span style="color: #c792ea; font-style: italic;">data-featherlight</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">iframe</span><span style="color: #89ddff;">"></span>WEB SITE<span style="color: #89ddff;"></</span><span style="color: #f07178;">a</span><span style="color: #89ddff;">></span></span></div>
<div style="color: #8f93a2;"><span style="background-color: #34495e;"> <span style="color: #89ddff;"><</span><span style="color: #f07178;">a</span> <span style="color: #c792ea; font-style: italic;">href</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">link/orion-conceptpage.png</span><span style="color: #89ddff;">"</span> <span style="color: #c792ea; font-style: italic;">data-featherlight</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">iframe</span><span style="color: #89ddff;">"></span>스타일 가이드<span style="color: #89ddff;"></</span><span style="color: #f07178;">a</span><span style="color: #89ddff;">></span></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"></</span><span style="color: #f07178;">div</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"></</span><span style="color: #f07178;">div</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;"></</span><span style="color: #f07178;">div</span><span style="color: #89ddff;">></span></div>
<div style="color: #8f93a2;">&nbsp;</div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">css</span></div>
<div>
<div style="line-height: 18px;">
<div style="color: #8f93a2;"><span style="color: #464b5d; font-style: italic;">/* ########## Project : featherlight ########## */</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff; font-style: italic;">.</span><span style="color: #ffcb6b; font-style: italic;">featherlight</span> <span style="color: #89ddff; font-style: italic;">.</span><span style="color: #ffcb6b; font-style: italic;">featherlight-content</span> <span style="color: #89ddff;">{</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">position</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">relative</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">width</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">100%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">height</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">100%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">text-align</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">left</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">vertical-align</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">middle</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">display</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">inline-block</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">overflow</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">auto</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">padding</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">0</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">border-bottom</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">25px</span> <span style="color: #f78c6c;">solid</span> <span style="color: #f78c6c;">transparent</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">margin-left</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">0%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">margin-right</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">0%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">max-height</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">100%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">background</span><span style="color: #89ddff;">:</span> <span style="color: #89ddff;">#fff;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">cursor</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">auto</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">white-space</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">normal</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">}</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff; font-style: italic;">.</span><span style="color: #ffcb6b; font-style: italic;">featherlight</span> <span style="color: #f07178;">iframe</span> <span style="color: #89ddff;">{</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">border</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">none</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">width</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">100%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">height</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">100%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">}</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff; font-style: italic;">.</span><span style="color: #ffcb6b; font-style: italic;">featherlight</span> <span style="color: #89ddff; font-style: italic;">.</span><span style="color: #ffcb6b; font-style: italic;">featherlight-close-icon</span> <span style="color: #89ddff;">{</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">position</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">absolute</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">z-index</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">9999</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">top</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">30px</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">right</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">50px</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">width</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">40px</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">height</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">40px</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">cursor</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">pointer</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">text-align</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">center</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">font-family</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">Arial</span><span style="color: #89ddff;">,</span> <span style="color: #f78c6c;">sans-serif</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">background-color</span><span style="color: #89ddff;">:</span> <span style="color: #89ddff;">#e9f900;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">color</span><span style="color: #89ddff;">:</span> <span style="color: #89ddff;">#003df3;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">border-radius</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">50%</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">border</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">none</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">padding</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">0</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">font-size</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">30px</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">}</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">------이부분이 선생님께서 해보라고 하신 부분입니다!-----</span></div>
<div><span style="color: #89ddff; font-style: italic;">.</span><span style="color: #ffcb6b; font-style: italic;">featherlight-content</span><span style="color: #8f93a2;"> </span><span style="color: #f07178;">iframe</span><span style="color: #8f93a2;"> img</span><span style="color: #8f93a2;"> </span><span style="color: #89ddff;">{</span></div>
<div style="color: #8f93a2;"><span style="color: #b2ccd6;">width</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">100%!important</span><span style="color: #89ddff;">;</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">}</span></div>
<div style="color: #8f93a2;">&nbsp;</div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">이미지파일이나 pdf파일을 바로 모달로 링크를 걸었고 </span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">혹시 다른방법이 있을까요?</span></div>
<div style="color: #8f93a2;"><span style="color: #89ddff;">빠른 답변 정말 감사드립니다!</span></div>
</div>
</div>
</div>

<p>답변 감사합니다</p>
<p>일단 그렇게 넣어봤는데 변화가 없습니다</p>
<p>a>img 를 넣은것이 아니고</p>
<div style="color: #8f93a2; background-color: #0f111a; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;"><span style="color: #89ddff;"><</span><span style="color: #f07178;">a</span> <span style="color: #c792ea; font-style: italic;">href</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">/link/orion-conceptpage.png</span><span style="color: #89ddff;">"</span> <span style="color: #c792ea; font-style: italic;">data-featherlight</span><span style="color: #89ddff;">="</span><span style="color: #c3e88d;">iframe</span><span style="color: #89ddff;">"></span>스타일 가이드<span style="color: #89ddff;"></</span><span style="color: #f07178;">a</span><span style="color: #89ddff;">></span></div>
<p>이런식으로 링크로 사용하였습니다</p>
<p>&nbsp;</p>