+ 2025-12-23 추가  

https://staging.d3uh7cdbgoqwh0.amplifyapp.com/
해당 링크를 통해서 인장을 조금 더 쉽게 만들 수 있습니다. (해킹 링크 아님)


댓글이나 쪽지로 인장 물어보는 사람 있어서 코드 공유함
쓸 사람만 가져다 쓰셈 이번에 만들었던게 트위터고, 이전에 쓰던게 인스타인데 둘 다 공유함

A. 트위터 (X) 디자인



1. 코드를 먼저 메모장으로 옮긴 뒤에 저 볼드에 빨간색으로 처리한 곳에 이미지 링크 넣거나 글 수정하면 됨
이게 뭔 개소린지 모르겠다면 일단 이 코드를 인장 html 쪽에 입력하는 곳으로 바로 옮겨본 뒤
미리보기 눌러보면 왜 입력해야하는지 알 거임

<!-- 먼저 보여주는 거 tab_1(게시글) / tab_2(답글) / tab_3(미디어) -->
<div data-inven-tabs="" data-inven-tab-selected="tab_1" style="font-family:'Malgun Gothic',Dotum,sans-serif;-webkit-text-size-adjust:100%;">
<!-- 헤더 이미지 -->
<div style="width:700px;border:1px solid #dbdbdb;border-radius:10px;margin:15px auto;overflow:hidden;background-color:white;">
<div>
<div style="height:233px;background-image:url('헤더 이미지 주소');background-size:cover;background-position:top;"></div>
</div>
<div style="padding:20px 25px;">

<!-- 프로필 이미지 -->
<div>
<div style="float:left;margin-top:-135px;position:relative;z-index:2;width:210px;height:210px;border-radius:50%;border:6px solid white;background-image:url('프로필 이미지 주소');background-size:cover;background-position:center;"></div>
<div style="float:right;margin-top:15px;position:relative;z-index:3;">
<div style="display:flex;align-items:center;gap:8px;float:right;">
<div data-inven-toggle="more-options-menu" style="width:50px;height:50px;border-radius:50%;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold;cursor:pointer;line-height:1;">…</div>
<a href="http://www.inven.co.kr/member/note/?act=write&rurl=_close" target="_BLANK" style="text-decoration:none;width:50px;height:50px;border-radius:50%;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#555555"><path d="M1.998 5.5c0-1.381 1.119-2.5 2.5-2.5h15c1.381 0 2.5 1.119 2.5 2.5v13c0 1.381-1.119 2.5-2.5 2.5h-15c-1.381 0-2.5-1.119-2.5-2.5v-13zm2.5-.5c-.276 0-.5.224-.5.5v2.764l8 3.638 8-3.636V5.5c0-.276-.224-.5-.5-.5h-15zm15.5 5.463l-8 3.636-8-3.638V18.5c0 .276.224.5.5.5h15c.276 0 .5-.224.5-.5v-8.037z"></path></svg></a>
<a href="http://imart.inven.co.kr/attendance/" target="_BLANK" style="text-decoration:none;padding:14px 28px;background-color:black;color:white;font-weight:bold;border-radius:30px;font-size:18px;">팔로우</a>
</div>
<div data-inven-id="more-options-menu" style="display:none;position:absolute;top:55px;right:0;width:300px;background-color:white;border:1px solid #ddd;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.1);padding:8px 0;">

<!-- 더보기 드롭다운에서 링크 이동하는 버튼들 수정하고 싶으면 여기서 하삼 -->
<a href="https://lostark.inven.co.kr/" target="_BLANK" data-inven-over-css="{'_SELF_':{'backgroundColor':'#F5F5F5'}}" data-inven-out-css="{'_SELF_':{'backgroundColor':'white'}}" style="display:block;padding:12px 20px;color:black;text-decoration:none;font-size:15px;"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#555555" style="margin-right:12px;vertical-align:middle;"><path d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"></path></svg>로스트아크 인벤으로 이동</a>
<!-- 더보기 드롭다운에서 링크 이동하는 버튼들 수정하고 싶으면 여기서 하삼 -->
<a href="https://maple.inven.co.kr/" target="_BLANK" data-inven-over-css="{'_SELF_':{'backgroundColor':'#F5F5F5'}}" data-inven-out-css="{'_SELF_':{'backgroundColor':'white'}}" style="display:block;padding:12px 20px;color:black;text-decoration:none;font-size:15px;"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#555555" style="margin-right:12px;vertical-align:middle;"><path d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"></path></svg>메이플스토리 인벤으로 이동</a>
<a href="https://www.inven.co.kr/member/inventory/myblock_write.php" target="_BLANK" data-inven-over-css="{'_SELF_':{'backgroundColor':'#F5F5F5'}}" data-inven-out-css="{'_SELF_':{'backgroundColor':'white'}}" style="display:block;padding:12px 20px;color:black;text-decoration:none;font-size:15px;"><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#555555" style="margin-right:12px;vertical-align:middle;"><path d="M12 3.75c-4.55 0-8.25 3.69-8.25 8.25 0 1.92.66 3.68 1.75 5.08L17.09 5.5C15.68 4.4 13.92 3.75 12 3.75zm6.5 3.17L6.92 18.5c1.4 1.1 3.16 1.75 5.08 1.75 4.56 0 8.25-3.69 8.25-8.25 0-1.92-.65-3.68-1.75-5.08zM1.75 12C1.75 6.34 6.34 1.75 12 1.75S22.25 6.34 22.25 12 17.66 22.25 12 22.25 1.75 17.66 1.75 12z"></path></svg>@차단하기</a>
</div>
</div>
</div>

