2013의 게시물 표시

[JS] 모바일 사이트로 이동 스크립트

<script language="javascript" type="text/javascript"> //<![CDATA[ var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', ' LG', 'MOT', 'SAMSUNG', 'SonyEricsson'); for (var word in mobileKeyWords){ if (navigator.userAgent.match(mobileKeyWords[word]) !=null){ location.href = "m.com "; break; } } //]]> </script>

[JQuery] lnb 접근성

마우스만으로 동작하는 기본 스크립트들을 만들어 놓다가 늘어나는 접근성 프로젝트 들에 의해서 포커스를 이젠 포함하게 되었다. 유지 보수 할때는 그냥 click 로 되어 있는 js들을 그대로 긁어다가 해당 하는 부분들만 focus로 바꾸면서 작업했는데 이것도 하나씩 정리를 해야겠는데...ㅠ; 접근성 쪽으로 더 나아간다면 서브 컨텐츠들이 너무 많다면 텝 으로 건너갈 시에 서브를 다 지나갈건지 주 매뉴만 갈건지 등, 논의 요소들이 있으니 주의가 필요함. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(function(){ lnb();//lnb 호출 }); //lnb function lnb(){ var $subBox = $(".lnb .sub_box"), $lnbSub = $(".lnb .tit_lnb a");   $subBox.hide();  $lnbSub.each(function(index){ $(this) .bind ("click focus", function(){ $subBox.hide();  $subBox.eq(index).show();  $lnbSub.find("img").each(function(){ $(this).attr("src",$(this).attr("src").replace("_on","_off")); }); $(this).find("img").attr("src", $(this).find("img").attr("src").replace("_off"

[맛집] 포차팩토리

이미지
IT들어와서 처음으로 근로자의 날에 쉬었다. 물론 그 전날엔 맘껏 달림 ㅋㅋㅋ 생선을 그리 좋아 하지 않기 때문에 노량진으로는 잘 가지 않는 편인데 집이 먼 사람들이 있어서 오늘은 노량진에서 먹기로함. 부사수가 검색해서 찾아낸 두 곳 중에 그나마 역이랑 가까운 곳으로 가기로 함. 포차 팩토리 ㅋㅋㅋ 손님이 꽉꽉차있어서 예약을 해놓고 간게 다행이었음. 처음 기본안주로 오뎅꼬치가 나오는게 너무 좋았음.  아사 직전이었으니 ㅋㅋㅋ 바로앞에 휘트니스센타가 있는데...창밖으로 열씨미 운동하는 사람들이 보임;; 치즈랑 베이컨이랑 두종류를 먹었음. 만족함 ㅋ 잘 안가는 동네라서 언제 또갈지는 모르겠으나 어쩌다가 가게 된다면 바로 가겠삼~ 제 점수는요~ 7.5 ★★★★☆ 다음 지도 http://place.map.daum.net/18567115 *별도 붙여봐야징* ★★★★★ 10 ~ 9 : 이건 꼭 먹어봐야함. ★★★★☆ 8 ~ 7 : 먹어봐도 후회는 없음. ★★★☆☆ 6 ~ 5 : 평범함. ★★☆☆☆ 4 ~ 3 : 시간이 아까움. ★☆☆☆☆ 2 ~ 1 : 인생의 허무함을 느끼다.

[JQuery] tab

jQuery(function(){ var btn = $(".tabList li"); var list = $(".tabBox"); list,btn.each(function(i){ var idx = i-1; $(this).click(function(){ list.css("display","none").eq(idx).css("display","block"); if(btn.hasClass("on")){ btn.removeClass("on") } btn.eq(idx).addClass("on"); }); idx++; }); }); <ul class="tabList" id="tab"> <li class="">menu01</li> <li class="">menu02</li> <li class="">menu03</li> <li class="">menu04</li>  </ul> <div class="subCont"> <div class="tabBox" style="display:block">텝1</div> <div class="tabBox">텝2</div> <div class="tabBox">텝3</div> <div class="tabBox">텝4</div>   <

[맛집] 도니버거

이미지
집 근처를 지나다가 도니 어쩌구 저쩌구 하는 가게가 들어선다는  공사중 팻말을 보게 되었다. 오픈 하기만을 기다렸다가 다녀온 도니버거... 결론부터 말하면 먹을만 하다. 검색하면 나오는 다른 블로그들 처럼 안이 꽉꽉들어 차있다.  맛도 괜찮고 가격은 평균?  (가격은 : 크라제 > 도니 >= 스모키그릴?)  일반 도니버거는 먹다보니 패티가 좀 조각조각 흩어지며 부셔져서 먹기가 힘들었다.  치즈버거도 먹었는데 도니버거 보다 맛이 더 좋았다. 담에 가면 다른 버거나 치즈버거를 먹을 생각임. 도니도니~♡ 내가 더 고맙지 집근처라섴ㅋㅋㅋ 오픈한지 얼마 안되서 깔끔 번도 수제번이라고 한다. 맛있음. 나에게 사진 잘 찍는 법을 알려주려 하지 마라__)a; 속이 꽉차있다. 제 점수는요~ 8 ★★★★☆ 다음 지도 http://place.map.daum.net/18776932 *별도 붙여봐야징* ★★★★★ 10 ~ 9 : 이건 꼭 먹어봐야함. ★★★★☆ 8 ~ 7 : 먹어봐도 후회는 없음. ★★★☆☆ 6 ~ 5 : 평범함. ★★☆☆☆ 4 ~ 3 : 시간이 아까움. ★☆☆☆☆ 2 ~ 1 : 인생의 허무함을 느끼다.

[맛집] 스모키 그릴버거

이미지
뭐 내가 지금 나가있는 곳을 어디라고는 말 못하지만 진짜 이주변에는 먹을 데가 없다... 이 근처 직장인들은 정말 맛점을 일단 포기 하고 살아야 한다. (아예 없는 건 아니지만 맨날 한정된음식만 먹을 순 없으니...) 점심시간이 다가올 수록 오늘은 뭘 먹어야 하나...하는 생각과 함께 We뭐시기에서 광고하는 롯데리아 1+1버거가 눈에 띄었다.  점심은 햄버거로 일단 찍어놓고 뭘먹는지 물어보는 중 양평교 넘어서 수제 버거집으로 점심을 먹으러 간다는 일행이 있어서 꼽사리를 끼기로 했다.(그분에게 감사한닼ㅋㅋㅋ) 블로그들을 검색해본 결과는 일단 맛!있!어 보였다. 그리고 사람들도 좀 많이 오는 듯 하여서 허겁지겁 달려갔는데... 손님이 하나도 없었다...이거 낚인건가__)a; 일단 왔으니 내껀 오리지널로 주문을 했다.  음료는 무한 리필(몇몇 유명 버거 체인점들은 반성해라) 결론은 맛난다.  이런 젠장. 체인점이 아직 많지 않아서 거의 없다는게 실망스럽다. 자꾸 생각나는데...여긴 좀 거리가 있어서 하...아쉽다...ㅠ 옆에 맥도날드가 있다. 매장이 자그마하다.  왠만한 수제 버거집에 비하면 일단 가격이 착한 것 같다. 더 가격이 착한 곳도 있겠지만 수제 버거는 옛날 크라제 이후론 실망해서 안가다가  올해 도니버거 가본게 끝이니 토달지 말자. 사이드로 피자도 있고 재료들을 따로 추가 할 수도 있다. 왼쪽이 SG버거(오리지널), 오른쪽이 파이어버거 좀 맵다고 하는데...일반인이 맵다고 햇으니 나에겐 핫소스 케찹맛이겠군; 치즈칩을 추가 하였다. 감자칩도 굵고 맛난다! 제 점수는요~ 9.5 ★★★★★ 다음 지도 http://place.map.daum.net/15531460 *별도 붙여봐야징* ★★★★★ 10 ~ 9 : 이건 꼭 먹어봐야함. ★★★★☆ 8 ~ 7 : 먹어봐도 후회는 없음. ★★★☆☆ 6 ~ 5

