웹 개발자들 같지도 않은 개발자는 퇴출시켜야 함 ㅠㅠ.

My/Story 2012/02/29 16:18
어느 분이 웹페이지 수정을 해야되어서, 나한테 부탁을 해왔다.
그래서 소스를 봤는데, 이건 뭐, 스타일시트가 전부 인라인속성으로 부여되어있다.....
버튼이나 이미지 등 ,, 반복되지 않고 어쩌다 하나씩 나오는건 인라인속성으로 부여할 수 있다. 물론, 나도 그러고 있고...
나도 급할때는 인라인속성으로 그냥 다 부여해버린다. 귀찮으니깐.
그런데 이건 뻔히 눈에 보이는건데.... 
목록 태그(li) 가 300 라인씩 내려가는데 전부 인라인속성으로 부여되어있다.. ㅠ.

왜 웹개발자가 스타일시트를 신경써야 되냐고 묻지는 말자.
여긴 한국이다 -_-.....
따로 코더를 둘만한 시장상황이 아니잖아..

 인라인속성으로 된걸 빼버리고 스타일시트로 처리해놓았다.
결과는 아래 화면에........ 

첫번째 사진이 수정전, 두번째 사진이 수정후


전송되는 사이즈가 거의 3배 넘게 차이가 나버리네 --. 
이런식으로 전송되는 사이즈가 차이나게 되면 트래픽도 당연히 덜 잡아먹는다. 

'My > Story' 카테고리의 다른 글

신원보증보험 다시 가입 ㅠ.ㅡ  (0) 2012/04/30
웹 개발자들 같지도 않은 개발자는 퇴출시켜야 함 ㅠㅠ.  (0) 2012/02/29
구글 애드센스 웨스트유니온 수익금 수령  (0) 2012/02/23
구글 애드센스 수익금 지급  (0) 2012/02/12
Posted by 알찬돌삐
TAG 웹개발자
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

구글 애드센스 웨스트유니온 수익금 수령

My/Story 2012/02/23 17:30
구글 애드센스 웨스트유니온 수익금 수령하였습니다.
예전 수익금 지급받을때 기업은행 외화통장 만들어두고 거기에 입금하기로 했어요.
웨스트유니온으로 받은 돈은 외화대체입금이 바로 안된다고 하네요 ㅠ.
그래서 US -> 원화 -> US 로 환전하여 외화통장에 입금하는데, 이 과정에서 100$ 당 2$ 정도의 손실이 발생.크윽.
아까운 돈.....
2$ 면 클릭이 몇번이나 일어나야되는 돈인데 ㅠ.ㅠ 

'My > Story' 카테고리의 다른 글

웹 개발자들 같지도 않은 개발자는 퇴출시켜야 함 ㅠㅠ.  (0) 2012/02/29
구글 애드센스 웨스트유니온 수익금 수령  (0) 2012/02/23
구글 애드센스 수익금 지급  (0) 2012/02/12
회사 들어갔다 왔어요 ㅠ.  (1) 2012/02/03
Posted by 알찬돌삐
TAG 기업은행, 애드센스, 애드센스 수익금, 외화통장, 웨스트유니온
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

구글 애드센스 수익금 지급

My/Story 2012/02/12 23:13
얼마전에 4년만에 200$ 돌파해서 -_-v..
4년만에 ㅠ.ㅠ
200$ 를 웨스트유니온으로 지급받아서 기업은행에서 환전(?)해서 외화통장에 입금을 했다.
이번엔 8개월만에. ㅡ_ㅡ. 시간이 좀 단축되었다.ㅋ.
전에는 블로그 수익만으로 집행했는데, 이번엔 개인적인 다른 사이트.. (사실 방문자는 정말 얼마 안됨)...
그냥 블로그에 꾸준글 올려야 될거 같음. ㅡ_ㅡ.
어찌되었든 이번엔 100$ 넘어서 지급신청할까 말까 갈등 많이 때림,
금액이 너무 적어서 해야 되나 말아야 하나. 100$ 때문에 은행까지 가기엔 너무 귀찮아...