<!-- 프로필 설정-->
<div style="clear:both;"></div>
<div style="margin-top:20px;">
<div style="font-size:30px;font-weight:bold;margin-bottom:5px;">닉네임 입력<img src="https://upload3.inven.co.kr/upload/2020/12/27/bbs/i15718366985.png?MW=800" style="width:26px;margin-left:8px;vertical-align:middle;"></div>
<div style="font-size:17px;color:#555;margin-bottom:15px;">@아이디 입력</div>
<div style="font-size:18px;line-height:1.6;margin-bottom:15px;">자기 소개 1번째 줄<br>자기 소개 2번째 줄</div>
<div style="display:flex;gap:25px;font-size:17px;">
<div><span style="font-weight:bold;">팔로우 숫자 입력</span> <span style="color:#555;">팔로우 중</span></div>
<div><span style="font-weight:bold;">팔로워 숫자 입력</span> <span style="color:#555;">팔로워</span></div>
</div>
</div>
</div>
<div style="border-top:1px solid #dbdbdb;">
<div style="display:flex;justify-content:space-around;border-bottom:1px solid #eee;">
<div data-inven-tab-for="tab_1" data-inven-selected-css="{'tab_text_1':{'color':'black','borderBottom':'4px solid #1DA1F2'}}" data-inven-unselected-css="{'tab_text_1':{'color':'#555','borderBottom':'4px solid transparent'}}" data-inven-over-css="{'_SELF_':{'backgroundColor':'#F5F5F5'}}" data-inven-out-css="{'_SELF_':{'backgroundColor':'white'}}" style="flex-grow:1;text-align:center;cursor:pointer;transition:background-color 0.4s ease;"><span data-inven-id="tab_text_1" style="display:inline-block;padding:15px 0;width:50%;font-size:17px;font-weight:bold;color:#555;border-bottom:4px solid transparent;transition:all 0.4s ease;">게시물</span></div>
<div data-inven-tab-for="tab_2" data-inven-selected-css="{'tab_text_2':{'color':'black','borderBottom':'4px solid #1DA1F2'}}" data-inven-unselected-css="{'tab_text_2':{'color':'#555','borderBottom':'4px solid transparent'}}" data-inven-over-css="{'_SELF_':{'backgroundColor':'#F5F5F5'}}" data-inven-out-css="{'_SELF_':{'backgroundColor':'white'}}" style="flex-grow:1;text-align:center;cursor:pointer;transition:background-color 0.4s ease;"><span data-inven-id="tab_text_2" style="display:inline-block;padding:15px 0;width:50%;font-size:17px;font-weight:bold;color:#555;border-bottom:4px solid transparent;transition:all 0.4s ease;">답글</span></div>
<div data-inven-tab-for="tab_3" data-inven-selected-css="{'tab_text_3':{'color':'black','borderBottom':'4px solid #1DA1F2'}}" data-inven-unselected-css="{'tab_text_3':{'color':'#555','borderBottom':'4px solid transparent'}}" data-inven-over-css="{'_SELF_':{'backgroundColor':'#F5F5F5'}}" data-inven-out-css="{'_SELF_':{'backgroundColor':'white'}}" style="flex-grow:1;text-align:center;cursor:pointer;transition:background-color 0.4s ease;"><span data-inven-id="tab_text_3" style="display:inline-block;padding:15px 0;width:50%;font-size:17px;font-weight:bold;color:#555;border-bottom:4px solid transparent;transition:all 0.4s ease;">미디어</span></div>
</div>
<div>
<!-- 게시물 부분 수정-->
<div data-inven-tab-id="tab_1">
<div style="border-bottom:1px solid #eee;">
<div style="padding:20px;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;">
<div style="display:flex;align-items:center;gap:15px;"><img src="프로필 이미지 링크 입력" style="width:50px;height:50px;border-radius:50%;"><div><span style="font-weight:bold;color:black;font-size:17px;">닉네임 입력</span><img src="https://upload3.inven.co.kr/upload/2020/12/27/bbs/i15718366985.png?MW=800" style="width:17px;height:17px;vertical-align:middle;margin-left:5px;"><br><span style="font-size:16px;color:#555;">@아이디 입력 · 10월 18일</span></div></div>
<div style="display:flex;align-items:center;gap:15px;"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 33 32" width="24px" fill="#555555"><path d="M12.745 20.54l10.97-8.19c.539-.4 1.307-.244 1.564.38 1.349 3.288.746 7.241-1.938 9.955-2.683 2.714-6.417 3.31-9.83 1.954l-3.728 1.745c5.347 3.697 11.84 2.782 15.898-1.324 3.219-3.255 4.216-7.692 3.284-11.693l.008.009c-1.351-5.878.332-8.227 3.782-13.031L33 0l-4.54 4.59v-.014L12.743 20.544m-2.263 1.987c-3.837-3.707-3.175-9.446.1-12.755 2.42-2.449 6.388-3.448 9.852-1.979l3.72-1.737c-.67-.49-1.53-1.017-2.515-1.387-4.455-1.854-9.789-.931-13.41 2.728-3.483 3.523-4.579 8.94-2.697 13.561 1.405 3.454-.899 5.898-3.22 8.364C1.49 30.2.666 31.074 0 32l10.478-9.466z"></path></svg><div style="font-size:24px;font-weight:bold;color:#555;cursor:pointer;">···</div></div>
</div>
<div style="margin-bottom:15px;font-size:17px;line-height:1.6;"><span style="color:#1DA1F2;">#게시글 태그 입력</span><br>게시글 내용 입력</div>
<div><img src="본문 이미지 링크 입력(없어도 됨 없애고 싶으면 빨간 글씨 부분만 지우고 공백으로 냅두셈)" style="border-radius:15px;border:1px solid #ddd;"></div>
<div style="display:flex;justify-content:space-around;margin-top:15px;color:#555;font-size:15px;"><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>18</div><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"></path></svg>659</div><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>4.4천</div><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path></svg>6.6만</div><div><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M12 3l-1.45 1.45L7 8h3v8h4V8h3l-3.55-5.55L12 3zM5 20h14a1 1 0 001-1V11h-3v7H7v-7H4v8a1 1 0 001 1z"></path></svg></div></div>
</div>
</div>
</div>

