'Skill' 카테고리의 글 목록

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

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

Skill/CSS

CSS - 텍스트에 테두리/외곽선 그리는 두가지 방법 -webkit-text-stroke, text-shadow

-webkit-text-stroke텍스트에 테두리 선을 추가하는 속성. 텍스트 안쪽으로 테두리가 추가된다. 간단하게 테두리 너비와 색상만 지정해주면 된다. 그렇기 때문에 다양한 효과를 구현하기에는 어려움이 있다. 하지만 테두리에만 색상이 추가되기 때문에 텍스트 색상을 투명하게 바꿔주면 테두리만 있는 텍스트 디자인을 할 수가 있다. h1 { -webkit-text-stroke: 1px red; color: transparent; } 예시텍스트 테두리ABCDEFG 텍스트 테두리만ABCDEFG text-shadow텍스트에 그림자를 추가하는 속성. 기본값은 텍스트 바깥쪽으로 그림자를 추가하지만 마이너스(-) 값을 이용하면 텍스트 안쪽으로 그림자를 추가할 수 있다. 입체적인 느낌이나 강조효과를 줄..

reviews calendar_month 2024.04.22

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

Ninny Design Skill

티스토리툴바