그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 Select창을 원하는 대로 만드는 방법에 대해 알아보도록 하겠습니다. Select창은 쓰이는 곳이 정말 많습니다. 간단한 페이지라면 사용하지 않을 수 있지만 어느 정도 규모가 있는 곳이라면 당연히 Select창을 쓰게 되겠죠. 하지만 이 Select창을 그냥 기본 디자인으로 사용하는 건 디자이너로써 지켜볼 수가 없습니다..😠 그래서 오늘은 이 Select form을 어떻게 이쁘게, 원하는 대로 만들 수 있는지 알아보도록 할게요! Select 창을 원하는대로 만들 수 있는 방법 HTML/CSS 옵션1 세부정보 옵션1 세부정보 옵션2 세부정보 옵션3 세부정보 옵션1세부정보 옵션2세부정보 옵션3세부정보 jQuery $(document).on('click', function(..

안녕하세요 무택입니다 :) 오늘은 마우스 움직임에 따라 배경 이미지를 움직이는 기능에 대해 써보려고 합니다. 주로 공간감을 주기 위한 장치로 자주 쓰이는데 예시와 같이 알아봐요😀 읽기 전 보면 좋은 글 [JavaScript]마우스 좌표를 구할 수 있는 다양한 방법 [jQuery]hover시 마우스 커서 커스텀하기 HTML/CSS JS $('.bg-inner').on("mousemove", function(e) { const width = $(window).width(); const height = $(window).height(); const moveX = (e.pageX - width / 2) / width; const moveY = (e.pageY - height / 2) / height; const..

안녕하세요 무택입니다 :) 오늘은 마우스 커서를 커스텀할 수 있는 코드에 대해 써보려고 합니다. 최근에는 다양한 hover들이 많이 등장해서 이 기능도 자주 접해보신 분들이 많을 것 같은데, 아래에서 자세한 내용을 알아보시죠😉 HTML/CSS 자세히 보기 jQuery document.addEventListener("mousemove", (e) => { // 마우스 커서의 좌표를 가져옵니다. const x = e.clientX; const y = e.clientY; // cursor_div를 커서 좌표로 이동 $("#cursor_div").css('transform', 'translate(' + x + 'px, ' + y + 'px)'); // 원하는 영역에 올라오면 클래스 추가 및 제거 $('.img_f..

안녕하세요 무택입니다 :) 오늘은 focus() 함수를 사용하려고 하는데 작동하지 않을 때 사용할 수 있는 setTimeout() 함수에 대해 써보려고 합니다. codepen 예시 See the Pen Untitled by TytanLee (@TytanLee) on CodePen. 위 예시를 보면 아시겠지만 저는 버튼을 누르면 검색창을 띄워서 바로 자동으로 입력가능한 UX를 만들고 싶었습니다. 검색창을 누르고 input탭을 누르는 과정을 생략시켜 주면 사용자 입장에서는 편하기 때문에 focus 기능을 사용하려고 했는데 함수가 작동이 안 되더라구요. 그래서 대체 함수를 찾다가 setTimeout() 함수를 이용해서 구현해 봤습니다. 위 예시에서 보면 알 수 있듯이 focus()를 이용했을 때는 기능이 작동..

안녕하세요 무택입니다 :) 오늘은 웹퍼블리싱을 하면 거의 필수로 필요한 기능인 탭 활성화 + 나머지 탭 비활성화 코드에 대해 써보도록 하겠습니다. 사용성이 많은 기능이니 한번 보시면 좋을 거예요 동작 원리 먼저 탭을 선택하면 변화시킬 css내용을 클래스로 만들어놓고 탭을 누르면 모든 탭에서 활성화 클래스 제거, 누른 탭은 활성화 클래스를 추가하는 원리입니다. 여기서 중요한 건 클릭한 탭을 찾아줘야 하기 때문에 'this 선택자'를 사용해야 합니다. codepen 예시 See the Pen Untitled by TytanLee (@TytanLee) on CodePen. HTML 탭1 탭2 탭3 CSS * { list-style: none; margin: 0; padding: 0; } a { text-dec..

안녕하세요 무택입니다 :) 오늘은 스크롤에 따라 진행상태를 알려주는 바 만드는 코드에 대해 남겨보려고 합니다. 요즘 아티클 형식의 페이지는 거의 다 사용하고 있는 것 같은데 그만큼 웹사이트 사용성에 도움을 주는 기능이라고 생각합니다. 사람들이 페이지에 들어와서 글을 읽다가 어느 정도 남았는지 직관적으로 알 수 있기 때문에 적절한 페이지에 적용하면 좋은 기능이 될 것 같아요. 동작원리 저는 기능을 브런치 사이트의 아티클 페이지를 참조해서 만들었습니다. 그래서 기본적으로 동작 원리는 스크롤할 때마다 스크립트를 실행시켜서 현재 스크롤 위치를 파악 후 수치로 변환(0 ~ 100%), 그 수치를 진행바의 넓이로 넣는 원리입니다. codepen 예시 See the Pen 스크롤 위치 by TytanLee (@Tyt..

안녕하세요 :) 무택입니다🧔 오늘은 제이쿼리 여러 가지 선택자에 대해 정리해보려고 합니다. closest(), parent() 등 선택자는 쓰이는 경우가 많아서 꼭 알아야 할 문법인 것 같습니다. 예시 코드도 같이 설명에 넣어놨으니 활성화 버튼을 누르기 전에 뭐가 활성화될지 한번 생각해 보고 눌러보면 좋을 것 같습니다. #부모 선택자 $("기준요소").parent() : 기준요소의 부모 선택 - See the Pen jQuery_parent by TytanLee (@TytanLee) on CodePen. $("기준요소").parents() : 기준요소의 부모들 모두 선택 - See the Pen jQuery_parent by TytanLee (@TytanLee) on CodePen. $("기준요소").c..