스크립트
실제 구동
<div data-inven-tabs="" data-inven-tab-selected="tab_01">
<div data-inven-tab-for="tab_01" style="display:table-cell;vertical-align:middle;width:20vw;border-color:Peru;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">a면</div>
<div data-inven-tab-for="tab_02" style="display:table-cell;vertical-align:middle;width:20vw;border-color:ForestGreen;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">b면</div>
<div data-inven-tab-for="tab_03" style="display:table-cell;vertical-align:middle;width:20vw;border-color:CornflowerBlue;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">c면</div>
<div data-inven-tab-for="tab_04" style="display:table-cell;vertical-align:middle;width:20vw;border-color:Khaki;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">d면</div>
<div data-inven-tab-for="tab_05" style="display:table-cell;vertical-align:middle;width:20vw;border-color:Gainsboro;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">e면</div>
<div style="clear: left;"></div>
<div data-inven-tab-for="tab_06" style="display:table-cell;vertical-align:middle;width:20vw;border-color:Black;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">f면</div>
<div data-inven-tab-for="tab_07" style="display:table-cell;vertical-align:middle;width:20vw;border-color:DarkBlue;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">g면</div>
<div data-inven-tab-for="tab_08" style="display:table-cell;vertical-align:middle;width:20vw;border-color:Indigo;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">h면</div>
<div data-inven-tab-for="tab_09" style="display:table-cell;vertical-align:middle;width:20vw;border-color:FireBrick;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">i면</div>
<div data-inven-tab-for="tab_10" style="display:table-cell;vertical-align:middle;width:20vw;border-color:DarkOrange;border-style:solid;border-width:5px 5px 0px 5px;text-align:center;padding:8px 0px 8px 0px;border-radius:8px 8px 0px 0px;"
data-inven-unselected-css="{'_SELF_':{'fontWeight':'normal'}}"
data-inven-selected-css="{'_SELF_':{'fontWeight':'bold'}}">j면</div>
<div style="clear: left;"></div>
<div style="padding: 0.4em; border: 5px solid Peru; max-width: 100vw;" data-inven-tab-id="tab_01">a면</div>
<div style="padding: 0.4em; border: 5px solid ForestGreen; max-width: 100vw;" data-inven-tab-id="tab_02">b면</div>
<div style="padding: 0.4em; border: 5px solid CornflowerBlue; max-width: 100vw;" data-inven-tab-id="tab_03">c면</div>
<div style="padding: 0.4em; border: 5px solid Khaki; max-width: 100vw;" data-inven-tab-id="tab_04">d면</div>
<div style="padding: 0.4em; border: 5px solid Gainsboro; max-width: 100vw;" data-inven-tab-id="tab_05">e면</div>
<div style="padding: 0.4em; border: 5px solid Black; max-width: 100vw;" data-inven-tab-id="tab_06">f면</div>
<div style="padding: 0.4em; border: 5px solid DarkBlue; max-width: 100vw;" data-inven-tab-id="tab_07">g면</div>
<div style="padding: 0.4em; border: 5px solid Indigo; max-width: 100vw;" data-inven-tab-id="tab_08">h면</div>
<div style="padding: 0.4em; border: 5px solid FireBrick; max-width: 100vw;" data-inven-tab-id="tab_09">i면</div>
<div style="padding: 0.4em; border: 5px solid DarkOrange; max-width: 100vw;" data-inven-tab-id="tab_10">j면</div>
</div>
a면
b면
c면
d면
e면
f면
g면
h면
i면
j면
a면
b면
c면
d면
e면
f면
g면
h면
i면
j면




상기 스크립트를 게시물에 활용하고자 합니다. 이하 질문입니다.


1. 스크립트로 게시물을 작성했을 때, 모바일에서는 아래 스크린샷과 같이 각 탭의 내용이 펼쳐집니다. 같은 스크립트를 인장에 넣고 모바일에서 확인해보면 정상적으로 보이더군요. 모바일 게시물에서도 정상적인 모습으로 보일 수 있게 만드는 방법이 있는지 궁금합니다.



2. 탭 버튼부 모서리를 둥글게 처리한 결과 윗줄과 아랫줄 사이에 흰색 틈이 생겼는데 이를 없애고 싶습니다. 아마 버튼 아랫줄을 윗줄쪽으로 약간 올리는 것으로 해결 가능할 듯 싶습니다.


3. 현재 스크립트 상으로는 게시물을 열었을 때 a면의 내용이 나오게 되어 있습니다만, 이를 별도의 내용(a~j면이 아닌)이 먼저 나오도록 만들고 싶습니다. 별도의 내용을 여는 탭 버튼을 만들지 않고도 그렇게 만들 수 있을까요?


4. a면부터 j면까지의 탭 내용부에는 5xn 형식의 표(또는 그와 비슷한 형식을 사용한 코드)를 만들어 넣으려고 합니다.
표 안의 내용 중 일부는 그 내용을 클릭했을 때, 아래와 같이 변할 수 있었으면 합니다. 가능한지요?



가장 위~중간 줄의 경우 클릭한 내용이 있는 줄과 아랫줄 사이가 벌어지며 그 사이에 관련 내용이 있는 줄이 나오고, 가장 아랫줄의 경우, 줄 아래에 관련 내용이 있는 줄이 생기는 방식입니다.