css:input] 한국민속촌 2014년 윷점 클릭으로 확대보기..

1)
한국민속촌( @koreanfolk ) 아씨의 윷점이 올라와서,
질러봤습니다.

별거 없어요.. 클릭하면 확대되는 버튼 넣어둔거죠.
(실행화면은 샘플 이미지 한참 아래에 있습니다..)

처음에는, random 함수를 넣을까..싶었는데요,
윷 던질 모습에 감당이 안되는 데다가,
페이지를 꼼꼼(?)히 보는 재미가 반감될 것 같아서, 그냥 냅뒀습니다.


*이미지출처* .. 윷점64괘를 공개하옵니다. < 한국민속촌 페이스북 페이지 

..

2)

<STYLE> td#table140116_back1 input { margin:1px 5px 5px 1px; padding:1px 1px 1px 1px; }
td#table140116_back1 input:focus { zoom:2; }
</STYLE>
<DIV style="POSITION: relative; BACKGROUND-COLOR: black; HEIGHT: 480px; OVERFLOW: auto" id=div140116_back0>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 0px">
<DIV style="BACKGROUND-IMAGE: url(https://t1.daumcdn.net/cfile/tistory/226A2E3552DA5CAE0B); BACKGROUND-REPEAT: no-repeat; HEIGHT: 480px; OVERFLOW: hidden">
<DIV style="FILTER: Alpha(opacity=80); BACKGROUND-COLOR: black; WIDTH: 960px; HEIGHT: 480px; OVERFLOW: hidden; opacity: 0.8"></DIV></DIV></DIV>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 0px">
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" heigiht="100%">
<TBODY>
<TR>
<TD id=table140116_back1 vAlign=top align=left;></TD></TR></TBODY></TABLE></DIV></DIV>
<SCRIPT>
(function(){
String.prototype.r=function() {
  var
    ar=arguments, arl=ar.length
    , ov=this
    , i
    ;
  for (i=0; i<arl; i+=2) {
    ov=ov.replace(ar[i], ar[i+1]);
    }
 
  return ov;
  }
var
  oe=document.getElementById('table140116_back1')
  , be=document.getElementById('div140116_back0')
  , bes=oe.style
  , lpo=[28, 257, 496, 725]
  , tpo
  , isrc='https://t1.daumcdn.net/cfile/tistory/226A2E3552DA5CAE0B'
  , i, ov=''
  ;
//  bes.backgroundImage='url({isrc})'.r(/{isrc}/, isrc);
for (i=0; i<4; i++) {
  tpo=159;
  for (j=0; j<16; j++) {
    w=(j%2?19:20);
ov+=('<input type=button style="background-image:url({isrc}); background-position:{llpo}px {ttpo}px; z-index:2; border:0; '
          +'clip:rect(0, 207, {iheight}, 0); width:207px; height:{iheight}px; overflow:hidden; " />').r(
          /{isrc}/, isrc, /{llpo}/, -lpo[i], /{ttpo}/, -tpo, /{cw}/, w, /{iheight}/g, w
      );
if (j%4==3) ov+='<'+'br/>';
    tpo+=w;
    }
ov+='<'+'br/>';
  }
  oe.innerHTML=ov;
}());
</SCRIPT>

-- 새 창에 샘플 보여주기.. --

..

3)

..

4)
가용 브라우져를 IE, chrome 까지 먼저 생각을 하고 <span 태그를 다루는 것으로 시작을 했죠.

첫번째 문제는, 
<div 태그 내에서 <span style:zoom 이 작동 안되는겁니다.

기존에도 <span 관련한 zoom 을 사용해왔는데, 왜 안될까..하다가,
position:absolute 가 빠졌어요.. 급한대로 <div 에 position:relative 등을 다시 적용해넣었습니다.

두번째 문제는,
:focus 가 chrome 에서 IE 와 다르게 작동된다는 것은 알고 있었지만,
모바일에서는 :focus 가 작동이 되는 Element 가 input 태그밖에 없겠더라구요.

.. 뭐, :hover 등을 쓰면 되긴 하지만,
가급적 모든 브라우져에서 쓸 수 있도록..하고 싶었거든요.

그래서, <span 대신 <input 을 적용해봤죠.
border:0 으로 적용하고, type=button 으로 지정하니 나름 쓸만(?)해지더라구요.

세번째 문제는,
<input 에 zoom 을 적용하니, IE 에서 가로확대가 잘 안되는 문제가 발생했습니다.
추적해보니, width:329px 까지는 확대가 안되다가, 330px 이상에서 갑자기 확대가 되버리더라구요.

이것저것 테스트해보다가,
마지막에는 <table <tr <td 로 마무리를 할 수 있었습니다.
.. div 하고 상생맞출 생각이 없었나봐요. 

네번째 문제는,
<style 태그..까지는 어떻게 어떻게 사용 가능할 것 같은데,
<input 태그이다보니, egloos 나 cyworld 에 올릴 자신이 없었어요.

= =;.. 결국.. 밀리다밀리다 tistory 까지 왔네요.
(소스공개랑 분리하고 싶었는데.. ㅜ.ㅜ..)

.. 마지막(?), 다섯번째 문제입니다.
= =.. 과연 이 페이지는, 안드로이드에서 작동 할까요..? (소스만 따로 추출해서 열지 않았을 때..)

- PC 버전으로 봐야하려나.. - 그래도 실패할 것 같은데..

..

wantHate killofki@.

http://pba.kr