분류 전체보기 224

자바스크립트 입문과 웹UI 정리

폼 만들기 로그인하세요 전송 닫기 버튼 - 제이쿼리의 $(select).on('click', function(){})은 자바스크립트 select.addEventListener('click', fucntion(){})과 같은 의미 - 제이쿼리의 $(select).on('click', function(e){}) 함수 안에 `e`를 넣으면 `e.target`은 유저가 실제로 누른 것을 불러옴 - $(select).is(select)는 괄호 안의 값에 따라 `true`와 `false`로 반환함 - `.preventDefault()`는 `a`나 `submit`같이 페이지 이동이나 새로고침의 동작을 막아줌 (비슷한 예시로 `.stopPropagation`도 사용할 수 있는데 이 메서드는 이벤트버블링을 막아줌) 다크..

[jQuery]hover시 마우스 커서 커스텀하기

안녕하세요 무택입니다 :) 오늘은 마우스 커서를 커스텀할 수 있는 코드에 대해 써보려고 합니다. 최근에는 다양한 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..

웹에 어울리는 이미지 파일(webP) 저장하기

안녕하세요 무택입니다 :) 오늘은 웹피(webP)에 대해 써보려고 합니다. 자세한 내용은 아래를 확인해 주세요! 웹피(webP) 파일이란? 웹피(WebP)는 구글에서 개발한 이미지 파일 포맷입니다. 흔히 알고 있는 jpg, gif와 같은 파일 형식을 말하고, 인터넷 서버 환경의 대부분을 점유하고 있는 구글은 조금 더 쾌적한 서버 환경을 만들기 위해서 개발했다고 합니다. 웹피의 장점 압축률이 높아 파일 크기가 작습니다. WebP는 JPEG, PNG, GIF 등 기존 이미지 포맷보다 압축률이 높아 동일한 이미지 품질에서 파일 크기가 작습니다. 이는 웹사이트의 로딩 속도를 향상시킬 수 있습니다. 명 이미지와 애니메이션 이미지를 지원합니다. WebP는 투명 이미지와 애니메이션 이미지를 지원합니다. 이는 GIF ..

🎨디자인 2023.09.21

[포토샵 기능]직선 그림자 정말 간편하게 만들기

안녕하세요 무택입니다 :) 오늘은 포토샵에서 직선 그림자 디자인을 어떻게 만드는지 정말 간단한 방법으로 알아보겠습니다. 여러 가지 방법이 있겠지만 오늘 알려드리는 방법은 가장 간단한 방법으로 실무에서 활용할 때 가장 편할 거라고 생각합니다😀 예시 디자인 오늘 이런 그림자를 어떻게 만드는지 한번 알아봐요! 만드는 방법 1. 사용할 텍스트를 써서 텍스트 레이어를 만들어 줍니다. 2. 텍스트 레이어를 선택하고 'Ctrl+J'를 눌러 복사한 후, 원본 레이어보다 아래로 깔아줍니다. 3. 복사된 레이어를 선택한 상태에서 'Ctrl+T'를 눌러 자유 변형 상태로 만들어 줍니다. 그리고 왼쪽 상단의 X축과 Y축을 조절하는 곳에서 각각 1px씩 더해주고 엔터를 눌러줍니다.(오른쪽 아래로 이동해야 합니다.) 4. 이제 ..

[유용한 사이트]iOS 디바이스 정보를 모두 확인할 수 있는 사이트

안녕하세요 무택입니다 :) 오늘은 웹서핑을 하다가 좋은 사이트를 발견해서 공유하려고 합니다. iOS 디바이스 정보 확인 사이트 Screen Sizes링크로 가보면 위 화면을 확인할 수 있습니다😄😄😄 Screen Sizes A complete guide for Apple displays screensizes.app - iOS의 다양한 디바이스 정보 확인, 레이아웃 가이드, 위젯 크기 등 OS에 관련된 픽셀이나 정보를 확인할 수 있는 사이트 - 디바이스 크기도 비교할 수 있는 부가기능 참고 글 : https://yozm.wishket.com/magazine/detail/2232/ "정리된 모바일 디바이스별 해상도"를 보고 싶다면 아래를 참고해 주세요 :) 모바일 디바이스별 해상도(2023.09.18 기준) ..

[HTML/CSS]HTML에서 이미지 편집하기(imageKit API)

안녕하세요 무택입니다 :) 오늘은 CSS를 사용하지 않고 HTML에서 이미지 태그에 대해 편집하는 방법에 대해 써보려고 합니다. 많이 사용하진 않지만 혹시 모르니까 자투리 상식 개념으로 알고 있으면 좋을 것 같아요👍 imageKit API 사용 이 기능을 이용하기 위해서는 imageKit API를 이용해야 합니다. 이게 가장 큰 단점이라고 생각합니다ㅜ Image & Video CDN | Dynamic Optimizations, Transformations & DAM | ImageKit.io Real-time image and video optimizations & transformations with integrated digital asset management & a fast CDN for deliv..

[HTML/CSS]SVG를 활용해 원형 차트 만들기

See the Pen [HTML/CSS]원형 차트 만들기 by TytanLee (@TytanLee) on CodePen. 이해를 돕기 위한 설명 - `stroke`클래스를 `rotate`로 돌렸기 때문에 HTML내의 `circle`에서 `cx`,`cy`로 위치 조정, 그리고 `r`로 차트의 반지름 설정 - `stroke-dasharray`는 점의 길이, `stroke-dashoffset`은 점 사이 간격의 길이 - `show_circle` 애니메이션으로 차트가 움직이는 모습 구현 - `storke`클래스의 `stroke-dasharray`와 `show_circle`애니메이션의 `stroke-dashoffset`의 값을 조정해 차트가 얼마 나 찰 것인지 조정 - `storke`클래스의 `stroke-das..

[HTML/CSS]Animation에서 step기능 알아보기

안녕하세요 무택입니다 :) 오늘은 animation 옵션 중에서 steps에 대한 설명을 해보려고 합니다. HTML/CSS 코드 step non-step 한 글 자 씩 보 여 주 기 Codepen See the Pen [CSS}animation step 사용 by TytanLee (@TytanLee) on CodePen. 개념 설명 오늘 사용한 `steps` 옵션은 프레임을 설정해 주는 기능입니다. 애니메이션 옵션에서 기본 설정은 자연스럽게 움직이는 것이지만 `steps`옵션을 넣어주면 몇 단계를 통해서 애니메이션을 보여줄 것인지 설정할 수 있습니다. 왜 사용하는지 시곗바늘이 딱딱 움직이는 연출을 할 수도 있고, 위 예시처럼 텍스트를 한 글자씩 노출시키는 연출을 할 수도 있고 다양한 연출을 할 수 있기 ..