Ninny Design 전체 글
-
-
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
-
Tool/EditPlusEditPlus - 에디트플러스 소스 코드 자동 정렬소스 코드 자동 정렬에디트플러스에는 소스 코드를 자동으로 정렬 해주는 기능이 없기 때문에 편의상 기능을 추가해줘야 한다. htmlarg 라는 파일을 다운로드한 뒤 원하는 인수를 넣어주면 된다. 추가하는방법1. htmlarg.exe 파일 다운로드 2. 메뉴바의 [도구]에서 기본설정 3. [사용자 도구]에서 추가 > 프로그램 4. 다운받은 htmlarg.exe 파일 선택 5. 인수: 2t D D D $(CurSel)6. 동작: 텍스트 필터로 실행(바꾸기)7. 저장: 현재파일8. 확인 인수설정방법[들여쓰기][코드들여쓰기] [태그리스트1] [태그리스트2] [태그리스트3] $(CurSel)들여쓰기0~9까지의 숫자 (탭문자를 이용할 경우 t)코드들여쓰기~9까지의 숫자 (탭문자를 이용할 경우 t, 코드 정렬을..reviews 3 calendar_month 2024.09.30
-
Tip/사이트 추천100% 상업용 무료 영문 폰트 사이트 모음fontsquirrel무료로 이용할 수 있는 고품질 폰트를 제공한다. 개인 및 상업적 용도로 사용 가능한 폰트를 엄선하여 제공하며, 디자이너와 개발자를 위한 웹 호환 폰트도 지원한다. 또한 웹폰트 생성기(Webfont Generator)를 통해 폰트를 웹에서 사용할 수 있는 형식으로 변환할 수 있으며, 폰트 식별기(Font Identifier) 기능을 통해 모르는 폰트를 찾을 수 있다. Free Fonts! Legit Free & Quality » Font SquirrelHandpicked free fonts for graphic designers with commercial-use licenses.www.fontsquirrel.com colors색조합으로 유명한 사이트지만 폰트까지 무료로 다운로드..reviews 1 calendar_month 2024.09.19
-
-
-
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
