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@.
한국민속촌( @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@.
'image area' 카테고리의 다른 글
image :area] css 적용을 해봤습니다. (0) | 2014.01.27 |
---|---|
CSS3 :animation] transition & keyframe.. (0) | 2014.01.25 |
imageResize] 한줄에 있는 이미지 높이를 하나로 맞춰봅니다. (0) | 2013.12.09 |
부분보기] 재능 결여자를 위한 그림 연습 5.. (0) | 2013.11.13 |
imageResize] 두개 이상의 이미지 크기 줄이기.. (0) | 2013.09.16 |