coding

자바스크립트 querySelectorAll

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. querySelectorAll() 함수는 HTML 문서나 특정한 요소 내에서 지정한 CSS 선택자와 일치하는 모든 요소를 반환합니다. 특징HTML 문서나 특정한 요소 내에서 CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환합니다.이 목록은 유사 배열입니다. 이 목록의 요소는 순회를 통해서 특정 작업을 수행할 수 있습니다.일치하는 요소가 없으면 비어있는 NodeList 객체를 반환합니다.Basic Example 김밥 라면 떡볶이 Syntax// HTML 문서 전체에서document.querySelectorAll(selectors)// 특정한 요소 객체 내에서element.que..

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. array_pop() 함수는 배열의 마지막 요소를 제거(pop, 뻥 하고 밀어내듯이)하는 함수입니다. 특징배열의 마지막 요소를 제거합니다.원본 배열 자체를 직접 수정합니다.이 동작으로 배열의 길이가 하나 줄어듭니다.제거된 요소를 반환합니다.기본 예제$array = ['orange', 'banana', 'apple'];// 배열의 마지막 끝의 요소를 제거합니다.array_pop($array);print_r($array);/*출력: Array ( [0] => orange [1] => banana )*/ 반환 값array_pop() 함수로 배열에서 제거한 마지막 요소 값을 반환합니..

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. array_shift() 함수는 배열의 첫 번째 요소를 제거합니다.특징원본 배열 자체를 직접 수정합니다.이 동작으로 배열의 길이가 하나 줄어듭니다.제거된 요소를 반환합니다.기본 예제$array = ['orange', 'banana', 'apple'];// 배열의 시작 부분에서 첫 번째 요소를 제거합니다.array_shift($array);print_r($array);/*출력: Array ( [0] => banana [1] => apple )*/ 반환 값array_shift() 함수로 배열에서 제거한 첫 번째 요소 값을 반환합니다. array_shift() 함수로 제거할 첫 번..

