본문 바로가기

웹 개발3

word-break:break-all HTML 테이블에서 자동 줄 바꿈, 넓이 지정 방법!! word-break:break-all HTML 테이블에서 자동 줄 바꿈, 넓이 지정 방법!!블로그 포스팅을 하며 테이블의 크기 때문에 고민되신적 있으시죠? 내가 원하는 테이블의 크기는 딱 요 정도인데, 칼럼(TD) 안에 입력한 글자에 따라 테이블 크기가 마음대로 변경되어 버리면 참 속상합니다. 오늘은 내가 사용하고자 하는 크기에 맞게 이쁜 테이블을 구성하는 방법에 대해 살펴보겠습니다.먼저, 예제 테이블을 통해 기본 설정을 확인해보겠습니다. 두 개의 TD 값을 가지며 각각의 너비를 150px로 지정한 테이블을 만들어보겠습니다. 12345 12345 1234512345이렇게 하면, 테이블 안에 아무런 내용이 없거나 지정한 사이즈보다 길이가 작은 문자열이 입력된다면, 내가.. 2024. 10. 26.

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

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

이전 1 다음

티스토리툴바