coding

HTML details 태그

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

HTML strong 태그

이 글은 코딩에브리바디(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' 태그 유형 중에서 세 번째 요소 /* 의 ..

배열에서 sort() 함수는 주어진 원본 배열 요소를 정렬합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 특징기본 정렬은 각 요소를 문자열로 변환한 뒤 유니코드 코드 포인트 값의 정렬 순서를 따릅니다.필요에 따라 콜백 함수를 전달하여 정렬 기준을 지정할 수 있습니다.이 함수는 주어진 원본 배열을 직접 수정하며, 새로운 배열을 반환하지 않습니다.기본 예제/* 기본 정렬: 문자열 배열을 유니코드 코드 포인트 순서로 정렬하는 예제 */const enStrings = ["d", "b", "c", "a"];enStrings.sort();console.log(enStrings); // ["a", "b", "c", "d"]/* 콜백 함수를 사용해 숫자의 크기 기준으로..

n 번째 자식 요소 선택:nth-child(n)은 부모의 자식 중 순서가 n 번째인 요소를 선택하는 가상 클래스입니다. 예를 들어, :nth-child(3)는 자식 중에서 3 번째에 위치한 요소를 선택합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 기본 예제 li li li li liol > :nth-child(2) { /* 자식 중에서 2 번째에 위치한 요소를 선택 */ background-color: yellow;} 구문/* 양의 정수: n 번째 */:nth-child(1) /* 임의의 자식 중에서 첫 번째 요소 선택 */ li:nth-child(1) /* 임의의 자식 중에서 첫 번째인 요소 선택 */ :nth-ch..

문자열을 분리해서 배열로 반환split() 함수는 주어진 문자열을 지정한 구분자나 정규 표현식을 기준으로 나누어 새로운 배열로 반환합니다.이 함수는 규칙에 따라 분리한 문자열을 처리하거나, URL 분석 등에서 유용하게 사용됩니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 특징문자열이 분리되어 배열의 각 요소로 구성됩니다.새로운 배열을 반환하므로 원본 문자열은 변경되지 않습니다./* 특정 구분자를 사용한 문자열 분리 */const sentence = "자바스크립트는 클라이언트 측 스크립팅 언어입니다.";const wordsArray = sentence.split(" "); // 공백을 기준으로 문자열을 배열로 나눔console.log(wordsArray);/..

PHP의 슈퍼글로벌 변수는 코드 전체에서 사용할 수 있는 특별한 내장(built-in) 변수입니다. PHP에 슈퍼글로벌 변수는 9개($_GET, $_POST, $_SERVER, $_COOKIE, $_REQUEST, $_FILES, $_SESSION, $_ENV, $GLOBALS)가 있습니다. 이 글에서는 슈퍼글로벌 변수의 사용법, 활용 방법, 중요성, 주의 사항을 상세히 설명합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 슈퍼글로벌 변수(Superglobals)슈퍼글로벌 변수는 PHP에서 글로벌 범위(글로벌 스코프, Global Scope)에서 사용할 수 있는 특수한 변수입니다. 슈퍼글로벌 변수는 어디에서나 사용할 수 있기 때문에 이름에서 알 수 있듯이 ..

배열에서 reduce() 함수는 배열을 순회하면서 콜백 함수를 사용하여 배열을 하나의 값으로 반복적으로 줄여(reduce) 단일 값으로 반환합니다. 이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다. 특징배열의 요소를 순회하며 하나의 값으로 줄이는 로직을 콜백 함수에 작성합니다.각 단계에서 줄인 값은 return 키워드로 반환됩니다.반환된 값은 다음 순회에서 누적 값으로 사용되며, 같은 로직으로 계속 줄입니다.원본 배열은 그대로 유지되며, 최종적으로 반복적으로 줄인 단일 값이 반환됩니다.예제/** * reduce() 함수를 사용해서 * 배열의 모든 요소를 더해 누적된 하나의 값을 생성하는 예제 */// reduce() 함수를 적용할 배열const numbers = [..