728x90
Ninny Design 전체 글
-
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
-
Skill/CSSCSS - min-content, max-content, fit-contentmin-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/JavascriptJS/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/JavascriptJS/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
728x90