dev 130

[JS] 이미지 리사이즈 스크립트

목적 : 부모 div박스안에 이미지를 비율에 맞게 컨트롤 한다.유용한게 쓰던 스크립트는 오늘 새로 손을 보았다. int_resizeimage2=0;resizeimage2 = function(obj,boxsize_w,boxsize_h,outsize_w,outsize_h,isFill,longpic_proc,callback) {var ratio=0,box_ratio=0,target_w,target_h,$parent = $(obj).parents('div');if(typeof(isFill)=="undefined") isFill=false;//default valuetry{if(boxsize_w=="auto") boxsize_w=$parent.width();boxsize_h = boxsize_h || boxsiz..

dev/web 2014.07.13

ajax 호출시 응답 데이터타잎에 대해..

자바스크립트의 디자인 패턴에 대한 고민이 생겼다. 일단, jQuery의 사용이 일반화되어서 인지, native code에 대한 고민은 사라졌지만, 디자인패턴은 항상 날 괴롭힌다. 자바스크립트도 알수록 어렵다. 서버야 MVC패턴이 대세를 이루고, 공동작업 환경이라, 갖추어진 스펙을 따르겠지만, 작은 부분들에 대한 결정이 가끔은 머리를 아프게 한다. 이번에 다룰 것은 Ajax호출이다. 때때로, ajax콜은 필요이상의 서버부하를 일으키는 원이이지만, 대체적으로는 아주 좋은 환경을 제공한다. 필자는 무식하게 ajax콜을 선호한는 편이다. 단순히 view의 일부분을 동적으로 구현해야 한다면, 무조건 ajax콜을 한다. 그 무식한 이유는 코드양이 적어진다 것이다. 복붙해서 같은 내용이 들어가는 view를 생성할 생..

dev/web 2014.07.05

inline-block 여백 버그

일반적인 UL LI 리스트를 가로정렬시키려할때LI에 css로 display:inline-block스타일을 적용하였을때 발생한다. LI내부에 박스DIV를 만들면 쉽게 알 수 있다. example 하나 둘 셋 하나둘셋 해결책은 여러가지가 있으나, 근본적인 문제는li와 li 사이에 존재하는 줄바꿈 및 공백이 문제를 야기한다. 고로, 저 공백을 제거한다면 문제는 해결이 가능하다. 하나둘셋 하나둘셋 암튼, 알수 없는 공백으로 당황하지말고, 여백을 제거하면 끝!

dev/web 2014.06.25

팝업차단을 피하는 방법-네이버앱

일반적으로 팝업 차단이 팝업을 차단하는 방법은사용자의 동의없이 팝업을 띄우는(무분별한 팝업)을 막아주는기능이라, window.open으로 뜨는것들이 대부분이다.하지만, 호출의 주체가 사용자의 액션에 의한 것이면, 그것은 보통 문제없이 팝업을 띄워준다. 하지만 약간 애매한 부분이 있다.form을 새창으로 submit하는 경우다. 사용자의 액션이 없이도, 이 로직은 팝업차단을 회피하는 가장 편한 방법이다.하지만, 브라우져에 따라서, 이것을 막는 경우도 있고, 아닌 경우도 있다. 일례로 안드로이도 네이티브(기본) 브라우저는 form.submit()을 사용해서 팝업을 띄울수 있지만네이버앱은 그렇지가 않다. 팝업이 차단되었다는 메세지도 보이지 않는다. 지금 약간 황당한데, 네이버앱을 일반 인터넷으로 사용하는 사람..

dev/web 2014.04.07

inline-block를 활용한 가운데 정렬

ul li를 한줄로 만들기위해 float:left를 자주 사용했는데 이제 웹환경이 많이 좋아졌으니inline-block를 막 사용할 수 있다. 물론 약간의 hack*zoom:1;*display: inline; 따위는 적용 float:left인 li요소를 가진 부모 ul을 inline-block해도 가운데 정렬효과를 얻을 수 있으며그냥 li요소에 inline-block를 해도 가운데 정렬효과를 얻을 수 있다. item1 item1 그냥 두가지 방법이 있다

dev/web 2014.01.13

default width on mobile browser

웹사이트 개발시모바일은 염두 안 할 수가 없다!! 그런데 viewport라는걸 지정하지 않으면!! 모바일 브라우져는 확대/축소는 있지만 브라우져 윈도우 width값이 없기에 레이아웃을 깨지는 현상을 볼 수 있다. 필자는 width값이 980px로 고정되는 기이한 현상을 경험했는데 이는 모바일 브라우져의 default value viewport가 980px이란다. 적어도 모바일 크롬은 말이다. viewport를 지정하면 모든 문제는 해결된다. 이런식으로 지정을 할 텐데모바일용 웹이 아닌 상태로 모바일에서 잘보이게 하려면device-width말고, 직접 컨테이너 최대사이즈를 잘 지정하는것을 권장한다!! 980 width issue는 이것으로 해결!

dev/web 2014.01.06