fullstack-study

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 mdn calc CSS 속성의 값으로 계산식을 지정 mdn object-fit 나 요소와 같은 대체 요소의 콘텐츠 크기를 조절 mdn object-position 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다 mdn mask 이미지를 마스킹하거나 클리핑하여 요소를 숨김 mdn svg 벡터 기반 그래픽 mdn @impoert css 처리 mdn 1. clip-path 형식 clip: clip-source|basic-shape|margin-box|border-box|padding..

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

포토샵 기초 1 새로운 캔버스 시작 : p20 Name : 새 창의 이름 지정 Width : 작업창 너비와 너비 단위 선택 Height : 작업창 높이와 높이 단위 선택 Resolution : 이미지 해상도 지정 Color Mode : 색상 모드 지정 Background : Contents 바탕화면 색상 선택 이미지 확장자 : p25 psd, gif , jpg , png 1. 인터페이스 색상변경 [Edit]-[Preferences]-[Interface] 메뉴 선택 -> [Preferences]-[Appearance]에서 인터페이스 색상 변경 [Edit]-[Preferences]-[Workspace] -[open Documents as Tabs] [Edit]-[Preferences]-[Units & Rul..

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

제어문  1. 조건문 : 조건에 따라 처리하는 명령을 달리하는 문장 2. 반복문 : 일정한 조건이 충족될 때까지 동일한 명령을 반복적으로 처리하는 문장3. 분기문 : 강제로 명령의 처리 순서를 바꾸는 문장 조건문if 문 if ~ else 문 if ~ else if ~ else 문 switch 문  반복문 for 문 while 문do ~ while 문  분기문 break continue  조건문1. if 문 형식if( 조건식 ) { 조건식이 참이면 실행되는 코드 }  예) Ex01public class Ex01 { public static void main(String[] args) { int num = 10; if (num > 15) { System.out.pr..

피그마 유용한 플러그인  # 플러그인 설명 플러그인은 피그마의 디자인 생산성을 높여주는 대표적은 부가 기능입니다. 아이콘, 브래드 로고, 컬러, 더미 텍스트, 이미지제공, 누끼 이미지(배경이미지 삭제), 엑셀 작업 등 다양한 플러그인이 있으며 디자인 작업 시 플러그인을 활용하면 작업시간을 많이 단축할 수 있어 일의 능률을 높여줍니다.  플러그인은 프로그램을 별도로 설치하지 않아도 웹에서 바로 사용가능하며 반복 작업이 많은 경우는 사용자 인터페이스에 저장하는 것을 추천합니다.  # 플러그인 상단 도구 메뉴에서 Resources 메뉴를 선택합니다.탭 메뉴 중 중간에 있는 Plugins 탭을 선택합니다.Search all plugins의 검색창에 원하는 플러그인 명을 입력하고 검색을 합니다.     1. 이미..

오토 레이아웃 알아보기 오토레이아웃 정의오토 레이아웃은 각각의 요소를 프레임으로 묶어 요소 간의 일정한 간격을 자동으로 변경하는 피그마 기능입니다.오토 레이아웃을 설정하는 방법은 하나 또는 하나 이상의 요소를 선택한 후 마우스 오른쪽 버튼 클릭 [ Add auto layout ] 선택하거나 디자인 탭의 [ Auto layout ]에서 +를 클릭하면 됩니다. 오토 레이아웃은 프레임을 기반으로 작동하기 때문에 프레임이 아닌 일반 요소에 오토 레이아웃을 추가하면 자동으로 프레임이 생성됩니다. 오토 레이아웃은 각각의 요소를 프레임으로 묶어 요소 간의 간격을 자동 혹은 직접 수치 입력하여 변경합니다. 오토 레이아웃의 적용된 요소를 컴포넌트화 하면 디자인 작업물의 간격을 수정하거나 관리할 때 마스터 컴포넌트의 오토..