Ninny Design Skill
-
Skill/JavascriptJS/jQuery - 반복문(for문 while문 등)에서 동적 변수 사용하기동적변수변수명과 내용이 반복되면서 일부만 변경되는 경우 반복문을 통해 효율적으로 동적변수를 사용할 수 있다. 동적변수를 생성하는데에는 두자기 방법이 있는데, 배열을 이용해서 생성하는 방법과 글로벌 영역인 window 객체를 이용해서 생성하는 방법이 있다.check_circle Checkeval()이란 함수를 사용해서 동적변수를 생성할수도 있다. 하지만, 문자열로부터 eval()을 실행하는 것은 해커가 위험한 코드를 사용할 수도 있기 때문에 엄청나게 위험하다. 배열로 동적변수 만들기key값으로 변수명을 생성하고 value값으로 내용을 넣는다. var test = [];for (var i = 1; i test1: "테스트1"test2: "테스트2"test3: "테스트3"test4: "테스트4"test5:..reviews calendar_month 2024.11.20
-
-
Skill/HTMLHTML - 폼 태그 label, fieldset, legendlabel 태그폼 요소 , , 등에 대한 설명이나 이름을 제공하기도 하고 해당 요소를 클릭 할 수 있도록 한다. for 속성을 사용하여 연결된 요소의 id를 지정하면 스크린 리더 사용자나 키보드 사용자에게 요소와의 관계를 명확히 전달할 수 있다. 태그 내부에 폼 요소를 포함시켜 사용 할 수도 있다. 버튼이나 버튼을 사용할 때 단순히 버튼 영역에서만 작동 되는것이 아니라 태그에 포함된 영역에서 함께 작동된다. 태그는 폼 요소의 목적을 보다 명확하게 이해할 수 있도록 도와주기 때문에 접근성 향상에 도움이 된다. 예시태그 내부에 폼 요소 포함 이름: 태그에 for 속성 사용이름: fieldset 태그 + legend 태그폼에서 입력 요소들을 그룹으로 묶을때 사용되는 태그이다. 여러 입력..reviews 2 calendar_month 2024.07.31
-
-
Skill/JavascriptJS/jQuery - 0부터 숫자 증가하는 카운트 애니메이션 (+ 스크롤 도달 했을 때 작동)숫자 카운트0부터 100까지 숫자를 카운트 하거나 천단위나 소수점자리까지 숫자를 카운트 할 수 있다. 응용하면 스크롤해서 해당 페이지에 도달했을때 카운트를 시작 할 수도 있다. 제이쿼리 animate 메소드를 사용하면 어렵지 않게 구현할 수 있다. $('.count-num').each(function(index) { var $this = $(this); var countFrom = $this.attr('data-from'); var isComma = /^[0-9]+\.?[0-9]+$/; var countTo = $this.attr('data-count'); var speed = Math.floor($this.attr('data-duration')); var num; $({ val: cou..reviews calendar_month 2024.07.14
-
Skill/JavascriptJS/jQuery - 콘텐츠 요소(html, text, node) 다루기 총 정리✨웹 개발에서 HTML 요소를 동적으로 조작하는 것은 필수적이다. 콘텐츠 요소를 삽입, 수정하는 함수는 HTML을 포함한 콘텐츠를 모두 삽하는 함수와 HTML태그 없이 텍스트만 삽입하는 함수, 그리고 요소(Node)를 삽입하는 함수로 나눌 수 있고 콘텐츠를 제거하거나 복사할 수도 있다. 바닐라 스크립트❣️콘텐츠 요소 삽입하기콘텐츠 요소를 삽입하는 바닐라 스크립트 함수함수설명기존내용유지innerText텍스트 삽입 (보이는 것만)❌textContent텍스트 삽입 (숨겨진 것도 포함)❌append()맨 뒤에 노드 또는 텍스트 삽입✅appendChild()맨 뒤에 노드만 삽입✅prepend()맨 앞에 노드 또는 텍스트 삽입✅innerHTMLHTML 포함하여 내부 변경❌outerHTML자기 자신의 HTML까지 ..reviews calendar_month 2024.07.11
-
-
Skill/JavascriptJS/jQuery - 스크립트로 inline-style, css (변수 포함) 제어하기Style 제어하기웹페이지에서 스크립트로 요소의 스타일을 동적으로 제어할 수 있다. 값을 가져올 수도 있고, 추가 하거나 제거 할 수도 있다. 버튼을 클릭하면 변경되어야 하는 경우처럼 필요에 따라 사용할 수 있다. 바닐라 스크립트// window.getComputedStyle() 메소드로 전체 CSS 변수의 현재 값을 가져옴.const rootStyles = window.getComputedStyle(document.documentElement);// getPropertyValue 메소드로 변경 할 변수 또는 속성값을 선택.const mainColorValue = rootStyles.getPropertyValue('--main-color');const heightValue = rootStyles.get..reviews calendar_month 2024.07.05
-
-
Skill/JavascriptJS/jQuery - 특정 문자 제거&변경(모두, 일부, 대소문자) : replace()replace()문자열에서 특정 부분 문자열을 다른 문자열로 대체하는 함수. 원본 문자열을 변경하는 것이 아니라 새로운 문자열을 반환한다. 바꾸고자 하는 문자열(substr)과 대체할 문자열(newSubstr)을 지정할 수 있다. 대체할 문자열을 빈칸으로 지정하면 특정 문자는 제거된다. 만약, 특정 문자를 모두 대체하려면 정규식을 이용한다.let newStr = str.replace(substr, newSubstr) 예시특정 문자 제거하기/변경하기let str = "Hello, world! Hello, everyone!"//제거하기let newStr = str.replace("Hello", "");//변경하기let newStr = str.replace("Hello", "Hi");// , world! H..reviews calendar_month 2024.06.23
-
-