<!-- 답글 부분 수정-->
<div data-inven-tab-id="tab_2">
<div style="border-bottom:1px solid #eee;">
<div style="padding:20px;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;">
<div style="display:flex;align-items:center;gap:15px;"><img src="프로필 이미지 링크 입력" style="width:50px;height:50px;border-radius:50%;"><div><span style="font-weight:bold;color:black;font-size:17px;">닉네임 입력</span><img src="https://upload3.inven.co.kr/upload/2020/12/27/bbs/i15718366985.png?MW=800" style="width:17px;height:17px;vertical-align:middle;margin-left:5px;"><br><span style="font-size:16px;color:#555;">@아이디 입력 · 10월 18일</span></div></div>
<div style="display:flex;align-items:center;gap:15px;"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 33 32" width="24px" fill="#555555"><path d="M12.745 20.54l10.97-8.19c.539-.4 1.307-.244 1.564.38 1.349 3.288.746 7.241-1.938 9.955-2.683 2.714-6.417 3.31-9.83 1.954l-3.728 1.745c5.347 3.697 11.84 2.782 15.898-1.324 3.219-3.255 4.216-7.692 3.284-11.693l.008.009c-1.351-5.878.332-8.227 3.782-13.031L33 0l-4.54 4.59v-.014L12.743 20.544m-2.263 1.987c-3.837-3.707-3.175-9.446.1-12.755 2.42-2.449 6.388-3.448 9.852-1.979l3.72-1.737c-.67-.49-1.53-1.017-2.515-1.387-4.455-1.854-9.789-.931-13.41 2.728-3.483 3.523-4.579 8.94-2.697 13.561 1.405 3.454-.899 5.898-3.22 8.364C1.49 30.2.666 31.074 0 32l10.478-9.466z"></path></svg><div style="font-size:24px;font-weight:bold;color:#555;cursor:pointer;">···</div></div>
</div>
<div style="margin-bottom:15px;font-size:17px;line-height:1.6;"><span style="color:#1DA1F2;">#게시글 태그 입력</span><br>게시글 내용 입력</div>
<div><img src="본문 이미지 링크 입력(없어도 됨 없애고 싶으면 빨간 글씨 부분만 지우고 공백으로 냅두셈)" style="border-radius:15px;border:1px solid #ddd;"></div>
<div style="display:flex;justify-content:space-around;margin-top:15px;color:#555;font-size:15px;"><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>18</div><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"></path></svg>659</div><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>4.4천</div><div style="display:flex;align-items:center;gap:8px;"><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path></svg>6.6만</div><div><svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 24 24" width="22px" fill="#555555"><path d="M12 3l-1.45 1.45L7 8h3v8h4V8h3l-3.55-5.55L12 3zM5 20h14a1 1 0 001-1V11h-3v7H7v-7H4v8a1 1 0 001 1z"></path></svg></div></div>
</div>
</div>
</div>
<div data-inven-tab-id="tab_3">
<div data-inven-id="thumbnail" style="position:relative;">

