Ninny Design

Skill/Javascript

JS/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

Skill/Javascript

JS/jQuery - 새로 고침 시, 뒤로 가기 시, 페이지 이동 시 위치 기억하기 : history, sessionStorage

history브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 기능을 제공한다. 즉, 사용자가 방문한 페이지의 기록을 통해 앞뒤로 이동하거나, 현재 기록을 변경하거나 추가할 수 있다.//새로 고침 시 항상 top:0 위치.history.scrollRestoration = "manual";//default//현재 위치를 기억하여 새로 고침 시 그 자리를 유지.history.scrollRestoration = "auto"; sessionStorage브라우저 세션 동안 데이터를 저장할 수 있는 객체. 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이..

reviews calendar_month 2024.06.03

Skill/Javascript

JS/jQuery - 요소 선택 : 아이디(id), 클래스(class), 네임(name), 태그명(tagname), 부모(parent), 조상(closest), 자손(children), 형제(siblings), 이전(prevSibling), 다음(nextSibling)

특정 요소 (id, class, name, tagname)특정 HTML 요소를 선택하는 방법은 여러 가지가 있다. 주로 요소를 어떻게 선택하고, 어떤 기준으로 접근하느냐에 따라 다르다. 특정요소 - 바닐라스크립트// 특정 id로 선택let element = document.getElementById('myId');// 특정 class로 선택let element = document.getElementsByClassName('myClass');// 특정 name으로 선택let element = document.getElementsByName('myname');// 특정 태그명으로 선택let element = document.getElementsByTagName('div');// CSS 선택자를 사용하여 첫..

reviews calendar_month 2024.05.30

Skill/CSS

CSS - min-content, max-content, fit-content

min-content요소의 콘텐츠가 최대로 줄어들었을 때의 크기. 텍스트나 이미지가 줄어들 수 있는 최소한의 크기다..example { width: min-content;} max-content요소의 콘텐츠가 줄어들지 않고 자연스럽게 늘어났을 때의 크기. 콘텐츠가 차지할 수 있는 최대 크기다..example { width: max-content;} fit-content요소의 크기를 min-content와 max-content 사이에서 적절하게 맞춰준다. 주어진 크기에 맞춰 요소가 축소되거나 확장되며, 특정 크기 범위 내에서 콘텐츠에 맞게 요소의 크기가 조정된다..example { width: fit-content(300px);}

reviews 1 calendar_month 2024.05.29

Skill/Javascript

JS/jQuery - 마우스오버 메소드 : mouseover(), mouseout()와 mouseenter(), mouseleave()

마우스오버란?마우스를 특정 요소 위에 올려놓았을 때 발생하는 이벤트. 이는 웹사이트나 소프트웨어의 인터페이스에서 자주 사용되며, 마우스를 올렸을 때 시각적 피드백을 제공하거나 추가 정보를 표시하는 데 사용된다. 예를 들어, 웹사이트에서 마우스를 버튼 위에 올리면 버튼의 색상이 바뀌거나 툴팁(Tooltip)이 나타나는 경우, 이러한 기능은 사용자가 어떤 요소와 상호작용할 수 있는지 직관적으로 알 수 있다. 마우스오버는 HTML, CSS, JavaScript를 사용하여 구현할 수 있다. mouseover() VS mouseenter()마우스 커서가 특정 HTML 요소 위에 올려질 때 발생. mouseover()document.getElementById('parent').addEventListener..

reviews 3 calendar_month 2024.05.22

Skill/Javascript

JS/jQuery - a태그(anchor) 버튼 클릭시 해당 아이디로 스크롤 부드럽게 이동하기

