HTML, CSS, JavaScript/jQuery 연습문제 (3) 썸네일형 리스트형 jQuery 연습문제 3 ( 색 변경 ) 색 변경 실습.area{ width: 100px; height: 100px; border: 1px solid black; box-sizing: border-box;}.inputColor{ box-sizing: border-box; width: 100px; padding: 0; margin : 0; outline: none;}.div2{ display: inline-block;}.box{ display: inline-block; }1) 색 변경 버튼(#btn1)을 클릭했을 때, 입력(#input1) 한 값으로 사각형(#box1) 배경색 변경색 변경$("#btn1").on("click", function(){ $("#box1").css("backgroundCo.. jQuery 연습문제 2 ( 동적으로 글자 수 세기 ) 동적으로 글자 수 세기동적으로 글자 수 세기 0/150 // 동적으로 글자 수 세기$("#input-content").on("input", function(){ // 1. 입력한 글자 수만큼 span 태그 값 변경 let length = $(this).val().length; $("span").text(length); // 2. #counter의 글자색 변경 // 글자 수가 0 ~ 130자 -> 검은색 // 131 ~ 149 -> 주황색 // 150 -> 빨간색 if(length See the Pen 24-12-25 jquery pr2 by Namu (@Namu-the-sans) on CodePen. jQuery 연습문제 1 ( 특정 시간마다 일정 범위의 숫자 출력 ) 0.3초마다 숫자 0 ~ 9까지 출력하는 span 태그정지.area{ width: 200px; height: 40px; border: 1px solid black;}.text1{ color: red; cursor: pointer;}// 0.3초마다 0~9까지 출력하는 span 태그// 1. 필요한 변수 선언let count=0; // 0~9까지 증가하는 것을 세기 위한 변수let interval; // setInterval을 저장할 변수$(()=>{ interval = setInterval(function(){ // 0~9까지 출력할 span 태그 작성 if(count " + count++ + ""; $(".area").append(span);.. 이전 1 다음