Ninny Design

사이트 추천

DreaminaCapCut에서 개발한 AI 기반 이미지 생성 및 편집 도구로, 텍스트 프롬프트나 기존 이미지를 활용하여 고품질의 시각 자료를 손쉽게 제작할 수 있다. 생성한 콘텐츠의 라이선스는 어떤 이유로든 유효하며 누구나 상업적인 목적을 포함한 모든 목적으로 사용할 수 있다. Dreamina dreamina.capcut.com ImageFXGoogle의 AI 실험 플랫폼인 labs.google/fx의 일부로 제공되며, 이 플랫폼에서는 ImageFX 외에도 MusicFX, VideoFX, Whisk와 같은 다양한 AI 기반 창작 도구가 있다. MusicFX는 음악, VideoFX는 비디오, Whisk는 이미지 등을 생성하고 편집할 수 있다. 라이선스 범위는 전 세계적, 비독점적, 무상으로 전세계 누..

reviews 0 calendar_month 2025.02.07

Javascript

JS/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 0 calendar_month 2024.11.20

EditPlus

EditPlus - 에디트플러스 소스 코드 자동 정렬

소스 코드 자동 정렬에디트플러스에는 소스 코드를 자동으로 정렬 해주는 기능이 없기 때문에 편의상 기능을 추가해줘야 한다. 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

사이트 추천

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

라이브러리

스크롤을 부드럽게 해주는 라이브러리

lenisDarkroom Engineering에서 만든 웹사이트에 매끄러운 스크롤 효과를 제공하는 라이브러리이다. 트랙패드나 마우스 휠을 사용하는 다양한 디바이스에서 일관되게 보여진다. 개발자 및 디자이너들은 이 라이브러리를 사용해 애니메이션 끊김이나 지연 문제를 해결하고 더욱 자연스러운 웹 애니메이션을 구현할 수 있다. 사용법라이브러리 추가하기 태그 사이에 입력한다.파일 직접 다운로드하기 https://github.com/darkroomengineering/lenis js 작성하기 태그 사이, 또는 외부 scipt파일에 입력한다//기본const lenis = new Lenis();function raf(time) { lenis.raf(time); requestAnimationFrame(r..

reviews 0 calendar_month 2024.08.21

HTML

HTML - 웹 접근성을 고려하여 table 제대로 사용하기

table데이터를 행(row)과 열(column)로 정리하여 표 형식으로 나타낼때 사용된다. 구조화된 데이터를 시각적으로 전달할 때 유용하다. 웹 접근성을 고려하여 작성해야 스크린 리더가 데이터를 분석하여 사용자에게 전달할 수 있고 SEO에도 유리하다. html table 태그제목설명필수여부caption테이블의 목적이나 요약Ocolgroup테이블의 열 그룹 정의Xthead테이블 열(column)의 머리글이나 제목Otbody주요 데이터Otr테이블의 행(row)Oth테이블 행의 헤더Oscopeth가 어떤 데이터셀과 연관되어 있는지 지정 (가로 or 세로)O caption웹접근성을 위해 필수로 작성해야 하지만 필요없는 디자인이라면 display:none; 으로 숨기지 않고 overflow:hidden; 등..

reviews 0 calendar_month 2024.08.17

HTML

HTML - 폼 태그 label, fieldset, legend

label 태그폼 요소 , , 등에 대한 설명이나 이름을 제공하기도 하고 해당 요소를 클릭 할 수 있도록 한다. for 속성을 사용하여 연결된 요소의 id를 지정하면 스크린 리더 사용자나 키보드 사용자에게 요소와의 관계를 명확히 전달할 수 있다. 태그 내부에 폼 요소를 포함시켜 사용 할 수도 있다. 버튼이나 버튼을 사용할 때 단순히 버튼 영역에서만 작동 되는것이 아니라 태그에 포함된 영역에서 함께 작동된다. 태그는 폼 요소의 목적을 보다 명확하게 이해할 수 있도록 도와주기 때문에 접근성 향상에 도움이 된다. 예시태그 내부에 폼 요소 포함 이름: 태그에 for 속성 사용이름: fieldset 태그 + legend 태그폼에서 입력 요소들을 그룹으로 묶을때 사용되는 태그이다. 여러 입력..

reviews 2 calendar_month 2024.07.31

HTML

HTML - 유튜브 iframe 연속재생, 자동재생, 컨트롤러, 아이폰 전체화면

유튜브 iframe웹사이트에 YouTube 동영상 플레이어를 퍼가고 JavaScript를 사용하여 플레이어를 제어할 수 있다. 동영상을 재생, 일시중지 또는 중지하거나, 플레이어 볼륨을 조정하거나, 재생 중인 동영상에 대한 정보를 가져올 수 있다. 또한 플레이어 상태 변경 또는 동영상 재생 품질 변경과 같은 특정 플레이어 이벤트에 대한 응답으로 실행되는 이벤트 리스너를 추가할 수 있다. 예시 자동재생src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&autoplay=1&mute=1" 반복재생src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&loop=1" 자동재생..

reviews 0 calendar_month 2024.07.24

Javascript

JS/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 0 calendar_month 2024.07.14

Javascript

JS/jQuery - 콘텐츠 요소(html, text, node) 다루기 총 정리✨

웹 개발에서 HTML 요소를 동적으로 조작하는 것은 필수적이다. 콘텐츠 요소를 삽입, 수정하는 함수는 HTML을 포함한 콘텐츠를 모두 삽하는 함수와 HTML태그 없이 텍스트만 삽입하는 함수, 그리고 요소(Node)를 삽입하는 함수로 나눌 수 있고 콘텐츠를 제거하거나 복사할 수도 있다. 바닐라 스크립트❣️콘텐츠 요소 삽입하기콘텐츠 요소를 삽입하는 바닐라 스크립트 함수함수설명기존내용유지innerText텍스트 삽입 (보이는 것만)❌textContent텍스트 삽입 (숨겨진 것도 포함)❌append()맨 뒤에 노드 또는 텍스트 삽입✅appendChild()맨 뒤에 노드만 삽입✅prepend()맨 앞에 노드 또는 텍스트 삽입✅innerHTMLHTML 포함하여 내부 변경❌outerHTML자기 자신의 HTML까지 ..

reviews 0 calendar_month 2024.07.11

CSS

CSS - 텍스트 세로로 작성하기 writing-mode

writing-mode텍스트와 블록 요소의 내용 흐름 방향을 설정하는 데 사용된다. 수평, 수직, 왼쪽으로 오른쪽으로, 오른쪽에서 왼쪽으로 등의 디자인적으로 글을 써야 할 때 방향을 지정해주면 된다.horizontal-tb수평방향왼쪽에서 → 오른쪽으로위에서 → 아래로기본값vertical-rl수직방향위에서 → 아래로오른쪽에서 → 왼쪽으로일본어, 중국어, 한국어 등에서 세로쓰기 방식에서 주로 사용영문은 180deg 회전한 형태로 첫번째 줄이 오른쪽에서 시작한다.vertical-lr수직방향위에서 → 아래로왼쪽에서 → 오른쪽으로영문은 180deg 회전한 형태로 첫번째 줄이 왼쪽에서 시작한다. horizontal-tb vertical-rl vertical-lr

reviews 0 calendar_month 2024.07.09

Javascript

JS/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 0 calendar_month 2024.07.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

닌니디자인의 포스팅을 검색 해주세요.

Ninny Design 전체 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역