'분류 전체보기' 카테고리의 글 목록 (2 Page)

Skill/CSS

mix-blend-mode요소의 배경과 부모 요소 또는 뒤에 있는 요소 간의 색상을 어떻게 혼합할지를 지정하는 속성. 이를 통해 이미지나 텍스트가 배경과 조화를 이루도록 시각적인 효과를 낼 수 있다.normal기본값으로, 혼합 없이 원래 색상을 그대로 표시한다.multiply배경과 요소의 색상을 곱하여 어두운 색상이 나타난다.screen배경과 요소의 색상을 반대로 곱해 밝은 색상이 나타난다.overlaymultiply와 screen을 결합한 효과로, 어두운 부분은 더 어둡게, 밝은 부분은 더 밝게 만든다.darken두 색상 중 더 어두운 색상을 표시한다.lighten두 색상 중 더 밝은 색상을 표시한다.color-dodge배경 색상을 더 밝게 한다.color-burn배경 색상을 더 어둡게 한다.hard-..

reviews calendar_month 2024.07.03

Tip/사이트 추천

자주 쓰는 상업용 무료 아이콘 폰트 사이트 모음

Font Awesome (폰트어썸)다양한 크기와 색상으로 쉽게 커스터마이징할 수 있는 확장 가능한 벡터 아이콘을 제공한다. 무료 버전과 유료 버전(Pro)을 제공하며, Pro 버전에는 더 많은 아이콘과 추가 기능이 포함되어 있다. Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 아이콘 사용방법 사이에 cdn을 추가한다. 원하는 디자인의 아이콘을 검색한다. 검색결과에서 원하는 아이콘을 클릭한다.HTML, REACT, VUE, SVG 등 원하는 방법을 선택하여 복사..

reviews calendar_month 2024.07.01

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

Tip/라이브러리

스크롤 바 내렸을 때 요소가 등장하는 애니메이션 플러그인 Scroll Reveal, Animate On Scroll

Scroll Reveal페이지를 스크롤할 때, 특정 요소들이 부드럽게 화면에 나타나거나 사라지는 등의 다양한 애니메이션 효과를 구현할 수 있다. 직관적이고 간단한 API를 제공하여, 원하는 애니메이션을 쉽게 설정하고 적용할 수 있다. 요소가 화면에 나타날 때 페이드 인(fade-in) 효과를 주거나, 특정 방향으로 슬라이드 인(slide-in) 하는 등의 동작을 간단한 코드로 구현할 수 있다. 가벼우면서도 성능이 뛰어나, 다양한 웹사이트에 적용이 가능하다. 또한, 반응형 디자인을 지원하여, 다양한 기기에서 일관된 애니메이션 효과를 제공한다.wb_incandescent Tip2버전까지는 무료, 3버전부터는 유료로 사용해야 한다. 무료버전 최상위 버전은 v2.3.2이다. 사용법라이브러리 추가하기 태그 사..

reviews 1 calendar_month 2024.06.17

Tip/라이브러리

애니메이션 효과가 있는 차트, 그래프 그리기 chart.js(v4.4.3) 플러그인 사용법

chart.js다양한 차트를 쉽게 생성하고 커스터마이즈 할 수 있다. 반응형이며 MIT라이선스로 오픈소스이다. 자주 사용되는 차트 유형, 플러그인을 제공하고 사용자가 직접 정의 할 수 있다. 기본 제공 차트 유형 세트 외에도 커뮤니티에서 유지 관리하는 추가 차트 유형을 사용할 수 있다. 여러 차트 유형을 결합할 수 있다. 주석 생성, 확대/축소, 드래그 앤 드롭 기능 등 다양한 기능을 제공한다. chart.js 사용법HTML, JavaScript를 사용하여 chart.js를 구현할 수 있다. 라이브러리 추가하기 태그 사이에 입력한다.파일 직접 다운로드하기 https://github.com/chartjs/Chart.js/releases/tag/v4.4.3 html 작성하기 태그 사이에 입력한다 ..

