목록웹개발 (189)
SeouliteLab
jQuery의 .attr() 메서드는 선택한 요소의 속성(attribute)을 가져오거나 설정합니다. 이를 통해 HTML 요소의 속성을 동적으로 조작할 수 있습니다. 예제 1: 속성 가져오기 링크 예제 2: 속성 설정하기 예제 3: 다중 속성 설정하기
jQuery의 .addClass() 메서드는 선택한 요소에 하나 이상의 클래스를 추가합니다. 이를 통해 동적으로 요소의 스타일이나 동작을 변경할 수 있습니다. 예제 1: 클래스 추가 요소 1 /* 스타일시트 */ .highlight { background-color: yellow; } 요소 1 예제 2: 여러 클래스 추가 요소 2 /* 스타일시트 */ .highlight { background-color: yellow; } .border { border: 2px solid black; } 요소 2 예제 3: 반복문을 이용한 클래스 추가 아이템 1 아이템 2 아이템 3 /* 스타일시트 */ .highlight { background-color: yellow; } 아이템 1 아이템 2 아이템 3
jQuery의 .width() 메서드는 선택한 요소의 너비를 가져옵니다. 이는 요소의 내부 콘텐츠의 너비를 기준으로 하며, 패딩(padding)과 테두리(border)는 포함하지 않습니다. 예제 1: 너비 가져오기 예제 2: 너비 설정하기 예제 3: 다른 요소의 너비와 동기화하기
jQuery의 .outerWidth() 메서드는 선택한 요소의 외부 너비를 가져옵니다. 이는 요소의 내부 콘텐츠와 패딩(padding), 테두리(border) 및 선택적으로 마진(margin)의 너비를 모두 포함합니다. 이 메서드는 보이는 콘텐츠를 기반으로 하며, 가상의 상자 모델(Virtual Box Model)을 사용하여 계산합니다. 예제 1: 외부 너비 가져오기 예제 2: 외부 너비 설정하기 예제 3: 외부 너비에 마진 포함하기
jQuery의 .outerHeight() 메서드는 선택한 요소의 외부 높이를 가져옵니다. 이는 요소의 내부 콘텐츠와 패딩(padding), 테두리(border) 및 선택적으로 마진(margin)의 높이를 모두 포함합니다. 이 메서드는 보이는 콘텐츠를 기반으로 하며, 가상의 상자 모델(Virtual Box Model)을 사용하여 계산합니다. 예제 1: 외부 높이 가져오기 예제 2: 외부 높이 설정하기
jQuery의 .innerWidth() 메서드는 선택한 요소의 내부 너비를 가져옵니다. 이는 요소의 내부 콘텐츠와 패딩(padding)의 너비를 포함합니다. 이 메서드는 보이는 콘텐츠를 기반으로 하며, 가상의 상자 모델(Virtual Box Model)을 사용하여 계산합니다. 예제:
jQuery의 .innerHeight() 메서드는 선택한 요소의 내부 높이를 가져옵니다. 이는 요소의 내부 콘텐츠와 패딩(padding)의 높이를 포함합니다. 이 메서드는 보이는 콘텐츠를 기반으로 하며, 가상의 상자 모델(Virtual Box Model)을 사용하여 계산합니다. 예제:
jQuery에서 요소의 높이를 가져오거나 설정하는 데 사용되는 .height() 메서드에 대해 알아보겠습니다. jQuery의 .height() 메서드는 선택한 요소의 높이를 가져오거나 설정하는 데 사용됩니다. 이 메서드는 CSS의 height 속성을 통해 요소의 높이를 계산합니다. 예제:
소개: 이번 예제에서는 jQuery의 append() 메서드를 사용하여 HTML 요소를 동적으로 추가하는 방법에 대해 알아봅니다. append() 메서드를 사용하면 선택한 요소의 끝에 새로운 내용을 추가할 수 있습니다. 이를 통해 동적으로 새로운 HTML 요소를 추가하거나 기존 요소에 내용을 추가할 수 있습니다. HTML 요소 동적 추가 - append 메서드: jQuery의 append() 메서드는 선택한 요소의 내부 끝에 새로운 HTML 요소나 내용을 추가합니다. 이를 통해 웹 페이지에서 사용자와의 상호작용에 따라 동적으로 콘텐츠를 추가할 수 있습니다. 설정: HTML 파일 내에서 jQuery 라이브러리를 로드해야 합니다. 일반적으로 CDN을 통해 라이브러리를 로드하거나 로컬에 포함시킬 수 있습니다...
소개: 이 예제에서는 jQuery를 사용하여 input 태그에서 사용자가 입력한 값을 가져와서 alert 창으로 표시하는 방법을 살펴봅니다. '입력값 확인'이라는 버튼을 클릭하면 사용자가 입력한 ID와 PW 값을 가져와서 alert 창에 표시합니다. input 태그 값 가져오기와 alert 창 표시: jQuery를 사용하여 input 태그에서 값을 가져오는 것은 val() 메서드를 사용합니다. 이를 통해 입력된 값을 가져온 후, 가져온 값을 alert 창에 표시할 수 있습니다. 설정: HTML 파일 내에서 jQuery 라이브러리를 로드해야 합니다. 일반적으로 CDN을 통해 라이브러리를 로드하거나 로컬에 포함시킬 수 있습니다. 예제: input 태그 값 가져오기와 alert 창 표시하기 입력..