본문 바로가기
728x90
반응형

분류 전체보기166

로딩 이미지 생성 사이트 - loading.io 살다 보면 로더 이미지 파일이 필요할 수 있잖아요 그럴 때 유용한 사이트 https://loading.io/ FREE라고 표시된 부분의 로더들은 색이나 바 크기, 스피드 등을 원하는 대로 커스텀하여 GIF, SVG, PNG 파일 등으로 저장이 가능합니다. 심지어는 CSS파일도 제공합니다. 이렇게 CSS를 포함한 html 파일 형태로 저장이 가능합니다. 다운로드를 클릭하면 나오는 아래의 화면에서 Free Download를 클릭하면 다운로드가 됩니다. 다운받은 SVG 파일 참 쉽죠? 2023. 10. 18.
Figma에서 같은 폰트 스타일이 적용된 텍스트 찾기 (특정 스타일이 적용된 요소 전체 검색) - Same Text Style Finder 유용한 협업툴 Figma 시안 전체 중에 특정 폰트가 어디에 얼마나 들어가 있는지 찾아야 할 때 피그마 플러그인 Same Text Style Finder를 통해 특정 text style이 적용된 요소를 레이어 하나하나 볼 필요 없이 한 번에 검색할 수 있다. 좌측 상단의 파란 메뉴에서 Plugins -> Manage plugins를 클릭한다. 검색창에 Same Text Style Finder를 입력하고 이 플러그인을 클릭해 실행해 준다. 그러면 이렇게 Plugins에 Same text style finder가 추가가 된다. 이 플러그인을 실행하면 아래와 같은 창이 나타난다. 첫번째 셀렉트박스를 클릭하면 현재 프로젝트 내에 사용된 폰트들을 확인할 수 있다. font family, font weight, f.. 2023. 10. 6.
베트남 호치민 해산물 식당 Hong Hai Restaurant (Hải Sản Hồng Hải) 방문 후기 호치민 seafood 맛집을 검색해봤다 오케이 Hong Hai로 결정 화려한 외관답게 나름 가격대가 있는 식당이지만 그래도 저렴하다 9시쯤 늦은 시간에 갔더니 가게가 한산했다 메뉴판 몇 컷메뉴가 엄청 많았다 이백몇번까지인가 번호가 붙어있다 랍스터와 게, 새우는 가격이 고정이 아니고 시장가(마켓 프라이스)이다. 우리는 점원에게 게와 새우 가격을 물어봤는데 베트남동 가격은 기억이 안 나지만 게는 1kg당 한화 10만 원가량이었고 새우는 1kg당 한화 7만원대였다 새우 500g 꼬치와 블랙페퍼 에스까르고, 조개탕(clam)과 이름 모를 초록 야채와 사이공비어를 주문했다 먹다 보니 양이 부족해서 추가로 옥수수와 오징어튀김(calamari)를 시켰다 사이공 비어 가볍고 깔끔한 맛이다 새우가 진짜 살이 통통하고 신.. 2023. 9. 24.
베트남 호치민 9월 1박 3일 여행 후기 PUS-SGN (스압) 빡센 1박 3일 일정으로 호치민에 다녀왔습니다 요약 9월 16일(토) 08:45 김해공항 출국 9월 18일(월) 00:55(인데 연착돼서 3시 넘어서 이륙) 호치민공항 출국 3일 동안 1박을 하는 일정 Day 1: 벱메인(점심)-벤탄시장-골든로터스 스파-데킬라 헤어살롱-홍하이 씨푸드 레스토랑(저녁)-Co.op마트-편의점-숙소 Day 2: 포호아파스퇴르(아침)-떤딘성당-콩카페-숙소 수영장-카페 아파트먼트/Partea-인생네컷-22스파-오토바이투어-골든로터스 스파-공항 Day 3: 호치민공항에서 새벽 비행기 타고 김해공항으로 귀국 경비 환전도 안해가고 정말 마스터카드만 믿고 갔습니다 항공권 3인 750,600원 (비엣젯 - 트립닷컴에서 예약) 숙소 Celine Living, Family Suite 84,20.. 2023. 9. 24.
베트남 호치민 골든로터스 스파(Golden Lotus Spa & Massage Club) 풋마사지, 젤네일 후기 골든로터스 스파 가격표 카톡으로 예약하고 방문한 골든로터스 조도가 낮고 아주 아늑하고 평화로운 분위기이다 예약을 하고왔다고 말한 뒤 선결제하고 락커 키를 받는다 위층에 올라가기 전에 녹차로 추정되는 티와 말린 생강 주전부리를 주신다 나와 친구들은 시그니처 골든로터스 풋 테라피를 받았다. 인당 395K동으로 한화 2만1~2천원정도 된다. 다인실에서 마사지를 받는데 6~8명정도 동시에 마사지를 받았다. 쇼파같은 의자에 누워서 족욕을 한 뒤 본격적으로 마사지가 시작된다. 족욕하는데 누운 자세가 ㄱ자라서 허리가 너무 아파서 발을 들어 자세를 편하게 했더니 다시 양동이에 발을 넣어주셨다ㅋㅋㅋㅋ 그리고 초반에 얼굴에 오이팩을 해주는데 화장한 상태여서 얼굴을 물수건으로 벅벅 문지르고 오이를 얹어주셔서 약간 뜨악했다... 2023. 9. 24.
앱은 어려워 어쩌다보니 앱 개발에 참여하고 있다. 리액트 네이티브 프로젝트 중이다. 태블릿과 모바일 앱의 프론트엔드 코딩을 맡고있는데 웹이랑 작동하는 방식이 달라서 어려움이 많다. 원하는 디자인대로 코딩하는게 생각보다 어렵달까?? 어렵지만 확실히 경험은 쌓이는 듯 2023. 9. 8.
[CSS] Firefox에서도 문제없는 백그라운드 이미지 디졸브/크로스페이드 효과 CSS - Firefox background-image animation not smooth img 태그의 이미지는 CSS의 background-image 속성으로 나타낸 이미지처럼 원하는 비율이나 위치로 보여주기가 어렵다. 이 때문에 개인적으로 메인 비주얼로 크게 들어가는 이미지는 img태그보다는 background-image 사용을 선호한다. 최근에 퍼블리싱한 홈페이지 호환성을 체크하는데 파이어폭스에서만 메인 백그라운드이미지의 cross fade 효과가 안 먹는 것이 아닌가! 빈 div에 background-image를 지정하고, keyframes 애니메이션으로 background-image의 소스가 바뀌게 짠 코드였다. 이미지 전환은 되는데 부드럽게 페이드인&아웃이 되지않았다. 이는 내가 알아본 바로는 파이어폭스가 cross-fade 속성을 지원하지 않기 때문인 듯하다. 위의 캡쳐는 크롬 .. 2023. 8. 17.
[javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 만만치 않습니다.근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데dots는 슬라이드 수 만큼 생성되고 클릭하면 해당 슬라이드로 이동하는 기능이며,arrows는 화살표 버튼으로 이전/다음 슬라이드로 이동하는 기능입니다.이 기본 기능들을 원하는대로 탈바꿈하고 프로그레스 바를 만들어 봅시다. 완성본 dots는 슬라이드수에 비례하여 나타나는 기능이므로 이 dots와 API를 활용해서 페이징을 만들 수 있습니다.appendDots: '.slick--visual__paging',customPaging: function (slider, i) { return  ''+(i + 1.. 2023. 8. 4.
[javascript] 버튼 클릭하면 클립보드로 텍스트 복사하기 (-를 제외하고 숫자만) 폰 번호나 계좌번호 등 하이픈이 들어가는 숫자 텍스트에서 '-'를 공백으로 대체하고 복사하는 코드 var textToCopy = $(this).text().replace(/-/g, ""); See the Pen copy to clipboard by sel (@wimmwell) on CodePen. 2023. 7. 27.
728x90
반응형

티스토리툴바