reviews calendar_month 2024.06.13

Skill/PHP

PHP - 배열 확인 함수 : is_array(), in_array()

is_array()주어진 변수가 배열인지 확인하는 함수. 매개변수로 전달된 값이 배열이면 true를 반환하고, 그렇지 않으면 false를 반환한다. bool is_array(mixed $value)check_circle Check빈 배열을 포함하여 배열을 가리키는 모든 변수에 대해 true를 반환하기 때문에 주의가 필요하다. 예시$a = array(1, 2, 3);$b = array();$c = [1, 2, 3];$d = [];$e = array('name' => 'foo', 'age' => 30);$f = ['name' => 'foo', 'age' => 30];$g = true;$h = '문자열';var_dump(is_array($a));var_dump(is_array($d));var_dump(is_..

reviews calendar_month 2024.06.10

Skill/CSS

CSS - 다각형(삼각형/오각형/팔각형/별/하트) 만들기

borderHTML 요소의 테두리를 설정하는 속성. border-width, border-style, border-color의 속성이 있고 각각 테두리의 두께, 모양, 색상을 조절한다. border-left, border-top, border-right, border-bottom 속성들을 이용하면 각각의 테두리 면을 개별적으로 설정할 수 있기 때문에 border-top-width와 같은 세부속성도 설정할 수 있다. 축약해서 사용시 border: width style color 순으로 입력한다. border-radius 속성은 요소의 모서리를 둥글게 한다.border-width테두리의 두께단위가 있는 수치(px, em, rem 등)이나, 키워드(thin, medium, thick)border-style테두..

reviews calendar_month 2024.06.07

Tip/사이트 추천

상업용 한글 무료 폰트(다운로드/웹폰트) 사이트 모음

눈누폰트상업적으로 이용할 수 있는 한글 폰트는 영문 폰트에 비해 적기도 하지만 알려지지 않은 폰트가 많은데, 눈누는 잘 알려지지 않은 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 많은 사람들에게 소개하기 위해 시작된 사이트. ※ 눈누에 있는 모든 폰트의 지적재산권은 각 폰트 제작사 및 제작자에 있으며, 눈누는 폰트 제작자 및 제작사와 관련이 없음. 폰트 소프트웨어 사용과 취급으로 발생하는 일에 대해서 눈누는 책임이나 의무를 가지지 않는다. 눈누상업용 무료한글폰트 사이트noonnu.cc 구글폰트구글폰트 사이트에서 소개하는 모든 폰트들은 상업적으로 사용할 수 있으며 상업적으로 판매되는 제품에 포함할 수도 있다. 사용 및 재배포 조건이 라이선스에 지정되어 있기 때문이다. 가장 일반적인 라이선스는 ..

reviews calendar_month 2024.06.05

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)특정 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

Tip/라이브러리

input 태그에 달력으로 날짜 넣기 : datepicker.js

datepicker제이쿼리에서 제공하는 날짜 선택 라이브러리. 입력 필드에 직접 날짜를 입력하는 대신, 시각적으로 더 편리한 달력 인터페이스를 통해 날짜를 입력할 수 있기 때문에 직접 입력하는 것 보다 쉽게 입력하고 날짜 입력 형식의 일관성을 유지할 수 있다. input 텍스트 필드에 초점이 맞춰지면 작은 오버레이로 달력 인터페이스가 열린다. 인라인 달력의 경우는 해당 범위에 연결하기만 하면 된다.check_circle Check기본 Datepicker는 기본언어가 영어로 되어있기 때문에 날짜는 물론 달력 순서도 월-일-년도 순이다. 때문에 옵션을 이용해서 한국어로 변환 후 사용하는것이 좋다. 사용법라이브러리 추가하기 태그 사이에 입력한다.파일 직접 다운로드 하기 https://jqueryui.co..

reviews calendar_month 2024.05.24

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

Ninny Design All

티스토리툴바