<!-- 갤러리 3x2 가 아니라 3x1로 바꾸고 싶으면 파란색 숫자를 1로 바꾸고 밑줄 친 코드 삭제하면 됨 -->
<div style="display:flex;justify-content:space-between;line-height:0;margin-top:3px;position:relative;z-index:2;">
<div data-inven-over-css="{'img1':{'transform':'scale(1.05)','pointerEvents':'none','zIndex':'10','boxShadow':'0px 2px 5px rgba(0,0,0,0.3)'}}" data-inven-out-css="{'img1':{'transform':'scale(1)','pointerEvents':'auto','zIndex':'1','boxShadow':'none'}}" style="width:228px;height:228px;margin-right:7px;" data-inven-hide="thumbnail" data-inven-show="pic1"></div>
<div data-inven-over-css="{'img2':{'transform':'scale(1.05)','pointerEvents':'none','zIndex':'10','boxShadow':'0px 2px 5px rgba(0,0,0,0.3)'}}" data-inven-out-css="{'img2':{'transform':'scale(1)','pointerEvents':'auto','zIndex':'1','boxShadow':'none'}}" style="width:228px;height:228px;margin-right:7px;" data-inven-hide="thumbnail" data-inven-show="pic2"></div>
<div data-inven-over-css="{'img3':{'transform':'scale(1.05)','pointerEvents':'none','zIndex':'10','boxShadow':'0px 2px 5px rgba(0,0,0,0.3)'}}" data-inven-out-css="{'img3':{'transform':'scale(1)','pointerEvents':'auto','zIndex':'1','boxShadow':'none'}}" style="width:228px;height:228px;" data-inven-hide="thumbnail" data-inven-show="pic3"></div>
</div>
<!-- 갤러리 3x2 가 아니라 3x1로 바꾸고 싶으면 밑에 밑줄 친 코드 삭제하면 됨 -->
<div style="display:flex;justify-content:space-between;line-height:0;margin-top:8px;position:relative;z-index:2;">
<div data-inven-over-css="{'img4':{'transform':'scale(1.05)','pointerEvents':'none','zIndex':'10','boxShadow':'0px 2px 5px rgba(0,0,0,0.3)'}}" data-inven-out-css="{'img4':{'transform':'scale(1)','pointerEvents':'auto','zIndex':'1','boxShadow':'none'}}" style="width:228px;height:228px;margin-right:7px;" data-inven-hide="thumbnail" data-inven-show="pic4"></div>
<div data-inven-over-css="{'img5':{'transform':'scale(1.05)','pointerEvents':'none','zIndex':'10','boxShadow':'0px 2px 5px rgba(0,0,0,0.3)'}}" data-inven-out-css="{'img5':{'transform':'scale(1)','pointerEvents':'auto','zIndex':'1','boxShadow':'none'}}" style="width:228px;height:228px;margin-right:7px;" data-inven-hide="thumbnail" data-inven-show="pic5"></div>
<div data-inven-over-css="{'img6':{'transform':'scale(1.05)','pointerEvents':'none','zIndex':'10','boxShadow':'0px 2px 5px rgba(0,0,0,0.3)'}}" data-inven-out-css="{'img6':{'transform':'scale(1)','pointerEvents':'auto','zIndex':'1','boxShadow':'none'}}" style="width:228px;height:228px;" data-inven-hide="thumbnail" data-inven-show="pic6"></div>
</div>
<!-- 갤러리 3x2 가 아니라 3x1로 바꾸고 싶으면 여기까지 코드 삭제하면 됨 -->
<div style="position:absolute;top:0;left:0;pointer-events:none;">
<div style="display:flex;justify-content:space-between;line-height:0;margin-top:3px;">

