[문의] 인장 스크립트 관련 문의드립니다

카톡 프로필형 인장을 변형해서 인장을 만들던 중에 막히는 부분들이 있어 질문드립니다.

1. 버튼 위에 올렸을 때 나타나는 글자를 아래쪽으로 내리고 싶습니다.

글자만 띄우는 d-day쪽 버튼은 vertical-align을 bottom으로 바꿔서 적용했는데

추가적인 기능이 있는 마격쪽 버튼은 동일한 방법으로 적용이 안 되는군요.

마격쪽 버튼에도 동일하게 적용하는 방법을 알려주시면 좋겠습니다.

2. 버튼 바깥쪽에 있을 때 버튼이 반응합니다.

마격쪽 버튼의 둥글게 처리된 모서리 바깥쪽(원래 사각형에서 잘려나갔어야 할 부분)에 마우스를 올렸을 때 배경색이 나타납니다.

글자가 나타나거나 눌렀을 때 버튼이 활성화되지는 않습니다. 배경색만 나타납니다.

위의 글자 항목과 마찬가지로 d-day쪽 버튼에서는 문제가 없습니다.

혹시라도 수정하면서 뭔가 잘못됐나 했는데 인장 원본 게시글의 적용 예시에서도 똑같은 문제가 나타나더군요.

해결해보려 마격 버튼쪽 div style에 border-radius를 여기저기 넣어보았는데 해결하지 못했습니다.

보통은 크게 신경쓰이지 않는 부분입니다만 한 번 오작동하는 게 보이니 거슬려서요. 해결 방법을 알려주시면 좋겠습니다.

3. 버튼 위에 커서를 가져갔을 때 지정된 배경색 대신 다른 이미지가 나오게 하고 싶습니다.

버튼에 커서를 올리지 않고 있을 때의 이미지를 A라고 했을 때, 버튼에 커서를 올리면 A가 사라지면서 다른 이미지인 B가 나오고, 커서를 내렸을 때는 다시 A로 돌아올 수 있게 만들고 싶습니다.

여러 방법을 시도해 봤는데 커서를 올리는 순간 오류 메시지가 뜨거나, 커서를 올렸을 때 B가 나오지만 커서를 내려도 A가 다시 나오지 않거나, 커서를 올려놓고 있는 상황에서 두 이미지가 교차하며 깜박거리거나 하더군요.

정상적으로 적용할 수 있는 방법이 있다면 알려주십시오.

4. 지정된 폰트 외에 다른 웹폰트를 사용할 수 있는지 궁금합니다.

해당 인장 원본 코드를 보니 font-family로 제주 고딕이 설정되어 있더군요.

이 폰트를 원하는 다른 웹폰트로 수정할 수 있는지, 할 수 있다면 어떻게 할 수 있는지 궁금합니다.

참고용으로 현재 만들고 있는 인장 코드를 올려두겠습니다.

