박금향의 코드 공부용 블로그 박금향의 코드 공부용 블로그

결론은 글자 작은 것까지 하나하나 안 읽은 내 탓이다.이벤트 약관을 그따위로 써놓긴 했지만 그걸 끝까지 세세하게 살피지 못한 내 탓임. 하지만 다들 조심하시라고 공익적 목적으로 포스팅 작성함. 어제가 11월 11일, 빼빼로데이였고, 카카오뱅크 앱에서 빼빼로 데이 이벤트를 했었다.빼빼로를 1원에 살 수 있는 이벤트다.   뭐 옛날에 빼빼로 하나가 800원쯤 하던 걸 생각하면서요즘은 빼빼로가 하나에 1800원이니(언제 이렇게 비싸짐?)오 좋은 이벤트네 하고 들어가서 바로 뽑았었다.아래의 긴 약관들을 흘려보낸 채로(⬅️ 이게 사건의 발단) GS25 아몬드빼빼로에 당첨돼서 기분좋게 사용했다. 근데 문제가 생김 신용 대출을 12월 말에 할 일이 있어서대출 금리와 이자를 보기 위해 카카오뱅크 신용대출을 눌러보니갑자..

Select는 CSS로 커스텀하기 매우 빡세고, 특히 option부분은 건드리지도 못한다.그래서 다들 div로 어케어케 바꿔 만들거나, 라이브러리를 쓴다.몇 번 div로 직접 바꿔가면서 만들어 썼었는데, 그냥 라이브러리가 훨씬 편해서 앞으로 라이브러리를 쭉 쓰자고 마음먹었다. 가볍고 쓰기 편한 select dropdown 라이브러리 제이쿼리 나이스 셀렉트 jQuery Nice Select 다.매우 가볍고 쓰기 쉬워서 난 이게 더 좋았다. https://jqueryniceselect.hernansartorio.com/ jQuery Nice SelectUsage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compile..

게임 UI처럼 팝업을 원하는 위치로 이동시키고 싶을 때가 자주 있다. 아래 제이쿼리로 화면 내에서 팝업이 벗어나지 않게 하면서팝업 헤더를 드래그 해서 팝업을 움직이는 기능 function enablePopupDrag() { var $currentPopup = null; //현재 드래그 중인 팝업 요소 저장 var clickOffsetX, clickOffsetY; //팝업이 클릭된 위치와 팝업의 left, top 경계 사이의 offset(거리) 저장 $('.popup_header').on('mousedown', function(e) { //사용자가 팝업 헤더에 마우스를 눌렀을 때 이벤트 시작 $currentPopup = $(this).closest('.popup'); //이벤트..

메인 컬러 하나를 정해 놓은 게 있다면그걸 가지고 라이트/다크 테마 UI 컬러팔레트를 아주 잘 뽑아준다.  민트 컬러가 좋아서 민트색 하나를 가지고 입력했더니 위와 같이 컬러팔레트를 만들어줬다. 아래의 UI 는 활용 예시다.hover, focus, active, checked 등등 상호작용 효과 예시도 확인 가능 같은 색으로 다크모드로도 만들어봤다. https://www.radix-ui.com/colors/custom https://www.radix-ui.com/colors/custom www.radix-ui.com

svg 태그에 단독으로 주거나,svg 이미지를 background-image로 쓰는 경우 그 태그에만 단독으로 filter를 줘야 한다.안 그럼 background-image를 가진 태그의 다른 요소들까지 filter의 영향을 받는다. https://angel-rs.github.io/css-color-filter-generator/ CSS Color Filter GeneratorRGB rgb(0, 0, 0) Copy HEX #000 Copyangel-rs.github.io  SVG의 기본 색상은 #000000 이라고 생각하면 됨다른 색이 적용된 상태의 SVG에 filter를 주면 뭔가 결과가 이상했다. 그래서 background-image로 svg를 코드를 넣을 땐 나는 항상 #000000인 상태로 씀나..

https://svgencode.com/ SVG EncoderOne-liner Removed newlines and extra whitespacesvgencode.com  SVG 코드를 맨 위에 SVG Raw Code 에 복붙하면아래 다양한 유형별로 쓸 수 있게 만들어준다. 오른쪽에는 해당 SVG를 미리보기로 볼 수 있음 아래에 코드들이 나오는데, 그걸 복사해서 원하는 방식으로 붙여넣으면 됨 아래 코드는 background-image url 로 쓸 수 있게 바뀐 코드background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 -960 960 960' width='48px'..

1. 이미지를 준비한다. 1-1. 배경이 있는 경우 배경을 미리 없앤다. 2. Ctrl+J 로 레이어 복사(혹시 모를 사고 대비) 3. 이미지를 흑백으로 변경 Alt + Shift + Ctrl + B 4. Ctrl + L 로 레벨 조절해서 진하게 만든다는 느낌으로 조절 5. 이미지 전체 복사 ➡️ 채널 탭으로 이동 ➡️ 채널 하나 만들기(알파1) ➡️ 이미지 붙여넣기 6. Ctrl을 누른 상태에서 알파1 썸네일 좌클릭 7. 레이어로 탭을 바꾸고 새 레이어를 만들기 ➡️ 원래 있던 레이어들은 안 보이게 숨기기 8. 전경색을 흰색으로 하고 Alt + Del 그 전에 미리 진한색으로 꽉 찬 레이어를 깔아두면 확인이 훨씬 쉬움 레벨 조절을 할 때 어떻게 하냐에 따라서 결과 느낌이 꽤 다르다.(난 그냥 감대로 함..

폭 1080px 기준 1080인 이유 : 인스타그램에 상세페이지 크롭해서 올릴 때 편하기 때문 큰 제목 103pt Pretendard - SemiBold 중간 제목 83pt Pretendard - Medium 작은 제목 또는 큰 본문 63pt Pretendard - Medium 본문 내용 43pt Pretendard - Light 출처 : Designer PAe sㅇㅇㄹㅇㄹㅇㄹㅇㅇㅇrㅇ PA 하지만 웹디자인과 웹퍼블리싱 할 때는 px로 글자 크기를 지정하는데, 이렇게 되면 마진 때문에 글자 크기를 짝수로 맞춰줘야 한다. 안 그럼 마진이 딱 떨어지지가 않음