<!-- 갤러리 이미지 링크 -->
<div data-inven-id="img1" style="cursor:pointer;width:228px;height:228px;background-image:url('미디어 이미지 링크 입력 1');background-size:cover;background-position:center;transition:transform 0.3s ease;background-color:white;border-radius:8px;transform-origin:top left;position:relative;z-index:1;margin-right:7px;"></div>
<div data-inven-id="img2" style="cursor:pointer;width:228px;height:228px;background-image:url('미디어 이미지 링크 입력 2');background-size:cover;background-position:center;transition:transform 0.3s ease;background-color:white;border-radius:8px;transform-origin:top;position:relative;z-index:1;margin-right:7px;"></div>
<div data-inven-id="img3" style="cursor:pointer;width:228px;height:228px;background-image:url('미디어 이미지 링크 입력 3');background-size:cover;background-position:center;transition:transform 0.3s ease;background-color:white;border-radius:8px;transform-origin:top right;position:relative;z-index:1;"></div>
</div>
<!-- 갤러리 3x2 가 아니라 3x1로 바꾸고 싶으면 밑에 밑줄 친 코드 삭제하면 됨 -->
<div style="display:flex;justify-content:space-between;line-height:0;margin-top:8px;">
<div data-inven-id="img4" style="cursor:pointer;width:228px;height:228px;background-image:url('미디어 이미지 링크 입력4');background-size:cover;background-position:center;transition:transform 0.3s ease;background-color:white;border-radius:8px;transform-origin:bottom left;position:relative;z-index:1;margin-right:7px;"></div>
<div data-inven-id="img5" style="cursor:pointer;width:228px;height:228px;background-image:url('미디어 이미지 링크 입력 5');background-size:cover;background-position:center;transition:transform 0.3s ease;background-color:white;border-radius:8px;transform-origin:bottom;position:relative;z-index:1;margin-right:7px;"></div>
<div data-inven-id="img6" style="cursor:pointer;width:228px;height:228px;background-image:url('미디어 이미지 링크 입력 6');background-size:cover;background-position:center;transition:transform 0.3s ease;background-color:white;border-radius:8px;transform-origin:bottom right;position:relative;z-index:1;"></div>
<!-- 갤러리 3x2 가 아니라 3x1로 바꾸고 싶으면 여기까지 코드 삭제하면 됨 -->
</div>
</div>
</div>
<!-- 갤러리 이미지 링크 -->
<div data-inven-id="pic1" style="display:none;"><div data-inven-hide="pic1" data-inven-show="thumbnail" style="cursor:pointer;"><img src="미디어 이미지 링크 입력 1" style="width:100%;"></div></div>
<div data-inven-id="pic2" style="display:none;"><div data-inven-hide="pic2" data-inven-show="thumbnail" style="cursor:pointer;"><img src="미디어 이미지 링크 입력 2" style="width:100%;"></div></div>
<div data-inven-id="pic3" style="display:none;"><div data-inven-hide="pic3" data-inven-show="thumbnail" style="cursor:pointer;"><img src="미디어 이미지 링크 입력 3" style="width:100%;"></div></div>
<!-- 갤러리 3x2 가 아니라 3x1로 바꾸고 싶으면 밑에 밑줄 친 코드 삭제하면 됨 -->
<div data-inven-id="pic4" style="display:none;"><div data-inven-hide="pic4" data-inven-show="thumbnail" style="cursor:pointer;"><img src="미디어 이미지 링크 입력 4" style="width:100%;"></div></div>
<div data-inven-id="pic5" style="display:none;"><div data-inven-hide="pic5" data-inven-show="thumbnail" style="cursor:pointer;"><img src="미디어 이미지 링크 입력 5" style="width:100%;"></div></div>
<div data-inven-id="pic6" style="display:none;"><div data-inven-hide="pic6" data-inven-show="thumbnail" style="cursor:pointer;"><img src="미디어 이미지 링크 입력 6" style="width:100%;"></div></div>
<!-- 갤러리 3x2 가 아니라 3x1로 바꾸고 싶으면 여기까지 코드 삭제하면 됨 -->
</div>
</div>
</div>
</div>
</div>

2. 인벤토리 - 인장 꾸미는 곳 - html로 가서 복붙해서 옮기셈



B. 인스타 디자인




1. 코드를 먼저 메모장으로 옮긴 뒤에 저 볼드에 빨간색으로 처리한 곳에 이미지 링크 넣거나 글 수정하면 됨
이게 뭔 개소린지 모르겠다면 일단 이 코드를 인장 html 쪽에 입력하는 곳으로 바로 옮겨본 뒤
미리보기 눌러보면 왜 입력해야하는지 알 거임

