study

fullpage.js  https://alvarotrigo.com/fullPage/ko/ fullPage scroll snapping. Create full screen pages fast and simpleMouse wheel snap to sections. Fast and simple to use.alvarotrigo.com # 옵션  https://github.com/alvarotrigo/fullPage.js?tab=readme-ov-file#options GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simplefullPage plugin by Alvaro Trig..

react 시작 react 개념 컴포넌트컴포넌트종류컴포넌트 이름JSX란JSX 규칙 vscode : 확장프로그램 Reactjs code snippetsCodeSnap 공식문서바로가기바로가기 리액트란리액트(React)는 페이스북에서 개발한 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 리액트는 웹 애플리케이션의 UI를 구성하는 데 사용되며, 단일 페이지 애플리케이션(SPA)부터 모바일 애플리케이션, 데스크톱 애플리케이션까지 다양한 플랫폼에서 사용될 수 있습니다. 리액트의 특징과 장점 컴포넌트 기반 아키텍처(Component-based Architecture): 리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 작성합니다. 각 컴포넌트는 독립적이고 재사용 가능한 모듈로서 ..

카카오 api https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 카카오 주소 api https://postcode.map.daum.net/guide#usage Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net 카카오 맵 API https://apis.map.kakao.com/ https://developers...

스코프  , 호이스팅( hoisting)  , TDZ  스코프( Scope )호이스팅( hoisting )TDZ(Temporal Dead Zone)  1.  스코프(Scope)   스코프(Scope)는 변수 및 함수의 유효 범위를 나타냅니다. 스코프는 코드에서 변수 및 함수에 접근할 수 있는 범위를 결정 하고 변수 및 함수의 충돌을 방지하고 코드의 가독성과 유지 보수성을 향상합니다. 주요한 스코프 유형에는 전역 스코프(Global Scope)와 지역 스코프(Local Scope)가 있습니다. 전역 스코프(Global Scope):전역 스코프는 코드의 어느 곳에서든 접근할 수 있는 스코프입니다.전역 스코프에서 선언된 변수 및 함수는 스크립트의 어디서든 사용할 수 있습니다.전역 스코프에서 선언된 변수는 전역..

Browser Object Model (BOM) JavaScript의 Browser Object Model (BOM)은 웹 브라우저와의 상호작용을 담당하는 객체와 메서드를 제공합니다. 이것은 Document Object Model (DOM)과는 다르며, DOM이 HTML 문서의 구조와 콘텐츠를 다룬다면, BOM은 브라우저와의 상호작용을 다룹니다. window: 전역 window 객체는 브라우저 창을 나타내며, BOM의 루트 역할을 합니다. 브라우저 창을 조작하고, 탐색을 제어하며, 대화상자를 관리하기 위한 속성과 메서드를 제공합니다. navigator: navigator 객체는 브라우저에 관한 정보를 제공합니다. 브라우저의 이름, 버전, 플랫폼 등을 확인하는 데 사용되며, 주로 브라우저의 기능과 기능성을..

form 요소웹 개발에서 사용되는 다양한 HTML 폼 요소들이 있습니다. 이러한 요소들은 사용자로부터 정보를 입력하거나 선택할 수 있도록 합니다. 주요 폼 요소들은 다음과 같습니다텍스트 입력 필드 (Text Input Fields):: 한 줄짜리 텍스트를 입력할 수 있는 상자를 생성합니다. : 비밀번호를 입력받을 때 사용되며, 입력한 문자를 마스킹하여 표시합니다. : 이메일 주소를 입력받을 때 사용됩니다.: 숫자 값을 입력받을 때 사용됩니다. : 전화번호를 입력받을 때 사용됩니다. , , : 각각 날짜, 시간, 날짜와 시간을 입력받을 때 사용됩니다.텍스트 여러줄:: 여러 줄의 텍스트를 입력할 수 있는 상자를 생성합니다.선택 입력 필드 (Select Fields):: 드롭다운 목록을 생성합니다.  요소를 ..

정규표현식 ( 정규식 ) 정규 표현식(regular expression)이란?정규 표현식(Regular Expression)은 문자열을 검색하거나 편집하는 데 사용되는 특수한 문자열 패턴입니다. 이것은 주어진 텍스트에서 원하는 패턴을 찾는 데 도움이 됩니다. 정규 표현식은 다양한 프로그래밍 언어와 텍스트 편집기에서 지원되며, 각 언어 및 편집기에서 약간의 차이가 있을 수 있지만 기본적인 패턴 매칭 및 문자열 검색에 대한 기능은 비슷합니다. 정규 표현식은 일반 문자와 특수 문자를 조합하여 표현되는데, 이들은 다음과 같은 역할을 합니다  일반 문자: 일반적인 문자열을 나타냅니다.메타 문자: 패턴 매칭을 위해 특별히 사용되는 문자입니다. 예를 들어, "."은 어떤 문자와도 일치하고, "*"는 앞선 문자가 0번..

# clip-path, outline, calc, object-fit, mask, svg 속성설명참고clip-path요소의 클리핑 범위를 지정mdn Clip-Path Generator참고outline mdncalcCSS 속성의 값으로 계산식을 지정mdnobject-fit나 요소와 같은 대체 요소의 콘텐츠 크기를 조절mdnobject-position 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다mdnmask 이미지를 마스킹하거나 클리핑하여 요소를 숨김mdnsvg벡터 기반 그래픽mdn@impoertcss 처리mdn스타일 바로가기 1. clip-path 형식clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-b..

table ,form 요소 1. table : 표를 생성하는 최상위 태그입니다.: 표의 제목을 정의합니다. 이 태그는 태그 내부에서 가장 먼저 나와야 합니다.: 표의 헤더 섹션을 정의합니다. 태그와 함께 사용됩니다.: 표의 본문 섹션을 정의합니다. 여러 개의 태그를 포함할 수 있습니다.: 표의 바닥글 섹션을 정의합니다. 요약 정보 등을 나타낼 때 사용됩니다.: 표의 행을 정의합니다. , , 내부에서 사용됩니다.: 표의 헤더 셀을 정의합니다. 태그 내부에서 사용되며, 기본적으로 굵은 글씨체와 가운데 정렬이 됩니다.: 표의 데이터 셀을 정의합니다. 태그 내부에서 사용됩니다. 표(table 요소, tr요소, th요소, td요소)표를 작성할 때는 블록 레벨 요소인 table요소를 사용요소이름설명표(..

Array ( 배열 ) , 메서드   배열이란 같은 형의 데이터를 여러 개 사용할 때 많은 변수를 사용하기보다는 배열을 사용하는 것이 효율적같은 형의 데이터를 하나의 자료구조에 저장할 수 있게 만든 것지정된 자료형과 개수만큼 메모리 공간을 나란히 확보개수의 변경이 불가능함 동일한 데이터 타입의 여러 값을 저장하는 데 사용되는 데이터 구조입니다. 배열은 인덱스(위치)를 사용하여 각 요소에 접근할 수 있습니다. 배열은 일반적으로 고정된 크기를 가지며, 한 번 생성되면 크기를 변경할 수 없습니다. 다른 프로그래밍 언어와 마찬가지로, Java에서도 배열은 참조 형식입니다.배열 변수는 실제로 배열이 저장된 메모리의 주소를 가리키는 참조를 갖습니다. 배열을 생성할 때는 배열의 데이터 타입과 크기를 지정합니다. 예를..