레트로/미니멀 감성;)^_~;-):)^_^^_____^:-):D^0^:-D:(:-(U_UOwOO.O^o^^3^X_XT_T+_+O_O¬_¬=.=^_+^.^*_*^^;^_--_-기쁠 때ヾ(≧▽≦*)oφ(*￣0￣)q(≧▽≦q)ψ(｀∇´)ψ（￣︶￣）↗*^____^*(～￣▽￣)～( •̀ ω •́ )✧[]~(￣▽￣)~*φ(゜▽゜*)♪o(*^＠^*)oO(∩_∩)O(✿◡‿◡)(*^▽^*)（*＾-＾*）(*^_^*)(❁´◡`❁)(≧∇≦)ﾉ(●ˇ∀ˇ●)\^o^/(‾◡◝)╰(*°▽°*)╯o(*￣▽￣*)ブ(^_-)db(-_^)♪(^∇^*)(≧∀≦)ゞo(*￣︶￣*)o( $ _ $ )(☆▽☆)ㄟ(≧◇≦)ㄏ( *︾▽︾)ƪ(˘⌣˘)ʃo(*￣▽￣*)o♪(´▽｀)(^0^* )(≧∇≦)/ヽ(○･▽･○)ﾉ♪♪(´▽｀)ノ\(^o^)/(ﾉ^o^..

원하는 색상을 선택하여 색상 코드를 쉽게 복사해 활용할 수 있는 추천 컬러피커 사이트이다. 코딩에브리바디 한국어 컬러 피커 사이트 컬러 피커(Color Picker, 색상 선택기) - 코딩에브리바디원하는 색상을 선택하여 색상 코드로 가져오는 도구인 온라인 컬러피커(Color Picker, 색상 선택기)입니다. 색상 코드를 확인하고 쉽게 복사해 활용할 수 있습니다.codingeverybody.kr 여기는 코딩에브리바디의 일본어 버전 컬러피커 사이트인거 같다. カラーピッカー（Color Picker、カラー選択ツール） - codingEverybody希望する色を選択してカラーコードを取得できるツールがオンラインカラーピッカー（Color Picker、色選択ツール）です。カラーコードを確認し、簡単にコピーして活用できます。codi..

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 태그는 사용자가 선택하여 열고 닫을 수 있는 콘텐츠를 정의하는 태그입니다. 태그는 일반적으로 추가 정보 또는 세부 정보를 제공하는 데 사용됩니다. 명세서에서는 '사용자가 추가 정보나 컨트롤을 얻을 수 있는 공개 위젯을 나타낸다'라고 정의하고 있습니다. 태그는 주로 accordion 위젯처럼 사용자가 열고 닫을 수 있는 대화형 웨젯을 만드는데 사용됩니다.기본 예제 요약 내용 추가 정보나 세부 내용 사용법 태그를 사용하기 위해서는 태그에 대해 알고 있어야 합니다. 태그는 기본적으로 ►모양의 마커가 표시됩니다. 모든 종류의 콘텐츠를 태그 안에 포함할 수 있지만, 태그를 사용하면 제목(요약 내용)을 나..

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. strong 태그는 해당 내용에 대한 강한(strong) 중요성, 심각성 또는 긴급성을 나타냅니다.특징중요성(Importance): 태그는 제목, 캡션 또는 단락에서 실제로 중요한 부분과 더 자세하거나, 더 유쾌하거나, 또는 단순히 진부한 내용일 수 있는 부분일 수 있는 다른 부분과 구별하는 데 사용할 수 있습니다.심각성(Seriousness): 태그는 경고 또는 주의 사항 등의 심각성을 표시하는 데 사용될 수 있습니다.긴급성(Urgency): 태그는 사용자가 문서의 다른 부분보다 빨리 봐야 하는 긴급한 내용을 나타내는 데 사용될 수 있습니다.예제중요성(Importance): 제목, 캡션, 문단 등에서 중요한 ..

자바스크립트 trim() 함수 – 문자열 앞뒤 공백 제거 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 정의trim() 함수는 주어진 문자열의 양 끝에서 공백을 제거한 새로운 문자열을 반환합니다. 예제const originalString = " 환영합니다. 반갑습니다! ";const trimString = originalString.trim();/* 문자열 중간의 공백은 유지됩니다. 반환만 하기 때문에 원본 문자열은 바뀌지 않습니다. */console.log(trimString); // 출력: "환영합니다. 반갑습니다!"/* 👇 원본 문자열은 바뀌지 않습니다. */console.log(originalString); // 출력: " 환영합니다. 반갑..

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. template 태그는HTML 문서에 자바스크립트를 활용하여 동적으로 복제하고 추가할 수 있는 관련 콘텐츠를 탬플릿으로 보관하는 영역을 나타냅니다. 렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다. 예제 template 태그 렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다. 아이템 추가하기 사용자가 볼 수 있는 부분은 태그와 "렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니..

contenteditable 속성은 요소의 콘텐츠를 편집할 수 있는지 여부를 지정합니다. 이 속성은 true로 설정하면 요소의 콘텐츠를 편집할 수 있고 false로 설정하면 편집할 수 없습니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. contenteditable 속성은 HTML 요소의 글로벌 속성 중 하나로, 사용자가 해당 요소 내부의 텍스트나 콘텐츠를 직접 편집할 수 있도록 해주는 속성입니다. 이 속성을 사용하면 웹 페이지에서 간단한 텍스트 편집을 가능하게 할 수 있습니다. 자바스크립트를 같이 사용하면 인라인 텍스트 편집기도 제작할 수 있습니다. 예제 이 내용을 직접 편집해 보세요. 구문 속성 값true: 요소의 콘텐츠를 사용자가 편집할 수 있는 ..

data-* 속성은 HTML에서 정의된 표준 속성 이외의 HTML 표준 '사용자 지정 데이터 속성'입니다. 이 속성은 data- 접두사와 그 뒤에 원하는 이름을 지정하여 속성의 이름을 만들고, 사용자 지정 데이터를 속성의 값으로 지정합니다. 주로 자바스크립트와 CSS에서 이 속성을 활용하여 동적인 기능을 추가하거나 스타일을 지정하는데 사용됩니다. data 속성은 페이지 또는 응용프로그램에 대한 사용자 지정 '데이터', '상태,' '주석' 등을 저장하기 위한 것으로, 더 이상 적절한 표준 속성이나 요소가 없을 때 사용하는 HTML의 표준화된 속성입니다. 이 속성은 글로벌 속성 중 하나로, 모든 요소에 적용이 가능합니다. 기본 예제 운동화 제품 상세정보 보기 const viewDetails = d..

배열의 요소들을 역순으로 반환 array_reverse() 함수는 주어진 배열의 요소 순서를 역순(reverse)으로 반환합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 구문array_reverse(array $array, bool $preserve_keys = false): array 매개변수$array요소 순서를 역순으로 변환할 배열입니다. $preserve_keys옵션. 기본값은 false입니다.false (기본값): 숫자 키(인덱스)를 다시 생성합니다 (0부터 다시 시작).true: 숫자 키(인덱스)를 원래 번호 그대로 유지합니다.참고: 숫자 이외의 키(연관 배열)는 이 설정의 영향을 받지 않으며, 항상 그대로 유지됩니다.기본 예제$array = ..

배열에서 원하는 값만 걸러내기 배열에서 filter() 함수는 콜백 함수를 사용하여 배열의 요소를 필터링합니다.이 함수를 사용하면 쉽게 배열의 요소 중 원하는 값만 남기도록 필터링할 수 있습니다. 조건을 콜백 함수로 작성하면, 조건에 만족하는 요소만 새로운 배열로 반환합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 구문arr.filter(callbackFn)arr.filter(callbackFn, thisArg) 특징필터링할 조건은 콜백 함수에서 적용합니다. - 조건을 만족하면 true를, 그렇지 않으면 false를 반환하도록 작성해야 합니다.원본 배열은 그대로 두고, 조건을 만족하는 요소로만 이루어진 새 배열을 반환합니다.기본 예제// 필터링할 배열co..

특정 문자열의 첫 번째 등장 위치 찾기문자열 indexOf() 함수는 문자열에서 인수로 전달된 문자열를 찾아 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환하는 함수입니다. 인수로 전달된 문자열를 찾을 수 없다면 -1을 반환합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 특징이 함수는 문자열에서 문자의 위치를 찾거나, 포함하는지 확인할 때 유용합니다.이 함수는 대소문자를 구분합니다.기본 예제const greeting = "환영합니다. 코딩에브리바디입니다.";/* * 주의하세요! * 문자열에서 인덱스는 0부터 시작합니다. * 첫 번째 문자열의 인덱스는 0이고, 두 번째 문자열의 인덱스는 1입니다.*/// 문자열 greeting에서 문자열 "환영합니다."를..

::before 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 앞(before)에 첫 번째 자식처럼 가상의 자식 요소를 생성(generates)하고, 이를 스타일링할 수 있습니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. ::before 가상 요소 선택자의 형식 ::before { content: /* value → 생성하는 가상의 자식 요소 콘텐츠를 지정: 필수 */; /* 생성하는 가상의 자식 요소를 스타일링할 속성들을 지정: 옵션 */} content 속성은 ::before 가상 요소 선택자로 생성되는 가상의 자식 요소 콘텐츠를 지정하는 속성입니다. 필수적으로 지정 기본 예제p::before { content: "👉"; vert..

이모지는 감정, 상황, 개념 등을 표현하기 위해 사용되는 작은 그래픽 아이콘입니다. 흔히 '이모티콘'이라고도 말합니다. 이모지는 주로 텍스트 메시지, 소셜 미디어 게시물, 이메일 등에서 사용되며, 감정이나 의도를 명확하게 전달하거나 대화를 더 재미있게 만들기 위해 사용됩니다. 예를 들면, 😃(웃는 얼굴), 🎉(파티 모자), ❤️(하트) 등이 일반적으로 사용되는 이모지입니다. 이모지를 HTML에 삽입하기HTML을 조금만 이해하고 있으면 HTML의 콘텐츠에 유니코드를 삽입하면 됩니다. 유니코드 값을 직접 HTML 문서의 텍스트 내에 삽입하면 대부분의 브라우저와 운영체제에서 이모지가 올바르게 표시됩니다. 다음은 유니코드를 사용하여 HTML 문서에 이모지를 삽입하는 방법의 간단한 예입니다.웃는 얼굴 이모지:..

문자열에서 slice() 함수는 주어진 문자열의 특정 범위를 잘라내어(slice) 추출한 결과를 새로운 문자열로 반환합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 이 함수는 문자열을 잘라서 추출하는데 매우 유용합니다. 특징지정한 인덱스 범위로 잘라낸 문자열를 새로운 문자열로 반환합니다.인덱스 범위는 매개 변수로 지정한 시작점부터 끝점까지(끝점을 포함하지 않음, 직전까지 추출)입니다.이러한 동작으로 주어진 원본 문자열은 변경되지 않고 그대로 유지됩니다.기본 예제/** * 문자열의 특정 범위를 추출하여 새로운 문자열로 반환하는 함수 * str.slice(beginIndex[, endIndex]) * * @param {number} beginIndex - ..

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 이 연산자는 변수나 값의 데이터 타입을 체크하는데 사용됩니다. 기본 예제let a;console.log(typeof a); // 출력: "undefined"console.log(typeof true); // 출력: "boolean"console.log(typeof 42); // 출력: "number"console.log(typeof "Hello"); // 출력: "string" 이 예제는 typeof 연산자가 주어진 값의 데이터 타입을 나타내는 문자열을 반환하는 방식을 보여줍니다. 반환되는 값은 항상 "undefined", "boolean", "nu..

자바스크립트 toUpperCase 함수toUpperCase() 함수는 주어진 문자열을 대문자로 변환해서 반환합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 특징반환 값은 주어진 문자열을 모두 대문자로 변환한 새로운 문자열입니다.반환만 하기 때문에 원본 문자열은 바뀌지 않습니다.예제const originalString = "Hello, World!";const uppercaseStr = originalString.toUpperCase();console.log(uppercaseStr); // 출력: "HELLO, WORLD!"/* 👇 원본 문자열은 바뀌지 않습니다. */console.log(originalString); // 출력: "Hello, World..

같은 이름 태그 형제 중 첫 번째 요소 선택:first-of-type 가상 클래스 선택자는 특정 유형(태그 이름)의 형제 요소들 중에서만 기준으로 첫 번째에 위치하는 요소를 선택합니다. 특정 유형이란 태그 이름의 유형입니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 예를 들어, p:first-of-type은 같은 부모의 요소들만 세어서 첫 번째 요소를 선택합니다. 'p' 태그 유형 중에서 첫 번째 요소 'div' 태그 유형 중에서 첫 번째 요소 'p' 태그 유형 중에서 두 번째 요소 'p' 태그 유형 중에서 세 번째 요소 'div' 태그 유형 중에서 두 번째 요소 'div' 태그 유형 중에서 세 번째 요소 /* 의 ..