본문 바로가기

전체 글49

Javascript 문자열 검색3. search(), match() search(): 문자열에서 정규 표현식과 일치하는 첫 번째 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다. match(): 문자열에서 정규 표현식과 일치하는 모든 결과를 배열로 반환합니다. 일치하는 것이 없으면 null을 반환합니다. search()사용법: string.search(regexp)문자열에서 정규 표현식과 일치하는 첫 번째 인덱스를 반환합니다.찾지 못하면 -1을 반환합니다.정규 표현식을 사용하여 복잡한 검색을 수행할 수 있습니다.const myString = "Hello, world!";console.log(myString.search(/world/)); // Output: 7console.log(myString.search(/foo/)); // Output: -1  match()사용.. 2024. 4. 28.
Javascript 문자열 검색2. indexOf(), includes() indexOf(): 문자열 또는 배열에서 특정 값의 첫 번째 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다. includes(): 문자열 또는 배열에 특정 값이 포함되어 있는지 확인합니다. 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다. indexOf()사용법: string.indexOf(searchValue, [fromIndex])문자열 또는 배열에서 특정 값의 첫 번째 인덱스를 반환합니다.두 번째 매개변수 fromIndex는 검색을 시작할 인덱스를 지정합니다.찾지 못하면 -1을 반환합니다.const myString = "Hello, world!";console.log(myString.indexOf("world")); // Output: 7console.log(myString.i.. 2024. 4. 28.
JavaScript 문자열 검색. matches() 와 contains() matches()는 요소가 특정 CSS 선택자와 일치하는지 확인하는 메서드입니다. contains()는 문자열에 특정 문자열이 포함되어 있는지 확인하는 메서드입니다.  두 메서드는 서로 다른 용도로 사용됩니다. matches() 메서드 사용법: element.matches(selectorString)  요소가 지정된 CSS 선택자와 일치하는지 확인합니다.일치하면 true, 그렇지 않으면 false를 반환합니다.주로 DOM 요소의 클래스, 태그 이름, 속성 등을 확인할 때 사용합니다. const element = document.querySelector('div.my-class');if (element.matches('div.my-class')) { console.log('The element match.. 2024. 4. 28.
연도카드로 한해의 키워드 알아보기3 연도카드 16 : 탑 (The Tower) 직업: 예기치 않은 변화나 충격적인 사건이 발생할 수 있는 시기입니다. 안정적으로 여겨진 상황이 갑자기 무너질 수 있으므로 유연하게 대처해야 하며 변화를 받아들이고 새로운 기회를 찾아보는 것이 중요한 해 입니다. 사랑: 갑작스러운 문제나 갈등이 발생할 수 있는 시기입니다. 오해나 의견 충돌로 인한 관계의 위기가 발생할 수 있으니, 소통의 중요함을 잊으면 안되는 해 입니다. 금전: 금전적인 위기나 예기치 않은 손실이 발생할 수 있는 시기입니다. 위험한 투자나 무분별한 지출은 피하는 것이 좋으며, 재무적 안정을 위한 계획과 준비가 중요한 시점입니다. 갑작스러운 변화나 충격적인 상황 또는 억압된 상황에서의 벗어남을 의미합니다. 안정적인 것이 무너지지만, 이를 통해 새.. 2023. 10. 2.
연도카드로 한해의 키워드 알아보기2 연도카드 8 : 힘 (Strength) 직업: 내면의 힘과 용기를 발견하고 이를 통해 직업적인 문제나 도전을 극복하는 데 중점을 두는 시기입니다. 그러나 과도한 자신감이나 자만심은 주의해야 합니다. 다른 사람의 의견을 경청하고 협력의 중요성을 인식하는 것을 중요하게 생각해야 하는 해 입니다. 사랑: 강렬한 감성적 연결을 기대할 수 있는 해 입니다. 그러나 상대방을 지배하려는 욕구나 강압적인 태도가 강조되는 시기이기도 합니다. 상대방의 감정과 자유를 존중하는 것이 중요합니다. 금전: 과대망상이나 무리한 투자를 주의해야 합니다. 실제 상황을 객관적으로 평가하고 신중한 결정을 내려야하는 시기입니다. 내면의 힘, 용기, 그리고 극복의 의지가 빛을 발하는 때 입니다. 자신의 힘과 용기를 발견하고 이를 바탕으로 여.. 2023. 9. 17.
자바스크립트에서 인덱스를 찾는 다양한 방법 자바스크립트에서 인덱스를 찾는 일은 프로그래밍 과정에서 흔히 마주치는 일입니다. 그럼 어떻게 다양한 방법으로 인덱스를 찾을 수 있을까요? 지금부터 알아보겠습니다. 배열에서 인덱스 찾기 indexOf 메서드 indexOf 메서드는 배열에서 특정 요소의 첫 번째 인덱스를 반환합니다. 원하는 요소가 배열에 없으면 -1을 반환합니다. let fruits = ["apple", "banana", "cherry"]; console.log(fruits.indexOf("banana")); // 1을 반환합니다. findIndex 메서드 findIndex 메서드는 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다. 조건을 만족하는 요소가 없으면 -1을 반환합니다. let numbers = [2, 4, 6, 8, 10]; l.. 2023. 9. 9.
연도카드로 한해의 키워드 알아보기 연도카드 계산 해당연도 + 양력생일 예) 2017년 6월 16일생 -> 2+0+1+7+6+1+6 = 23 22가 넘을 경우 다시 덧셈 23일 경우 2+3 = 5 만약 22가 나오면 0으로 계산합니다. 연도카드 0 : The Fool 직업: 새로운 시작에는 항상 미지의 요소가 따르며, 잘못된 선택이나 무모한 행동으로 인해 실패할 위험이 있습니다. 새로운 기회를 받아들이되, 준비없이 뛰어들지 않도록 주의가 필요한 시기입니다. 사랑: 새로운 관계나 사랑에 빠질 가능성이 있는 시기입니다. 그러나, 맹목적으로 뛰어들 가능성이 높으므로 감정을 잘 관리하고, 너무 빠르게 관계를 진행시키지 않도록 해야 합니다. 금전: 충동적인 지출이나 무분별한 투자로 인한 손실의 위험이 있습니다. 돈 관련 결정을 내릴 때는 신중히 생.. 2023. 9. 7.
사이즈 관련 속성과 함수 및 위치 값 구하기 offsetWidth / offsetHeight: 요소의 전체 너비 및 높이를 반환합니다. border, padding, 스크롤바의 크기를 포함합니다. const box = document.querySelector('#box'); console.log(`offsetWidth: ${box.offsetWidth}px`); console.log(`offsetHeight: ${box.offsetHeight}px`); clientWidth / clientHeight 요소의 내부 너비 및 높이를 반환합니다. padding은 포함하지만, border, margin, 스크롤바는 포함하지 않습니다. const box = document.querySelector('#box'); console.log(`clientWidth.. 2023. 8. 17.
CSS 논리 방향 속성-Block and Inline CSS 논리 방향 속성은 레이아웃을 논리적으로 제어할 수 있는 논리 속성과 값 입니다. 논리 속성은 해당요소의 물리적인 요소의 방향 속성을 상대적인 방향 속성 값을 통해 정의 합니다. 하나의 사이트에서 글 작성방향이 다양하게 지원되어야 하는 조건이라면 논리 속성값을 통해 width와 height에 대한 값을 정의하여 사용합니다. Block vs. inline 논리 속성 및 값은 흐름 방향을 나타내기 위해 "block"과 "inline"을 사용합니다. 이 용어들의 물리적인 방향은 writing-mode에 따라 다르게 설정됩니다. Block dimension 라인 내 텍스트 흐름에 수직인 방향, 즉 수평 쓰기 방식에서는 수직 차원이며, 수직 쓰기 방식에서는 수평 차원입니다. 가로쓰기로 글이 작성되는 것이 인.. 2023. 8. 13.
scroll-snap scroll-snap-type scroll-snap-type 속성은 스크롤 영역에서 스냅 포인트가 얼마나 정확하게 적용될지를 설정합니다. 스냅 포인트를 적용하는 데 사용되는 정확한 애니메이션 또는 물리 기능은 브라우저에 따라 다릅니다. /* Keyword values */ scroll-snap-type: none; scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* Optional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll.. 2023. 8. 12.
Writing Mode CSS 작성 모드 모듈은 국제 작성 모드를 정의합니다. 이 중에는 왼쪽에서 오른쪽으로 쓰는 방법(라틴 및 인디아 scripts에서 사용), 오른쪽에서 왼쪽으로 쓰는 방법(히브리어나 아랍어 scripts에서 사용), 양방향(왼쪽에서 오른쪽과 오른쪽에서 왼쪽 scripts을 혼합할 때 사용) 및 수직(일부 아시아 scripts에서 사용)방향 작성 방법이 있습니다. writing-mode writing-mode CSS 속성은 텍스트가 가로로 표시되는지, 세로로 표시되는지, 그리고 블록이 쌓이는 방향을 설정합니다. 문서 전체에 적용하려면 루트 요소(HTML 요소는 HTML 문서에서)에 적용해야 합니다. 이 속성은 블록의 흐름 방향을 지정하며, 블록 수준 컨테이너가 쌓이는 방향과 블록 내에서 인라인 수준 콘텐츠가.. 2023. 8. 11.
scroll-behavior scroll-behavior scroll-behavior CSS 속성은 탐색 또는 CSSOM 스크롤링 API로 스크롤링이 트리거될 때 스크롤링 상자의 동작을 설정합니다. 사용자가 수행하는 스크롤과 같은 다른 스크롤은 이 속성에 영향을 받지 않습니다. 이 속성이 루트 요소에 지정된 경우 뷰포트에 적용됩니다. body 요소에서 지정된 이 속성은 뷰포트로 전파되지 않습니다. 사용자 에이전트는 이 속성을 무시할 수 있습니다. /* Keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* Global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: reve.. 2023. 8. 11.

티스토리툴바