BUT, 이넘의 애드센스는 언제 계정이 짤릴지 몰라서 ㅡ_ㅡ. 지급 신청해버림..
부정클릭도 안하는데, 짤리진 않겠지 (방문자수도 얼마 안된다구).... 

'My > Story' 카테고리의 다른 글

구글 애드센스 웨스트유니온 수익금 수령  (0) 2012/02/23
구글 애드센스 수익금 지급  (0) 2012/02/12
회사 들어갔다 왔어요 ㅠ.  (1) 2012/02/03
도메인 기관이전  (1) 2012/01/26
Posted by 알찬돌삐
TAG 구글 애드센스, 애드센스, 웨스트유니온
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

회사 들어갔다 왔어요 ㅠ.

My/Story 2012/02/03 23:10
화장실에서 쾌변을 즐기고 있는데,
공장에서 전화 옴......
제품 입고가 안돼~~~~~
바코드 발행도 안돼~~~
현장에서 제품입고랑 바코드는 자동화창고 서버랑 연결됨 --.
ERP 문제는 아니고 그렇담 자동화창고 서버....
즐똥을 끊고 ㅠㅠ...
서버 접속되는지 확인을 하려니 얘는 내부에서만 통신하는거라서 외부에서 접근안됨.

내가 이럴때를 대비해서 VPN 으로 터널링 뚫어놓으려고 했으나,
가정용 공유기로는 어림 반품어치도 없는 기능 -_-......
회사쪽 방화벽이 쥬니퍼라 -_-.

그래서 내가 PPTP 로 뚫어놓으려고 했으나, 메뉴얼이 다 영어라 -_-;;;;
MIP 로 외부에서 다이렉트로 접근 가능한 PC 한대 켜놓은게 있음 -_-.

접속해보니 자동화 창고 서버가 접속이 안됨.

헉. ㅅㅂ. 안돼!!!!!!!~~~~~~~~~~~~~~~~~~~~~~~~~

왜 금요일밤만 되면 장애가 터지는거야.!!!!!!!

옷 갈아입고 공장 출근(?)함...
서버가 위치한 현장은 존나 캄캄함. ㅠㅠ.
무서움. 귀신 나올거 같음 ㅠㅠ.
천장에서 물이 막 샘 ㅠㅠ. <-- 알고봤더니 수도관 터진거임 -_-..

아무튼간에 서버렉에 가보니 광컨버터랑 스위치랑 전원 다 나가있음...잉.
ㅅㅂ 이게 뭔 꼴이여.

차단기 내려갔음 닝기미!!!!!!!!!
내가 차단기 하나때문에 회사까지 나갔단 말인가. 존나 허무.
이런걸 왜 나한테 전화해..... 계전파트에 전화해야지.

즐똥을 다시 해야 되는데.......

'My > Story' 카테고리의 다른 글

구글 애드센스 수익금 지급  (0) 2012/02/12
회사 들어갔다 왔어요 ㅠ.  (1) 2012/02/03
도메인 기관이전  (1) 2012/01/26
삼보 에버라텍 6100 CPU 교체기...  (0) 2012/01/04
Posted by 알찬돌삐
트랙백 0개, 댓글 1개가 달렸습니다.

댓글을 달아 주세요

  1. guk 2012/02/06 11:42  댓글주소  수정/삭제  댓글쓰기

    재밌게 잘 올리셨네요.
    공감 가는 부분입니다. ^^

jQuery IE 버전에 Placeholder 적용하기

My/Job (개인작업물) 2012/02/02 10:44
이번에 MS 에서 XP 는 IE8 까지, 윈도우 7은 IE9 까지 강제 업데이트를 진행하기로 하였답니다.
웹개발자들에게는 환영할만한 소식입니다.
드디어 개발시 IE6 을 고려하지 않아도 되게 될듯 합니다.ㅠㅠ

서론은 이쯤에서 끝내고, Placeholder 란 뭔가.
 

 
위 화면은 제가 주력으로 사용하는 모포털(daum)의 로그인 화면입니다.
아이디와 비밀번호 입력창에 회색으로 희미하게 적용된 부분이 있습니다.

