|
2018-01-03 04:36
조회: 853
추천: 0
답변입니다.결론부터 말씀드리자면,
동일 태그 내에서 data-inven-id의 복수지정은 불가능합니다. 다른 속성과 마찬가지로 id가 여러번 서술된 경우, 한가지만 인식되네요. data-inven-id의 경우에는 먼저 쓰여진 id가 인식되는 듯합니다. <!-- BLOCKS --> <div style="display:inline-block; width:100px; height:100px; background:red; transition:0.3s;" data-inven-id="part1" data-inven-id="common"> </div> <div style="display:inline-block; width:100px; height:100px; background:blue; transition:0.3s;" data-inven-id="common" data-inven-id="part2"> </div> <!-- BUTTONS --> <div style="margin-top:10px; margin-left:20px;"> <div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:red; cursor:pointer;" data-inven-over-css="{'part1':{'background-color':'black'}}" data-inven-out-css="{'part1':{'background-color':'red'}}" data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}"> </div> <div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:blue; cursor:pointer;" data-inven-over-css="{'part2':{'background-color':'black'}}" data-inven-out-css="{'part2':{'background-color':'blue'}}" data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}"> </div> </div> 개별적으로 "part1", "part2" id를 지정했습니다. 보시는 바와 같이 첫 번째 블록에는 part1을 우선 지정하고 common을 지정하였으며 두 번째 블록에는 common을 우선 지정하고 part2를 지정하였습니다. 그 결과, 각각 part id에 대해 작동하는 over 및 out css는 part1가 먼저 지정된 첫 번째 블록에 작동하지만 part2가 나중에 지정된 두 번째 블록에는 작동하지 않습니다. 그리고 common id에 대해 작동하는 click css는 common이 먼저 지정된 두 번째 블록에 작동하지만 common이 나중에 지정된 첫 번째 블록에는 작동하지 않습니다. 즉, 첫 번째 블록의 id는 "part1" 으로, 두 번째 블록의 id는 "common" 으로 인식되네요. 각각 먼저 지정된 id를 해당 태그의 id로 인식합니다. <!-- BLOCKS --> <div style="transition:0.3s;" data-inven-id="common"> <div style="display:inline-block; width:100px; height:100px; background:red; transition:0.3s;" data-inven-id="part1"> </div> <div style="display:inline-block; width:100px; height:100px; background:blue; transition:0.3s;" data-inven-id="part2"> </div> </div> <!-- BUTTONS --> <div style="margin-top:10px; margin-left:20px;"> <div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:red; cursor:pointer;" data-inven-over-css="{'part1':{'background-color':'black'}}" data-inven-out-css="{'part1':{'background-color':'red'}}" data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}"> </div> <div style="display:inline-block; width:80px; height:80px; border-radius:50px; background:blue; cursor:pointer;" data-inven-over-css="{'part2':{'background-color':'black'}}" data-inven-out-css="{'part2':{'background-color':'blue'}}" data-inven-click-css="{'common':[{'opacity':'0'}, {'opacity':'1'}]}"> </div> </div> id의 중복 지정을 위해서는 상위 태그에 공통 id를 지정하는 수밖에 없는 듯합니다. 물론, 태그들이 인접해야 한다는 커다란 제약점이 있기에 class와 같은 사용은 힘들 것 같습니다. 개인적인 생각으로, 인벤 스크립트의 속성으로 data-inven-class라도 지원해주었으면 정말 좋겠네요. <div style="display:inline-block; width:100px; height:100px; background:red; transition:0.3s;" data-inven-class="common" data-inven-id="part1"> </div> <div style="display:inline-block; width:100px; height:100px; background:blue; transition:0.3s;" data-inven-class="common" data-inven-id="part2"> </div> 이런식으로 data-inven-id와 동등한 수준의 속성이라도 지원해준다면 편리할 것 같은데 해줄지는 미지수네요.. |
Want 