<!-- 상단 간격 --><div style="background: transparent; height: 218px;"></div>
<!-- 하단 버튼 --><div style="padding: 14px; text-align: center;">
<!-- 가입일--><div style="background: url(&quot;가입일 이미지 겉면&quot;); margin: 0px 5px 0px 0px; border-radius: 15px; width: 200px; height: 118px; overflow: hidden; display: inline-block;">
<div style="transition: 0.4s; width: 200px; height: 118px; color: transparent; vertical-align: bottom; display: table-cell;" 
data-inven-out-css="{'_SELF_': {'background-color': 'rgba(255,255,255,0)','color': 'transparent'}}" 
data-inven-over-css="{'_SELF_': {'background-color': 'rgba(255,255,255,0.5)','color': 'rgba(0,0,0,1)'}}">
<div style="padding: 5px; font">
<span style="font-size: 16px; font-weight: bold;">D + </span>
<span data-inven-dday="YYYY-MM-DD" style="font-size: 16px; font-weight: bold;"></span>
</div></div></div>
<!-- 마무리 일격 --><div style="background: url(&quot;마무리 일격 이미지 겉면&quot;); margin: 0px 0px 0px 5px; border-radius: 15px;  width: 200px; height: 118px; overflow: hidden; display: inline-block;">
<div style="transition: 0.4s; width: 200px; height: 118px; color: rgba(255, 255, 255, 0); vertical-align: bottom; display: table-cell;" 
data-inven-out-css="{'_SELF_': {'background-color': 'rgba(255,255,255,0)','color': 'transparent'}}" 
data-inven-over-css="{'_SELF_': {'background-color': 'rgba(255,255,255,0.5)','color': 'rgba(0,0,0,1)'}}">
<div data-inven-action="" data-inven-nick-default="닉네임 입력" style="border: 0px; padding: 0; margin: 0;">
<span data-inven-attr-for="input" style="display: none;"></span>
<span data-inven-attr-for="last-attack-all" style="background-color: rgba(255,255,255,0); width: 200px; height: 118px; color: rgba(0, 0, 0, 1); border-radius: 123px; padding: 0; margin: 0; transition: 0.4s; border: 0px; font-family: 'Jeju Gothic', sans-serif; font-size: 16px;" 
data-inven-text="마무리 일격" 
data-inven-over-css="{'_SELF_': {'color': 'rgba(0,0,0,1)'}}" 
data-inven-out-css="{'_SELF_': {'color': 'rgba(0,0,0,0)'}}"></span>
</div></div></div></div>

아래는 만들다가 궁금한 점이 생겨 문의드립니다.

5. data-inven 형식을 배울 수 있는 곳을 알려주십시오.

인장을 꾸미면서 여러가지 다른 기능들도 써 보고 싶다는 생각이 들었는데 찾아봐도 자세하게 적혀있는 곳이 없더군요.

그 외에도 많은 명령어를 data-inven 형식으로 처리하시는 것 같은데 어떠한 것들이 있는지, 각 형식이 어떻게 쓰이는 건지 적혀있는 곳을 찾지 못했습니다.

혹시 그런 게시물이 있다면 알려주십시오.

6. css에서 쓰이는 animation 기능을 어떻게 사용할 수 있는지 알려주십시오.

메인 페이지 상단에 있는 글들 중에 transition 기능 관련 글에서 animation 기능에 대해서 살짝 언급되어 있더군요.

그런데 인벤 스크립트에 적용하려면 어떤 식으로 해야하는지에 대한 내용을 찾지 못했습니다.

언급이 되어있는 것으로 보아 animation 기능을 사용할 수 있는 것 같은데, 어떤 식으로 사용할 수 있는지 알려주십시오.

또 transition 기능에 대한 자세한 설명이 있는 게시물이 있다면 같이 알려주시면 감사하겠습니다.

7. 어떤 기능을 쓸 수 있고 어떻게 쓰는지 배울 수 있는 곳을 알려주십시오.

html과 css에 대해서 잘 알지는 못합니다만 보통 인터넷을 검색해가며 해결하는데 인벤 스크립트는 특이성 때문에 자료를 찾기도 어렵고 css쪽 자료를 찾아도 그대로 접목할 수가 없더군요.

인벤 스크립트에서 어떤 기능을 쓸 수 있는지, 또한 그 스크립트를 사용하려면 어떤 식으로 코드를 짜야 하는지 배우기 쉽게 한 눈에 들어오도록 정리된 게시물이 있다면 알려주십시오.

또한 인터넷에서 css 자료를 찾아도 쉽게 접목해볼 수 있도록 css에서 쓰이는 명령어들 중에 어떤 것들을 인벤 스크립트에서 사용할 수 있는지, 사용하려면 어떻게 명령어를 변환/대체해야 하는지 정리된 게시물이 있다면 알려주시면 감사하겠습니다.

(참고로 인벤 스크립트 메인 페이지 상단에 있는 글들이나 공지글들은 모두 읽어 보았습니다)