<div style="font-family:'Malgun Gothic',Dotum,sans-serif;width:700px;margin:20px auto;background-color:#ffffff;border:1px solid #dbdbdb;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.05);">
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid #dbdbdb;position:relative;z-index:2;">
<img src="https://upload3.inven.co.kr/upload/2025/10/19/bbs/i1921140397.png" alt="Instagram" style="max-width: 100%; width: 130px; aspect-ratio: 965 / 250;" loading="lazy">
<div style="display:flex;align-items:center;gap:15px;position:relative;z-index:3;">
<a href="http://www.inven.co.kr/member/note/?act=write&rurl=_close&nick=본인 인벤 닉네임 입력" target="_BLANK" style="line-height:0;"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111" style="cursor:pointer;"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg></a>
</div>
</div>
<div data-inven-tabs="" data-inven-tab-selected="tab-home" style="display:flex;position:relative;z-index:1;">
<div style="flex-basis:240px;border-right:1px solid #dbdbdb;padding:25px 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;">
<div style="display:flex;align-items:center;gap:15px;">
<div style="flex-shrink:0;border-radius:50%;background-image:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);padding:2px;">

<!--- 프로필 사진 --->
<img src="프로필 사진 링크 입력" style="width:80px; height:80px; aspect-ratio: 1/1; border-radius:50%;object-fit:cover;display:block;border:3px solid white;box-sizing:border-box;background-color:white;">
</div>
<div>

<!--- 닉네임, 아이디---->
<div style="font-size:16px;font-weight:bold;color:#111;">아네임 입력</div>
<div style="font-size:16px;color:#555;">@아이디 입력</div>
</div>
</div>
<div style="font-size:15px;line-height:1.6;color:#333;">

<!--- 프로필 소개 메시지--->
소개말 입력<br>
<span style="color:#1DA1F2;">#태그 입력</span><br>
<!--- 이부분은 지워도 됨 사실은 오른쪽 상단 DM 버튼 누르면 보내짐 --->
<a href="http://www.inven.co.kr/member/note/?act=write&rurl=_close&nick=본인 인벤 닉네임으로 변경" target="_BLANK" style="color:#00376b;text-decoration:none;">DM 보내기</a>
</div>
<div style="display:flex;justify-content:space-between;font-size:15px;text-align:center;border-top:1px solid #efefef;border-bottom:1px solid #efefef;padding:10px 0;">

<!--- 팔로워 팔로잉수 바꾸고 싶으면 여기서 하셈 ---->
<div><b style="color:#111;">6</b><div style="color:#555;">Posts</div></div>
<div><b style="color:#111;">1.2k</b><div style="color:#555;">Followers</div></div>
<div><b style="color:#111;">345</b><div style="color:#555;">Following</div></div>
</div>
<div style="display:flex;overflow-x:auto;scrollbar-width:none;gap:15px;">

<!--- 프로필  소개 하단 부에 밑에 있는 메이플 / 로아 아이콘 고치고 싶으면 고치삼  --->
<!--- 바로 아래 있는 maple.inven.co.kr 링크는 누르면 원하는 링크로 이동하는 기믹  --->
<a href="https://maple.inven.co.kr/" target="_BLANK" style="flex-shrink:0;width:60px;text-align:center;text-decoration:none;">
<div style="width:54px;height:54px;border-radius:50%;margin:0 auto 5px;background-image:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);padding:2px;box-sizing:border-box;">
<!--- 바로 아래 있는 jpg는 프로필 이미지  --->
<img src="https://upload3.inven.co.kr/upload/2025/10/18/bbs/i1499092341.jpg" style="width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid white;box-sizing:border-box;background-color:white;">
</div>
<span style="font-size:12px;color:#555;">메이플</span>
</a>
<!--- 바로 아래 있는 maple.inven.co.kr 링크는 누르면 원하는 링크로 이동하는 기믹  --->
<a href="https://lostark.inven.co.kr/" target="_BLANK" style="flex-shrink:0;width:60px;text-align:center;text-decoration:none;">
<div style="width:54px;height:54px;border-radius:50%;margin:0 auto 5px;background-image:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);padding:2px;box-sizing:border-box;">
<!--- 바로 아래 있는 jpg는 프로필 이미지  --->
<img src="https://upload3.inven.co.kr/upload/2025/10/18/bbs/i1936744556.jpg" style="width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid white;box-sizing:border-box;background-color:white;">
</div>
<span style="font-size:12px;color:#555;">로아</span>
</a>
<div style="flex-shrink:0;width:60px;text-align:center;">
<div style="width:54px;height:54px;border-radius:50%;background-color:#efefef;border:1px dashed #ccc;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;"><span style="font-size:24px;color:#ccc;">+</span></div>
<span style="font-size:12px;color:#555;">New</span>
</div>
</div>
<div style="flex:1;display:flex;flex-direction:column;gap:15px;border-top:1px solid #efefef;padding-top:20px;">
<a data-inven-tab-for="tab-home" data-inven-selected-css="{'home-text':{'fontWeight':'bold','color':'#111'}}" data-inven-unselected-css="{'home-text':{'fontWeight':'normal','color':'#555'}}" style="display:flex;align-items:center;gap:10px;text-decoration:none;font-size:16px;color:#111;font-weight:bold;cursor:pointer;">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
<span data-inven-id="home-text">Home</span>
</a>
<a data-inven-tab-for="tab-grid" data-inven-selected-css="{'grid-text':{'fontWeight':'bold','color':'#111'}}" data-inven-unselected-css="{'grid-text':{'fontWeight':'normal','color':'#555'}}" style="display:flex;align-items:center;gap:10px;text-decoration:none;font-size:16px;color:#555;font-weight:normal;cursor:pointer;">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111"><path d="M4 4h4v4H4V4zm6 0h4v4h-4V4zm6 0h4v4h-4V4zM4 10h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4zM4 16h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4z"></path></svg>
<!--- 그리드가 아니라 피드나 갤러리로 바꾸고 싶으면 바꿔도 됨 --->
<span data-inven-id="grid-text">Grid</span>
</a>
</div>
</div>
<div style="flex:1;overflow-y:auto;background-color:#fafafa;">
<div data-inven-tab-id="tab-home" style="padding:20px 15px;height:500px;overflow-y:auto;">
<div style="background-color:#fff;border:1px solid #dbdbdb;border-radius:10px;margin-bottom:20px;">
<div style="display:flex;align-items:center;padding:10px 15px;">

