본문 바로가기
반응형

전체 글137

구로디지털단지 - 옥상맥주 오랜만에 친구들 4명이 다같이 만난날 간 구로 디지털 단지 옥상맥주! 정말 몇달전... 한 3개월 전? 쯤에 가산디지털단지에서 태국음식 먹었는데(아련아련....) 오랜만에 다같이 만났더니 신났다 ㅋㅋㅋ 퇴근시간에 만나서 이른시간이 아니라 중간지점에서 만났는데 다들 늦게까지 집에갈수 있는 교통수단이 있어서 다행이였다. 가게 이름이 옥상맥주라서 자꾸 루프탑으로 생각하게 되는데 야외테라스 있어서 루프탑느낌이 나긴 했다 ㅋㅋ 그래도 실내가 좋아서 우리는 실내에서 마심~ 옥상맥주시그니처 맥주인 옥상맥주하고 꿀맥주 먹었는데 둘다 맛있었다. 꿀맥주는 위에 꿀 뿌려주는데 살짝 달달한 정도 였다. 메뉴들은 진짜 많은데 조리하는 사람이 부족했던 건지 사람이 많아서 인지 주문하고 메뉴가 엄청 늦게 나와서 좀 기다렸었다. 안.. 2020. 5. 27.
광명 롯데프리미엄 아울렛 - 생어거스틴 오랜만에 올려보는 맛집 후기 ㅋㅋㅋ 찍어 놓은건 많은데 귀차니즘이 스멀스멀 생겨서 나중에 올려야지 다음에 올려야지 하다보니 한달이 지나버린 상황... 이렇게 까지 귀차니즘이 극에 달하다니 ㅠㅠ 반성해야겠다. 광명 롯데프리미엄 아울렛안에 있는 식당들. 이렇게 많지만 항상 올때마다 왜 태국음식이 먹고싶어지는건지.. 롯데 아울렛 올때마다 가는 생어거스틴 내 원픽이다 ㅋㅋ 광명에 있는 생어거스틴은 모든 메뉴가 있는게 아니라서 메뉴판이 다른지점이랑 조금 다르다. 그래도 인기많은 메뉴는 다 있으니까 아쉽거나 하는건 아닌데 그래도 뭔가 다 있었으면.. 하는 정도?ㅎㅎ 내가 제일 좋아하는 뿌빳뽕거리하고 똠양꿍!! 진짜 맛있는데 체인점이 너무 적다 ㅠㅠㅠ 맨날먹어도 안질리고 맛있는 뿌빳뽕커리 - 29,000원 코코넛워터.. 2020. 5. 24.
[script] 옆에서 나오는 menu script 메뉴버튼에 있는 하얀화살표는 코드어썸을 사용해서 아이콘은 가져와 봤다. 폰트어썸 처음 써봤는데 div, class만 가져오면 바로 사용할수 있어서 좋은것 같다. font-size, color 를 이용해서 css로 크기,색 까지 변경해서 사용할수 있어서 편리함. 위에 링크는 폰트어썸 사이트에서 가져와서 연결하면 된다. $(document).ready(function(){ $("#quick_bar span").click(function(){ $("#quick_bar").toggleClass('on'); }); }); #quick_bar{position:fixed; right:-255px; top:0; width:255px; height:100%; background:black; transition:0.5s .. 2020. 5. 23.
[script] 이미지 돋보기 효과 스크립트(magnifier) 보통 쇼핑몰에 상품 이미지에 마우스 올렸을때 확대되서 돋보기처럼 보이게 하는 효과를 codepen 에서 찾아서 해봤다. 예전에 꾸며놨던 티스토리 배경인데 이미지가 있어서 아주 유용하게 잘쓰고 있다 ㅋㅋㅋ 사진 크기 비율을 맞게 하지않아서 세로로 찌그러진 느낌이 있긴한데 사이즈가 맞는 이미지 잘 구해서 쓰면 괜찮다. $(document).ready(function () { var nativeWidth = 0; var nativeHeight = 0; $(".content_left").mousemove(function (e) { if (!nativeWidth && !nativeHeight) { var imgObject = new Image(); imgObject.src = $(".smallImg").attr(.. 2020. 5. 23.
[slick] slick 슬라이드 (breakpoint , 딤드+유튜브) slick 슬라이드 반응형. 전체 width 값에 따라 breakpoint 옵션을 사용해서 슬라이드 3 -> 2 -> 1 개씩 보이게 한다. +) 추가 img 클릭 했을때 레이어 팝업이 어둡게 뜨면서 유튜브화면 뜨는 스크립트 추가!! head안에 아래 링크 연결 해줘야 한다. slick + 유툽팝업이 연결되는 링크인데 이것도 역시 codepen에 올라와있던것 참고해서 사용함. script를 head영역에 넣은게 아니고 body에 넣어서html 아래에 있다. .slick-slide{ margin:0 25px; border:1px solid red;} .slick-slide span{display:block; } .slick-slide img{width:600px; height:600px; width:100.. 2020. 5. 21.
[menu] 한줄로 나열되는 탭메뉴(반응형) div와 div 사이를 margin으로 여백을 주는것도 좋지만 반응형을 하게되면 줄어들때마다 여백을 새로 지정해줘야하기 때문에 번거로움이 있어서 좀더 편한방법으로 할수 있는 css를 정리했다. html구조는 너무 간단. 평소와 같다. 111 222 333 444 555 666 777 888 999 #container{max-width:1400px; width:100%; margin:50px auto 0; } #tab{margin:0 -5px; border:1px solid blue;} #tab li{float:left; display:table; width:20%; height:65px; padding:5px;} #tab li a{display:table-cell; vertical-align:middle.. 2020. 5. 18.
[script] dot_움직이는 배경화면 (codepen) codepen 돌아다니다가 스크립트를 이용해 연결되는 점들이?? 움직이는 특이한 배경화면이 있어서 정리해 봤다. 스크립트를 이렇게 다 써야하는지는 모르겠지만... 다 써있길래 고대로 가져와서 사용해봄.. ;(function (window, document) { "use strict"; var pluginName = 'particleground'; function extend(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { var obj = arguments[i]; if (!obj) continue; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] .. 2020. 5. 17.
[script] top_btn 탑버튼 animation 스크롤을 150이상 내렸을 때 탑버튼이 보임. 탑 버튼 클릭 했을 때 제일 윗페이지로 이동하는 애니메이션. 스크롤 이동해도 오른쪽 하단에 계속 있어야하기때문에 position:fixed로 고정시킴. $(window).scroll(function(){ if ($(window).scrollTop() > 150){ $("#top_btn").addClass("on"); } else { $("#top_btn").removeClass("on"); } }); $("#top_btn").click(function(){ $("body,html").animate({scrollTop:0},500); }); TOP #top_btn{position:fixed; right:50px; bottom:-50%; width:55px; h.. 2020. 5. 15.
[script] gnb menu slide toggle2 gnb 영역에 마우스 hover 했을때 아래 sub_gnb 리스트 + 하얀색 배경이 같이 내려와야한다. 오른쪽 메뉴버튼 클릭했을때 마찬가지로 서브메뉴와 뒷배경이 같이 보여져야 함. 스크립트도 hover 했을 때와 click 했을 때 두가지로 써야함. 추가되는 class는 on으로 통일해서 css 한번만 써도 될수 있게 했다. $(document).ready(function(){ $(".gnb").hover(function(){ $("#header").toggleClass('on'); $(".gnb_bar").stop().slideToggle(); $(".bg").stop().slideToggle(); }); $('.gnb_btn').click(function(){ $('#header').toggleCla.. 2020. 5. 12.
반응형

티스토리툴바