스크롤 부드럽게 이동웹페이지 디자인중에는 a태그 href링크에 해시태그(#)를 넣어 페이지를 스크롤 하는 방식이 있다. 스크립트 없이 사용하면 애니메이션 효과 없이 한번에 이동한다. 스크립트를 이용하면 스크롤을 부드럽게 이동하는 애니메이션 효과를 적용할 수 있다. 1페이지2페이지3페이지4페이지 바닐라스크립트 제이쿼리

reviews calendar_month 2024.05.16

Skill/PHP

PHP - 반복문 : for(), while(), foreach()

for()지정된 횟수 만큼 코드 블록을 반복 실행한다. 반복횟수가 명확할 때 주로 사용된다. 실행 시키는 조건은 시작값, 종료값, 증감값으로 나누어져 있다.for ($i = 0; $i ";}1번 실행2번 실행3번 실행4번 실행5번 실행6번 실행7번 실행8번 실행9번 실행 for ($i = 10; $i > 1; $i--) { echo $i . "번 실행 ";}10번 실행9번 실행8번 실행7번 실행6번 실행5번 실행4번 실행3번 실행2번 실행 while()주어진 조건이 true일때 코드 블록을 반복 실행한다. 반복 횟수가 명확하지 않고 특정조건이 충족될 때까지 코드를 반복 실행해야 할 때 사용된다.$array = [1, 2, 3, 4, 5];$i = 0;while ($i "; $i++;}12..

reviews calendar_month 2024.05.12

Tip/라이브러리

원형 그래프 애니메이션(숫자, 막대 변환) jQuery 플러그인

jquery-circle-progress원형그래프 플러그인으로 원 안의 숫자와 원형 막대가 변환하는 애니메이션을 구현한다. 직관적으로 진행상황을 보여 줄 수 있는 디자인이라 다양하게 활용 할 수 있다. 여러 옵션을 제공하고 있어 디자인을 커스터마이징 할 수 있고, 반응형으로도 제작 할 수 있다. 사용법$('#circle').circleProgress({ value: 0.75, size: 80, fill: { gradient: ["red", "orange"] }}); 다운로드 및 데모 jquery-circle-progress - jQuery Plugin to draw animated circular progress barsno animation animation progres..

reviews calendar_month 2024.05.11

Skill/Javascript

JS/jQuery - 요소의 높이(height), 넓이(width)

요소의 높이(height)와 넓이(width)속성에 따라 높이값과 너비값을 가져오는 방법이 조금씩 다르다. 바닐라 스크립트와 제이쿼리로 가져오는 방법 또한 다르기 때문에 상황에 따라 알맞는 속성을 사용할 수 있다. 바닐라스크립트// 높이값 가져오기let clientH = element.clientHeight;let offsetH = element.offsetHeight;let scrollH = element.scrollHeight;let rectH = element.getBoundingClientRect().height;let styleH = window.getComputedStyle(element).height;// 넓이값 가져오기let clientW = element.clientWidth;let..

reviews calendar_month 2024.05.07

Skill/PHP

PHP - 문자열에서 HTML, PHP 태그 제거 : strip_tags()

strip_tags()주어진 문자열에서 모든 HTML 및 PHP 태그를 제거하여 순수한 텍스트 데이터만 남긴다. 보안 문제를 방지하거나 사용자 입력값을 정리하는 등의 데이터 처리 작업에 활용할 수 있다.echo strip_tags($string, $allowed_tags); 예시$string = "This is a bold example.";$stripped_string = strip_tags($string);echo $stripped_string;This is a bold example.check_circle Check해당 함수는 XSS 공격을 방지하기 위해서 사용해서는 안된다. 출력 텍스트에 따라 htmlspecialchars() 또는 기타 수단과 같은 더 적절한 함수를 사용해야 한다. $all..

reviews calendar_month 2024.05.01

Skill/PHP

PHP - 현재 날짜, 현재 시간 : date(), format

date()지정된 형식에 따라 날짜와 시간을 형식화하는 데 사용된다. 첫 번째 매개변수 format은 반환할 날짜 및 시간을 표시할 형식을 지정하고, 두 번째 매개변수 timestamp는 선택적으로 특정 시간을 나타내는 Unix 타임스탬프로 기본적으로 현재의 시간을 사용한다. date('Y-m-d H:i:s', $time); format 인자'년도', YearY4자리 년도2024y2자리 년도24oISO-8601 주 번호 지정 연도 (ISO 주 번호 (W)가 이전 또는 내년에 속하는 경우 해당 연도가 대신 사용된다는 점을 제외하면 Y와 동일)2024L윤년여부윤년이면 1, 아니면 0을 반환 '월', MonthF영문 월January ~ DecemberM영문 줄임말 월Jan ~ Decm두자리 월01 ~ 12..

reviews calendar_month 2024.04.26

Skill/HTML

HTML - 텍스트 태그 <b>, <strong>, <i>, <em> 차이

, 텍스트를 굵게 표현하기 위한 용도로 사용되는 태그들로 이 두 태그는 비슷한 기능을 하지만 약간 다르다. 태그는 텍스트를 굵게 표시하는 것 뿐만 아니라 그 텍스트가 중요하거나 강조되어야 할때 사용한다. 반면에 태그는 텍스트를 단순히 굵게 표시하는 것에 중점을 둔다. 시각적 효과를 주는 용도로는 둘 다 사용할 수 있지만, 의미가 있거나 강조하고자 하는 경우에는 태그를 사용하는 것이 스크린리더기를 사용하는 사용자들에게 문법적으로 강조를 해주기 때문에 웹접근성에 유리하다.굵은 글씨 표현굵은 글씨 표현 태그굵은 글씨 표현 태그굵은 글씨 표현 ※ 위에 보이는 예시와 같이 태그와 태그를 사용했을때 시각적으로는 전혀 차이점이 없다. , 텍스트를 기울이게 표현하는 용도로 사용하는 태그들이다. 태그는 텍스..

reviews calendar_month 2024.04.25

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

Ninny Design 전체 글

티스토리툴바