그렇습니다. Placeholder 는 텍스트 박스에 미리 희미하게 입력되어 있어서 사용자들의 입력을 도와주는 기능을 말합니다. (HTML5 에서 적용되는 input attribute 입니다.)

아래는 HTML5 의 Placeholder 를 지원하는 브라우저입니다. 
 Browsers  Placeholder Support
 IE 9 이하  X
 Firefox 3.7 +  ✓
 Safari 4.0 +  ✓
 Chrome 4.0 +  ✓
 Opera 11  ✓

역시나 진리의 갑 MS.....
지원하지 않는군요.... 

그래서 대부분의 사이트에서 Placeholder 를 사용하기 위해 Javascript 를 사용하는데요.
일반적으로 input 태그에 value 에 값을 넣고 글자색을 희미하게 합니다.
이런 경우 값 체크를 제대로 하지 않으면, Placeholder 라고 넣어둔 값이 Submit 되는 경우가 발생합니다.

그럼, 이를 방지하기 위해 다른 방법을 써보죠.
스타일시트에 아래 코드를 적용합니다.

label.absolute { 
    position: absolute; 
    color:#999; 
    display: none; 
    cursor: text
}
input.focusbox { 
    border:1px solid #23adb2;
}
input:focus { 
    outline: #23adb2 solid thin 
} 

input:focus 는 크롬을 위해서 넣어둡니다. ^^.
포커스시 유저 인터페이스는 동일해야 하므로 맞추는게 낫지요.

아래 자바스크립트 코드를 페이지의 하단에 넣어줍니다.

jQuery(function () {
    if (!("placeholder" in document.createElement("input"))) { 
        jQuery(":input[placeholder]").each(function () {
            var $this = jQuery(this);
            var pos = $this.offset();
            if (!this.id) this.id = "jQueryVirtual_" + this.name;
            if (this.id) {
                if (jQuery.browser.version  < 8) {
                    $this.after("<label for='" + this.id + 
                        "' id='jQueryVirtual_label_" + this.id + 
                        "' class='absolute'>" + $this.attr("placeholder") + 
                        "</label>");
                    $("#jQueryVirtual_label_" + this.id).
                        css({"left":(pos.left+5), "margin-top":3, 
                        "width":$this.width()});
                }
                else {
                    $this.after("<label for='" + this.id + 
                    "' id='jQueryVirtual_label_" + this.id + 
                    "' style='left:" + (pos.left+5) + 
                    "px;margin-top:2px' class='absolute'>" + 
                    $this.attr("placeholder") + "</label>");
                }
            }
        }).focus(function () {
            var $this = jQuery(this);
            $this.addClass("focusbox");
            jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
        }).blur(function () {
            var $this = jQuery(this);
            $this.removeClass("focusbox");
            if(!jQuery.trim($this.val())) 
                jQuery("#jQueryVirtual_label_" + $this.attr("id")).show();
            else jQuery("#jQueryVirtual_label_" + $this.attr("id")).hide();
        }).trigger("blur");
    }
}); 

이렇게 하시면 Placeholder 를 지원하지 않는 브라우저에서 Placeholder 역할을 대체할수 있습니다.

샘플파일을 첨부하니 다운받아서 확인해보세요.

example.html




아래 링크에서 바로 확인할 수 있습니다.

http://jsfiddle.net/d9bnV/ 
 
저작자 표시 비영리 동일 조건 변경 허락

'My > Job (개인작업물)' 카테고리의 다른 글

jQuery IE 버전에 Placeholder 적용하기  (0) 2012/02/02
모바일 웹사이트 프레임워크 3종 비교  (0) 2010/06/15
아쿠아표 웹그리드 속도 업!!!!!!!  (2) 2008/08/29
코드 재활용성을 높이기 위한 표준안 확립.  (0) 2008/08/15
Posted by 알찬돌삐
TAG HTML5, PlaceHolder
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요