<!--- 첫번째 게시물 --->
<img src="프로필 이미지 링크 입력" style="width:32px;height:32px;aspect-ratio: 1/1;border-radius:50%;margin-right:10px;">
<span style="font-weight:bold;color:#111;">@아이디 입력</span>
</div>
<img src="게시물에 넣을 이미지 링크 입력" style="width:100%;">
<div style="padding:15px;">
<div style="display:flex;gap:15px;margin-bottom:10px;">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111" style="cursor:pointer;"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111" style="cursor:pointer;"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>
</div>
<div style="font-weight:bold;font-size:14px;margin-bottom:5px;">741 likes</div>
<div style="font-size:14px;line-height:1.5;">
<b style="color:#111;">@아이디 입력</b> 게시물에 넣을 내용 입력
</div>
</div>
</div>

<!--- 두번째 게시물 --->
<div style="background-color:#fff;border:1px solid #dbdbdb;border-radius:10px;margin-bottom:20px;">
<div style="display:flex;align-items:center;padding:10px 15px;">
<img src="프로필 이미지 링크 입력" style="width:32px;height:32px; aspect-ratio: 1/1; border-radius:50%;margin-right:10px;">
<span style="font-weight:bold;color:#111;">@아이디 입력</span>
</div>
<img src="게시물에 넣을 이미지 링크 입력" style="width:100%;">
<div style="padding:15px;">
<div style="display:flex;gap:15px;margin-bottom:10px;">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111" style="cursor:pointer;"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111" style="cursor:pointer;"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>
</div>
<div style="font-weight:bold;font-size:14px;margin-bottom:5px;">1,234 likes</div>
<div style="font-size:14px;line-height:1.5;">
<b style="color:#111;">@아이디 입력</b> 게시물에 넣을 내용 입력
</div>
</div>
</div>

<!--- 세번째 게시물 --->
<div style="background-color:#fff;border:1px solid #dbdbdb;border-radius:10px;margin-bottom:20px;">
<div style="display:flex;align-items:center;padding:10px 15px;">
<img src="프로필 이미지 링크 입력" style="width:32px;height:32px; aspect-ratio: 1/1;  border-radius:50%;margin-right:10px;">
<span style="font-weight:bold;color:#111;">@아이디 입력</span>
</div>
<img src="게시물에 넣을 이미지 링크 입력" style="width:100%;">
<div style="padding:15px;">
<div style="display:flex;gap:15px;margin-bottom:10px;">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111" style="cursor:pointer;"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#111" style="cursor:pointer;"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>
</div>
<div style="font-weight:bold;font-size:14px;margin-bottom:5px;">567 likes</div>
<div style="font-size:14px;line-height:1.5;">
<b style="color:#111;">@아이디 입력</b> 게시물에 넣을 내용 입력
</div>
</div>
</div>
</div>

