계발하는 개발자

쇼핑몰 사이트의 상품페이지를 보면 위와 같은 상품 정렬 기능을 볼 수 있다. 기능 구현 자체는 그렇게 어렵지 않았는데, 여러 이슈들이 있어서 나름의 의미있었던 기억으로 남는다.😅 (Ex. 상품 전체를 조회할 수 있는 '전체'라는 lnb 클릭후 상품 정렬 버튼(신상품순, 낮은가격순 등 )을 누르면 url 파라미터 3번째 인자값으로 받아오는 값이 데이터와 매치되지 않아서 에러가 발생한다. 그래서 이에 대한 에러 처리를 따로 해줘야 했고, 모바일 화면에서는 select option 요소를 통해 상품 정렬 기능을 수행하려고 했는데 option 요소에 별도로 이벤트를 걸 수가 없어서 그로인해 내가 직접 select 요소 비슷하게 html, js 코드를 다시 짜줘야 했다..) 일단 css를 제외한 구현 코드는 아래..

일전에 학원에서 진행했던 초창기 프로젝트에서 marquee(움직이는 텍스트) 구현하듯이 좌측으로 롤링되는 무한 롤링배너를 또 구현해야 했다. 위에서 이미지 배너 뒤에 움직이는 텍스트가 marquee다. 기억 상으로 html+css 만으로 움직이게 했던 것 같다. (이미지 배너는 다른 방법으로 구현했으며, 원래는 멈춰있다가 커서가 해당 슬라이드 영역을 한 번 건드리고 가면 그때부터 움직이고, 움직이는 슬라이드 위에 커서를 놓으면 움직임을 멈추도록 했다.) 이번엔 다른 색다른 방법으로 구현하고 싶어서 찾아봤더니 Javascript cloneNode 함수를 이용해서 구현하는 방법이 있었다. 그 원리는 즉슨, li를 감싸는 wrap이라는 요소가 있으면 wrap 요소를 clone해서 또 다른 wrap2 요소를 만..

아래 같이 화면 줄어듦에 따라 넘치는 텍스트는 ... 으로 처리하고 싶은데 text-overflow: ellipsis 적용이 안될 때의 해결 방법 정리에 관한 글이다. 적용에 앞서, 먼저 체크해봐야 할 부분이 있다. 1. width가 제대로 설정되어 있는지 2. block태그이거나, 혹은 display: block/ inline-block 처리가 되어 있는지(flex는 적용 안됨) 3. 글자가 width를 넘어가는 조건을 충족시켰는지 위 조건들을 모두 만족하는데도 text-overflow: ellipsis 속성 적용이 안된다면 숨기려는 텍스트 요소에 아래 부가적인 속성들을 더 추가해서 해결할 수 있다. p { padding: 4px 0 5px; letter-spacing: -1.5px; font-fami..

참고 https://stackoverflow.com/questions/2895894/jquery-ui-draggable-is-not-a-function 에러 Vue에서 특정 px이하에서는 드래그 모드로 전환시키려고 아래같이 코드를 작성한 후 화면 크기를 리사이즈 했을 때 아래같은 에러가 발생했다. function drgFn() { // 드래그 대상요소 const drgEl = $(".mbtit2 > dd"); // 윈도우크기 리턴함수 const retWin = () => { return $(window).width(); } // 리사이즈시 윈도우크기 업데이트 $(window).resize(()=>{ // 윈도우 가로크기 : left 기준위치 px변환! let winW = retWin(); if (winW