본문 바로가기

jQuery17

썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 ✈ 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jQuery 가로세로 비율 웹사이트나 애플리케이션을 제작하면서 이미지의 비율이나 크기를 맞추는 것은 중요한 작업 중 하나입니다. 특히, 썸네일이나 대표 이미지와 같은 고정된 영역에 다양한 크기와 비율의 이미지를 표시해야 할 때, 그 이미지를 영역에 꽉 차게 보여주면서도 넘치는 부분을 잘라내야 할 필요가 있습니다. 이미지의 가로와 세로 비율을 고정된 영역에 맞추려면, 서버에서 이미지를 잘라내거나 리사이징하는 방법이 있습니다. 하지만 이 방법은 원본 이미지의 품질을 손상시킬 수 있기 때문에, CSS나 jQuery를 활용하여 원본 이미지를 그대로 유지하면서도 원하는 비율에 맞게 보여주는 방법을 찾아야 합니다. CSS를 활.. 2023. 10. 6.

Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 서론 모바일 웹 개발에서 슬라이드 기능은 매우 중요합니다. idangerous.swiper.js 플러그인은 모바일에서 터치 제스처를 활용하여 슬라이드를 편리하게 구현할 수 있는 훌륭한 도구 중 하나입니다. 그러나 이 플러그인의 페이징 기능은 숫자나 불릿 형태로만 제공되어, 텍스트 문장으로 페이지네이션을 표현하기 어렵습니다. 이에 대응하기 위해 텍스트 문장을 페이징 처리하는 꼼수를 사용하려 했으며, 처음에는 대략 6~8개의 페이지를 표시하도록 설정하였습니다. 그러나 디자이너의 요청으로 10개의 페이지가 등록되었을 때 초반 6개만 보이고, 나머지는 다음 페이지에서 보이도록 처리해야 했습니다. 이러.. 2023. 9. 7.

jquery .sort() 함수를 활용한 요소 이동과 정렬 jquery .sort() 함수를 활용한 요소 이동과 정렬 소개 이번 포스팅에서는 jQuery의 .sort() 함수를 활용하여 요소를 이동하면서 정렬하는 방법에 대해 알아보겠습니다. 특히, 부서나 트리 구조의 목록에서 특정 요소를 선택하여 다른 목록으로 이동한 후, 해당 목록을 정렬하는 방법에 대해 다룰 것입니다. 상황 설정 가정해봅시다. 여러 부서를 나타내는 목록이 있고, 우리는 사용자가 선택한 부서를 다른 목록으로 이동시킨 후, 그 목록을 순서대로 정렬하고자 합니다. 예를 들어, '디지털 미디어' 팀들의 목록을 가지고 있다고 가정해보겠습니다. 먼저 복사 이동은 클릭 이벤트 발생과 동시에 .appendTo() 함수로 이동된다. 이 예시에서는 jQuery의 .sort() 함수를 활용하여 부서 이동과 소트.. 2023. 9. 1.

jQuery 동적 click 이벤트 처리하기 jQuery로 동적 click 이벤트 처리하기 개요 웹 개발에서 jQuery는 많은 유용한 기능을 제공하는데, 그 중 하나는 동적으로 생성된 요소에 클릭 이벤트를 적용하는 것입니다. 이 블로그 포스팅에서는 동적으로 생성된 버튼에 클릭 이벤트를 적용하는 방법을 알아보겠습니다. 상황 설정 보통 웹 페이지에서 버튼에 클릭 이벤트를 부여할 때, $(document).ready() 함수 내에서 이벤트를 선언합니다. 하지만 동적으로 생성된 버튼의 경우, 초기화 단계에서는 해당 버튼이 존재하지 않아 이벤트가 적용되지 않는 문제가 발생할 수 있습니다. 첫 번째 버튼 위 코드에서 두 번째 버튼 (secondButton)을 클릭해도 경고 메시지가 표시되지 않습니다. 이는 두 번째 버튼의 이벤트가 초기화 단계에서 이미 선언.. 2023. 8. 23.

jQuery를 이용하여 요소의 이름으로 현재 요소의 타입 알아내기 jQuery를 이용하여 요소의 이름으로 현재 요소의 타입 알아내기 안녕하세요! 이번 블로그 포스팅에서는 jQuery를 사용하여 요소의 이름을 기반으로 현재 요소의 타입을 어떻게 알아낼 수 있는지 알려드리겠습니다. 소개 웹 개발에서 종종 특정 요소의 타입을 알아내는 일이 필요합니다. 예를 들어, 다양한 입력 폼 요소 중에서 사용자가 입력한 값을 가져오려고 할 때 해당 요소가 인지, 인지, 아니면 인지 등을 구분해야 할 때가 있습니다. 방법 prop("tagName") 사용하기 var element = $("input[name='text']"); var tagName = element.prop("tagName"); console.log(tagName); // 결과 예시: "INPUT" [0].tagName .. 2023. 8. 15.

자바스크립트/jQuery로 input checkbox name값, value 값으로 체크하기 자바스크립트/jQuery로 input checkbox name값, value 값으로 체크하기 소개 이 블로그 포스팅에서는 자바스크립트/jQuery를 사용하여 input checkbox 요소를 name과 value 값을 이용하여 체크하는 방법에 대해 알아보겠습니다. input checkbox를 사용하면 여러 개의 값을 저장해야 할 때가 있습니다. name 속성을 동일하게 유지하면서 value만 다르게 설정하면 배열로 쉽게 값을 저장할 수 있어서 자주 사용되는 방식입니다. 하지만 이렇게 저장된 값을 다시 불러오는 것은 조금 까다로울 수 있습니다. 이러한 문제를 해결하기 위해 name과 value를 동시에 활용하여 체크박스를 선택할 수 있습니다. 방법 jQuery를 사용하여 input checkbox 요소를 .. 2023. 7. 31.

이전 1 2 3 다음

티스토리툴바