<div data-inven-tab-id="tab-grid" style="display:none;">
<div data-inven-id="grid-view" style="display:flex;flex-wrap:wrap;">
<!--- 피드(이미지) 수 더 늘리고 싶으면 밑에다가 파란색 코드 복붙해서 늘리삼 그리고 밑줄친 부분 숫자도 바꿔줘야함 --->
<a href="#" data-inven-toggle="grid-image-1,grid-view" style="flex-basis:calc(33.33% - 4px);height:190px;background-image:url('GRID(갤러리)에 넣을 이미지 링크 입력');background-size:cover;background-position:center;margin:2px;cursor:pointer;"></a>
<!--- 여기까지 복사하셈--->
<a href="#" data-inven-toggle="grid-image-2,grid-view" style="flex-basis:calc(33.33% - 4px);height:190px;background-image:url('GRID(갤러리)에 넣을 이미지 링크 입력');background-size:cover;background-position:center;margin:2px;cursor:pointer;"></a>
<a href="#" data-inven-toggle="grid-image-3,grid-view" style="flex-basis:calc(33.33% - 4px);height:190px;background-image:url('GRID(갤러리)에 넣을 이미지 링크 입력');background-size:cover;background-position:center;margin:2px;cursor:pointer;"></a>
<a href="#" data-inven-toggle="grid-image-4,grid-view" style="flex-basis:calc(33.33% - 4px);height:190px;background-image:url('GRID(갤러리)에 넣을 이미지 링크 입력');background-size:cover;background-position:center;margin:2px;cursor:pointer;"></a>
<a href="#" data-inven-toggle="grid-image-5,grid-view" style="flex-basis:calc(33.33% - 4px);height:190px;background-image:url('GRID(갤러리)에 넣을 이미지 링크 입력');background-size:cover;background-position:center;margin:2px;cursor:pointer;"></a>
<!--- 여기 사이에다가 복붙하셈 --->

<!--- 여기 사이에다가 복붙하셈 --->
</div>
<!--- 피드(이미지) 수 더 늘리고 싶으면 밑에다가 파란색 코드 복붙해서 늘리삼 그리고 밑줄친 부분 숫자도 바꿔줘야함 --->
<div data-inven-id="grid-image-1" style="display:none;background-color:#ffffff;padding:10px;">
<a href="#" data-inven-toggle="grid-image-1,grid-view" style="display:block;cursor:pointer;"><img src="GRID(갤러리)에 넣을 이미지 링크 입력" stㅌㅌyle="width:100%;display:block;"></a>
</div>
<!--- 여기까지 복사하셈--->
<div data-inven-id="grid-image-2" style="display:none;background-color:#ffffff;padding:10px;">
<a href="#" data-inven-toggle="grid-image-2,grid-view" style="display:block;cursor:pointer;"><img src="GRID(갤러리)에 넣을 이미지 링크 입력" style="width:100%;display:block;"></a>
</div>
<div data-inven-id="grid-image-3" style="display:none;background-color:#ffffff;padding:10px;">
<a href="#" data-inven-toggle="grid-image-3,grid-view" style="display:block;cursor:pointer;"><img src="GRID(갤러리)에 넣을 이미지 링크 입력" style="width:100%;display:block;"></a>
</div>
<div data-inven-id="grid-image-4" style="display:none;background-color:#ffffff;padding:10px;">
<a href="#" data-inven-toggle="grid-image-4,grid-view" style="display:block;cursor:pointer;"><img src="GRID(갤러리)에 넣을 이미지 링크 입력" style="width:100%;display:block;"></a>
</div>
<div data-inven-id="grid-image-5" style="display:none;background-color:#ffffff;padding:10px;">
<a href="#" data-inven-toggle="grid-image-5,grid-view" style="display:block;cursor:pointer;"><img src="GRID(갤러리)에 넣을 이미지 링크 입력" style="width:100%;display:block;"></a>
</div>
<!--- 여기 사이에다가 복붙하셈 --->

<!--- 여기 사이에다가 복붙하셈 --->
</div>
</div>
</div>

2. 인벤토리 - 인장 꾸미는 곳 - html로 가서 복붙해서 옮기셈



TIP 1. 이미지는 아래 게시판에 올린 뒤에
https://www.inven.co.kr/board/webzine/4730
게시물 작성한 뒤 이미지에 오른쪽 마우스 누르고 이미지 주소 복사하면 이미지 링크 만들 수 있음



TIP 2. 미리보기 했을 때는 정상인데 적용하고 나면 레이아웃이 염병난다면
그것은 띄어쓰기 나 들여쓰기를 했을 경우에 발생하는 문제임 줄 건너띔(엔터)는 괜찮음
띄어쓰기나 들여쓰기가 있을 경우에는 인벤 편집기에서 자동으로 &nbsp(대충 공백이라는 뜻)으로 바꿔버리니 조심
빨간색 볼드 처리 해놓은 입력 부분에는 띄어쓰기 사용해도 ㄱㅊ음

TIP 3. 메이플  / 로스트아크 / 검은사막 인장 스킨 같이 가로 사이즈가 긴 게임 프로필 전용 인장 스킨 혹은
25년도 이후로 출시한 인장 스킨으로 등록해야 호환됨 옛날 23년도 이전에 받은 인장 스킨들은 호환 안 돼요



예상 댓글 : 어쩌라고