본문 바로가기

분류 전체보기

(32)
Bounce Effect Bounce css3 Animation 공튀기는 모션을 배너에 넣어주세요. 얼마나 걸릴까요? 2일걸린다하면 좀 오바같아서 정직하게 하루 걸립니다. 라고 했더니, 하루나 걸려요? 라고 오히려 반문하는 윗분.. 얼마나 튀어오르는지 그런 오차범위 컨펌해주시는 시간 감안해서 그 정도 걸릴거 같다고 했더니, 그런거 없을거라고 해서 그럼 반나절이요. 라고 했더니 그래도 반나절 걸려요? 두시간도 많다고 느끼는 윗분.. 그냥 뚝딱하면 만들어지는 줄 아는 윗분.. ㅋㅋㅋㅋ 마치 인공지능이 코딩하는 것마냥 단순하게 생각하는 윗분.. 최대한 빨리 처리해드리겠다고 하니 그제야 잘 부탁드린다고 당부하시는 윗분.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 요즘 윗분의 눈높이가 높아지다보니 요구사항도 한단계 업되는 추세다. 카카오나 네이버에서 서비스..
최악의 슬라이드 플러그인 기능구현 OwlCarousel2 슬라이드 중에서 가장 후진 것으로 평가받는 플러그인 bxslider, swiperjs 보다도 후진 것으로 평가받는 최악의 슬라이드 플러그인이나 현 프로젝트에서 사용중이라 어쩔수 없이 정리한다. owlcarousel2 에서 커스텀가능한 기능구현 마지막 슬라이드에서 더보기 기능 추가 슬라이드 마지막에서 링크나 버튼이 동적으로 붙게하는 경우 슬라이드 1 슬라이드 2 슬라이드 3 재생/정지 기능 정지버튼을 눌러도 모바일에서 스와이프하면 재생이 되는데, 이를 정지시킬 필요가 있는경우 접근성 처리를 할때 좌우 버튼을 누르거나 정지버튼을 누른후 재생을 멈춰야하는데 owl은 스와이프시 재생이 다시 진행되는 버그가 있다. 정지나 재생을 구분짓는 클래스를 두고 해당 클래스가 붙었을때 컨트롤하면 이를..
드래그로 정렬가능한 컴포넌트 sortable 위젯 기능을 구현할 수 있는 가장 손쉬운 방법은 jquery-ui sortable 사용하는 것! 그런데 문제가 있다, 드래그만으로는 접근성에 위배된다. 장애인을 배려하지않는 ui/ux 구조! 손이 없거나 입으로 도구를 사용하는 장애인들에겐 드래그나 스와이프 행위가 쥐약이기 때문이다. 그래서 반드시 모바일에서는 터치할 수 있는 버튼이 존재해야 한다. 간혹, 없는 경우가 있는데 그건 접근성 통과후 제외시켰거나 접근성업체와의 물밑거래 후 권장사항으로 돌렸기 때문이다. 구글링을 하다보니, jquery-ui에 버튼 이동되는 컴포넌트를 발견했는데 angular로 구현되어 있었다. 참고 url : https://codepen.io/thgreasi/pen/Gqpiu jquery만을 사용하여 똑같이 구현..
셀렉트박스 url 이동 셀렉트박스 url 이동 팀원들과 공유할 작업목록이나 라우터 효과를 모방한 셀렉트 url 이동기능 class="title_brand">박보영 class="title_sub">사진전 class="selectbox"> class="heading">광고영상 //select option에 추가될 객체 var $href = { '웃을때': 'smile', '귀여울때': 'cutty', '광고영상': 'ad', '브이로그': 'vlog', '뮤직비디오': 'mv' }; function nav(){ this.init(); this.addEvent(); } nav.prototype.init = function(){ for(var i in $href){ $('', { value: $href[i] +'.html', 'dat..
일반스크롤 vs 아이스크롤 일반스크롤과 아이스크롤의 차이점이 뭘까? 리소스의 부담이 덜하고 접근성 측면에서 무난한 일반스크롤이 좋은 건가, 일반스크롤을 흉내낸 아이스크롤이 좋은 건가? 브라우저별 제약이 많았던 과거에 비해 현재는 차이가 거의 없어져서, 아이스크롤의 장점이 퇴색해버렸지만, 그래도 아이스크롤이 좀더 부드럽게 동작되는 것 같고 플러그인이라서 지원되는 api도 많아 응용이 가능한 점에 비추어볼때 장점이 많은것도 같고 진정한 승자는? 오늘 구현할 내용은 특히 탭 영역에 자주 출몰하고(?), 내용이 길어질 경우 스크롤이 생겨 스크롤시 더 내용이 있다는 걸 암시하도록 양쪽에 그라데이션 처리나 버튼을 두는 경향이 있는데 일반스크롤과 아이스크롤 두 버전으로 만들어본다. 출처는 codepen.io 타이틀에 적어두었다. 왼쪽으로 스크..
깜박임 효과 새로 등록된 아이템이 있는 경우, new 아이콘이 깜빡일 때 사용한다. 함수로 호출하는 형태이고, 매개변수를 대입하여 만들어보았다. 무한 반복은 별도의 로직이 필요하지만, 만들어두지 않았다. 각자 만들어보자. count 값으로 1억을 대입하면 되지않을까 싶다. 한 화면에 그 시간만큼 머무르지 않을테니까ㅋ new $(document).ready(function(){ /* count: 반복횟수 delayTime: 초기 지연시간 speed: 속도 */ fn_repeat(3,500,250); function fn_repeat(count,delayTime,speed){ var timer = null; var initNum = 0; while( initNum < count ){ _repeat(); initNum++..
사당역 cafe de murmur 방문소감 썸녀와 밥을 먹고 근처 둘레길을 걸다가 이쁜 카페가 있다고 하여 들러본 동네 카페. 실제 방문해보니 완전 분위기 깡패!! 코로나 영향 탓인지 카페엔 이제 막 떠나려는 커플 1팀 외에는 없어서 더 좋았다는. 사장님이 개인적으로 모아 온 소소한 소품들도 보이고 언니가 운영한다는 갤러리 공방(아뜰리에 murmur 미술 공방)에서 가져와서 걸어두었다는 액자들이며 잔잔한 선곡들까지 만퍼센트 만족한 최애 아지트!! 이런 소품들은 어디서 구했나 몰라, 혹시 동묘역? 사장님의 알뜰살뜰한 소품 덕질이 느껴진다. 나도 요즘 나이가 들어서 그런지 몰라도 여성호르몬 탓인지 블링블링 여성스러운 취향에 매료되는 듯 이 카페는 sns 사진 촬영할만한 곳임에 틀림없다. 절로 카메라를 들이밀고 감탄을 자아내는 인테리어다. 주문했던 아..
팽현숙의 가평 카페 한 달 전쯤 방송에서 팽현숙 씨가 운영 중인 가평 카페를 보게 되어 호기심에 들러보았다. 방송에서는 비교적 한가로워보이길래 실제로 만나볼 수 있을까 싶었는데 이런.. 연예인들이 한가롭게 카페에 머물 이유가 없지.. 내가 참 순진했다. -_-; 카페 안에선 아르바이트생 둘이 음료를 주문받아 만들고 있었고, 예상만큼 썩 붐비진 않았다. 둘러보니 가평 드라이브중에 가볍게 잠시 머물다가면 좋을, 하지만, 두번 들르기엔 좀 아쉬운 그런 평범한 카페였다. 내부 인테리어는 나름 공을 들인 듯 보였다. 예스럽고 고전적인 느낌을 자아내는 서양식 가구들로 꾸며져 있었다. 팽현숙 씨가 꽤나 엔틱 한 취향인가 보다. 젊은 세대들에게 어필될만한 단순하고 감각적인 느낌이기보다는 40,50대 중년들을 타깃으로 한 중후하고 고급스러..