[JQuery] 컨텐츠 높이를 같게 하는 JQuery

<script type="text/javascript"> $.fn.setEqualHeight=function() {     var maxHeight=0;     var maxElement=null;     $(this).each(function(i) {         var hei = $(this).outerHeight();//padding,border값을 포함한 높이         if( hei > maxHeight ) {             maxHeight=hei;             maxElement=this;         }     });               $(this).not($(maxElement)).each(function() {         var rehei = maxHeight-($(this).outerHeight()- $(this).height());         $(this).height(rehei)     }) }     $(document).ready(function() {         $('.content1, .content2, content3......').setEqualHeight();     }); </script> 출처 http://defle.nayana.com/board/view.php?bbs_code=jquery&ot%5Bbd_view_count%5D=1&bd_num=1318

[CSS] Opacity

opacity: 0.5; /* All modern browsers including IE9 */ filter: alpha(opacity=50); /* IE5-IE9 */ ie filter 철자 아직까지 안외움...

[CSS] inline-block / text-indent : ie Bug

분명히 ir기법으로 많이 써봤던 것 같은데 난 이 버그를 왜 이제야 보게 되었지? 지금까지 수많은 작업을 해왔는데 이렇게 안써봤을리도 없을텐데 말이야... 상황은 간단했다. 버튼 이미지를 가운데 정렬시키고 :hover를 하기 위해서 배경이미지로 넣었는데... CSS는 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ display:inline-block; text-indent:-9999px; background:#url() no-repeat 0 0; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 그런데 ie에서 text-indent 이녀석이 배경이미지 까지 날려버리네...ㅎ 해결 방법으로는  ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ display:inline-block; /*text-indent:-9999px;*/ line-height:-9999px; vertical-align:bottom; background:#url() no-repeat 0 0; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 위의 방법이 안될경우에 아래의 방법을 사용 이 방법이 젤로 좋은 듯... font-size:0; line-height:0; text-shadow:none; color:transparent; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 아...찜찜해...별로 좋은 방법도 아닌것 같다. 단순하게 생각하면 그냥 이런 상황을 만들지말자.

[html] 모바일웹 작업 팁 정리중...

1. 가로/세로 전환시 폰트 고정 -webkit-text-size-adjust:none; viewport에서 maximum-scale가 있어야 하고 값이 1.0일때만 반응. 2. viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> 3. 상단 url바 숨기기 <script type="text/javascript"> window.addEventListener("load",function(){  setTimeout(scrollTo,0,0,1);  },false); </script> 4. 전화번호 기능 <a href="tel:000-0000-0000">전화걸기</a> <a href="sms:000-0000-0000">문자보내기</a> <a href="sms:">문자보내기 실행</a> 5. 키보드 호출 <input type="text" /> <input type="search" /> <input type="tel" /> <input type="url" /> <input type="email" /> <input type="time" /> <input type="number" /> <input type="datetime"

[맛집] 팔당 냉면

이미지
체인점이 좀 생기고 있는 건지 아니면 이름만 같은 집들인 건지 잘 모르겠다. 여기가 본점 같은데 내가 갔던 날은 한가한지 손님이 그리 많지 않았다. 검색을 해보니 팔당냉면은 어디에 있던지 맛이 다 괜찮은 듯 해 보인다. 거두절미하고 평가는 괜찮다. 냉면은 고기를 먹은뒤 후식이라고만 느끼는 사람들이라면  인식의 충격을 느껴볼 것임 ㅋ 매운걸 좋아하는 나에겐 양념을 계속 넣을 수도 있고 비냉으로 먹다가  냉육수를 부어서 물냉으로도 먹을 수가 있다.  그리고 뜨뜻한 온육수를 무한리필로 계속 마실수도 있다.  보리차 먹듯이 홀짝홀짝 마셨는데 이거 참...좋음^^ 왕만두도 같이 시켜봤는데 속이 알찼었다. 다른 자리에서 먹고 있던 낚지 볶음, 청국장도 먹어 보고 싶었는데 배가 불러져서 쉬었다가 먹어볼 생각도 포기했다. 가게가 리모델링을 한 것 같음. 고기랑 같이 나온다. 육쌈냉면따윈 가지 않는게 정신건강에 좋다. 만두 빵빵해서 맘에 듬ㅋ.  나이가 들면서 위가 줄어들어 버린듯...저거 먹고 배가 부르다니...ㅎ...ㅠ 제 점수는요~ 9.0 ★★★★★ 다음 지도 http://map.daum.net/?titag=http://blog.daum.net/blogtomap/data/hstudio/7/10 *별도 붙여봐야징* ★★★★★ 10 ~ 9 : 이건 꼭 먹어봐야함. ★★★★☆ 8 ~ 7 : 먹어봐도 후회는 없음. ★★★☆☆ 6 ~ 5 : 평범함. ★★☆☆☆ 4 ~ 3 : 시간이 아까움. ★☆☆☆☆ 2 ~ 1 : 인생의 허무함을 느끼다.

[맛집] 일산 칼국수

이미지
맛난 음식을 먹을 때 사진을 찍는 것을 자주 까먹는다... 그래도 몇개는 안 잊고 찍었는지 사진첩을 뒤적이면 나오는 잡다한 것들을 보면서 "그래 이건 맛있었지. 이걸 다시 가서 먹을 만했던가..." 하는 생각이 들면서 사진을 지우기도 하고 남기기도 한다. 간만에 사진첩을 보니 걍 냅두기는 아까워서 하나씩 올려봐야 겠다는 생각이 들었다. 앞으로의 내용들은 본인은 사진을 잘 찍는다던가 미각이 특출난다던가 하지 않기 때문에  ... ...자세한 설명은 생략한다. 날이 추웠음에도 사람들이 항상 줄을 많이 서있다. 이날은 없는편인 것이야... 반해버리고 말것같은 딱 내취향의 김치! 양념이 찐~하고 매콤하다~ 닭칼국수였음. 국물이 시원하고 양도 많고 아 다시 침도네... 제 점수는요~ 9.5 ★★★★★ 네이버 거리뷰 http://map.naver.com/index.nhn?pinId=11727528&pinType=site&streetviewer=on&pinTitle=FZYDMcfBfb4iK25Yy28Sjg==&enc=b64 *별도 붙여봐야징* ★★★★★ 10 ~ 9 : 이건 꼭 먹어봐야함. ★★★★☆ 8 ~ 7 : 먹어봐도 후회는 없음. ★★★☆☆ 6 ~ 5 : 평범함. ★★☆☆☆ 4 ~ 3 : 시간이 아까움. ★☆☆☆☆ 2 ~ 1 : 인생의 허무함을 느끼다.

[JS] 슬라이딩 레이어

<style style="text/css"> .layerMainWrap{ position:absolute; top:0;left:-627px; z-index:999; width:627px; } .layerMainWrap .layerBox{ position:relative; float:right; } .layerMainWrap .layerBox .Main_Closebtn{position:absolute;top:2px;right:12px;} .layerMainWrap .layerBox .iconArrow{position:absolute;top:33px;right:3px;} #iconArrow{display:none;position:absolute;top:17px;left:-7px;} .layerMainWrap .layerBox .layerInfo{ position:relative; margin-right:10px; border:2px solid #4e4b47; } </style> <script type="text/javascript"> jQuery( document ).ready(function(){ jQuery("#btnLayerMain").live("click", function(){ layMain(); }); jQuery(".Main_Closebtn").live("click", function(){ layMain(); }); var layMainBox = jQuery("#layerMainWrap"); setTimeout(function(){ jQuery("#layerMainWrap").fadeOut("2000"

[JS] OverLayer + Scroll

<script type="text/javascript"> jQuery( document ).ready(function(){ jQuery("#layerMainWrap").fadeOut(1500, "linear"); jQuery("#btnLayerMain").hover(function(){ jQuery("#layerMainWrap").fadeIn("Fast"); }); jQuery("#btnLayerMain").mouseout(function(){ jQuery("#layerMainWrap").hide(); jQuery("#layerMainWrap").mouseover(function(){ jQuery("#layerMainWrap").show(); }); }); $(window).scroll(function(){ if  ($(window).scrollTop() >= 159){  jQuery("#layerMainCon").css("position" , "fixed"); jQuery("#layerMainCon").css("top" , "40px"); }else if  ($(window).scrollTop() <= 159){  jQuery("#layerMainCon").css("position" , "absolute"); jQuery("#layerMainCon").css("top" , "0"); } });  }); </script>

[JS] 모바일 플리킹

이것 때문에 계속 머리 아프다... 일단 처리는 되었지만 괜찮은 예제가 있어서 적어 놓음. 언제 분석 해야지 [출처] http://dohoons.com/test/flick/ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flick Navigation</title> <link href="/test/flick/common.css" rel="stylesheet" type="text/css"></link> <style type="text/css"> h1 { font-size:16px; font-weight:bold; } h2 { margin-top:10px; text-align:center; } #touchSlider { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; } #touchSlider ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; } #touchSlider ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px; color:#fff; } #touchSlider2 { width:200px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; } #touchSlider2 ul { width:99999px; height:150px; position:absolute; top:0; left:0; ov