인벤 스크립트에 관심을 가져주셔서 감사합니다.

소스 이해의 편의상 문의하신 순서와는 조금 다르게 답변 드리겠습니다.

2. 버튼 밑에 출력하기
토글 스크립트의 기능은 display(표시)를 none(안함)에서 block(표시함)으로 스타일을 바꿔주는 역할입니다. 위치를 이동시키기 위해서는 소스가 작성되어 있는 순서를 조정해 주시면 됩니다.

<!-- 버튼들 -->
<div data-inven-toggle="A"> A 버튼 </div>
<div data-inven-toggle="B"> B 버튼 </div>
<div data-inven-toggle="C"> C 버튼 </div>
<div data-inven-toggle="D"> D 버튼 </div>

<!-- 본문들-->
<div data-inven-id="A" style="display:none;">A 영역</div>
<div data-inven-id="B" style="display:none;">B 영역</div>
<div data-inven-id="C" style="display:none;">C 영역</div>
<div data-inven-id="D" style="display:none;">D 영역</div>


1. 한 줄에 표시 하기
<div> 태그는 항상 한줄을 차지하는 블록 스타일 태그입니다. 이 태그를 한줄에 표시하기 위해서는 이 블록 스타일을 한줄이 아닌 내용물에 따라서 범위가 결정되는 inline-block (라인 속 블록)으로 변경해 주어야 합니다.

<!-- 버튼들 -->
<div data-inven-toggle="A" style="display:inline-block;'"> A 버튼 </div>
<div data-inven-toggle="B" style="display:inline-block;'"> B 버튼 </div>
<div data-inven-toggle="C" style="display:inline-block;'"> C 버튼 </div>
<div data-inven-toggle="D" style="display:inline-block;'"> D 버튼 </div>

<!-- 본문들-->
<div data-inven-id="A" style="display:none;">A 영역</div>
<div data-inven-id="B" style="display:none;">B 영역</div>
<div data-inven-id="C" style="display:none;">C 영역</div>
<div data-inven-id="D" style="display:none;">D 영역</div>


기본적으로 inline-block 스타일을 가지고 있는 span 태그를 사용해서 간략화 할 수도 있습니다.

<!-- 버튼들 -->
<span data-inven-toggle="A"> A 버튼 </span>
<span data-inven-toggle="B"> B 버튼 </span>
<span data-inven-toggle="C"> C 버튼 </span>
<span data-inven-toggle="D"> D 버튼 </span>

<!-- 본문들-->
<div data-inven-id="A" style="display:none;">A 영역</div>
<div data-inven-id="B" style="display:none;">B 영역</div>
<div data-inven-id="C" style="display:none;">C 영역</div>
<div data-inven-id="D" style="display:none;">D 영역</div>

인벤 스크립트는 모든 종류의 태그 속에 삽입할 수 있습니다. 이는 이미지 또한 마찬가지며, 이미지는 기본 inline-block의 스타일을 가지고 있습니다.


<!-- 버튼들 -->
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13526443390.gif" border="0" style="width: 150px; height: 150px;" data-inven-toggle="A">
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13595476526.gif" border="0" style="width: 150px; height: 150px;" data-inven-toggle="B">
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13524963785.gif" border="0" style="width: 150px; height: 150px;" data-inven-toggle="C">
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13521935652.gif" border="0" style="width: 150px; height: 150px;" data-inven-toggle="D">

<!-- 본문들-->
<div data-inven-id="A" style="display:none;">A 영역</div>
<div data-inven-id="B" style="display:none;">B 영역</div>
<div data-inven-id="C" style="display:none;">C 영역</div>
<div data-inven-id="D" style="display:none;">D 영역</div>


+ 덕선수연혜리님의 인장은 toggle 기능이 아닌 탭 기능을 사용한 인장입니다. 탭 기능은 어디까지나 toggle 기능의 연장선입니다만, 복잡하게 중첩해서 써야하는 toggle을 단순화 했다고 보시면 편합니다.

가장 큰 차이는, 토글은 다른 토글을 열었을 때 기존 토글이 그대로 열려 있는 반면,
탭의 경우, 다른 탭을 열 경우 기존 탭이 닫힌다는 것이겠네요.

아래에는 올려주신 소스를 탭 소스로 전환한 샘플 소스를 전달 드립니다.

추가로 이미지 맵까지 사용하고 있어서, 3*3 이미지가 아닌 단일 이미지 입니다.
하지만 이건 보여지는 형태나 소스에 큰 차이는 없어서 참고할 수 있는 주소를 남겨드립니다.



<div data-inven-tabs data-inven-tab-selected="none">

<!-- 버튼들 -->
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13526443390.gif" border="0" style="width: 148px; height: 148px;" data-inven-tab-for="A">
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13595476526.gif" border="0" style="width: 148px; height: 148px;" data-inven-tab-for="B">
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13524963785.gif" border="0" style="width: 148px; height: 148px;" data-inven-tab-for="C">
<img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13521935652.gif" border="0" style="width: 148px; height: 148px;" data-inven-tab-for="D">

<!-- 본문들-->
<div data-inven-tab-id="A" style="display:none;"><img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13501473600.gif" border="0" style="width: 150px; height: 150px;"></div>
<div data-inven-tab-id="B" style="display:none;"><img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13595476526.gif" border="0" style="width: 150px; height: 150px;"></div>
<div data-inven-tab-id="C" style="display:none;"><img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13517254406.gif" border="0" style="width: 150px; height: 150px;"></div>
<div data-inven-tab-id="D" style="display:none;"><img src="http://upload2.inven.co.kr/upload/2018/11/14/bbs/i13553865879.gif" border="0" style="width: 150px; height: 150px;"></div>

</div>