fullstack-study

스타일 등록 및 편집 목차스타일 등록하기스타일 적용하기스타일 편집하기스타일 연결해제 스타일 등록 및 편집하기 스타일 등록이란? 스타일은 프로젝트에서 자주 사용하는 색상, 폰트, 효과, 그리드, 선 등을 등록해서 디자인 작업에 빠르게 적용하는 기능입니다. 색상이나 서체등을 스타일로 등록해 추후 수정 사항에 생겼을 때 등록된 스타일만 수정해서 스타일에 연결된 요소들이 한꺼번에 수정됩니다. - 컬러 스타일에 등록할 컬러 팔레트를 프레임에 준비합니다 1. 등록할 색상을 선택하고 아래 1번을 클릭합니다.2. 컬러스타일 팝업창이 화면에 나타나면 아래 이미지의 2번을 클릭합니다.3. 스타일 이름을 작성합니다. 아래 이미지 3번 4. create style 버튼을 클릭합니다. - 스타일을 만들려면 오브젝트..

Constraints 콘스트레인트   콘스트레인트 속성  * 콘스트 레인트 : 오브젝트의 위치값을 상하좌우로 고정하는 기능     콘스트레인트는 어떤 오브젝트의 위치값을 상하좌우에 강제로 고정하는 기능입니다. 콘스트레인트를 테스트 해보려면 프레임에 아무 도형이나 그리고 프레임을 드래그하여 사이즈를 바뀌어보면 됩니다. 프레임은 부모, 오브젝트는 자식 요소이며 부모가 움직을때 자식이 영향을 받습니다. 바깥쪽의 선을 클릭하면 각각 Top, Right, Bottom, Left 방향에 고정시킬 수 있습니다.피그마에서는 기본값으로  Left, Top에 고정되어 있습니다. Fix position when scrolling을 체크하면 스크롤해도 오브젝트가 같은 위치에 고정됩니다.  아래 예시를 확인해 보세요  1) 수..

variants 베리언트  Variants(베리언트) 기능은 디자인 시스템을 체계적으로 관리하고, 컴포넌트 간의 다양한 변형을 효과적으로 적용할 수 있게 해주는 기능입니다. 디자인에서 반복적으로 사용되는 컴포넌트에 여러 속성이나 상태를 적용해 상황에 맞게 다르게 보이도록 설정하는 데 매우 유용하고 프로젝트의 일관성을 유지하고, 디자인 프로세스를 단순화할 수 있습니다. 하나의 컴포넌트 그룹에 다양한 속성 변화를 적용하여 하나의 컴포넌트를 다수의 상태로 쉽게 변형할 수 있게 합니다. 예를 들어 버튼 컴포넌트를 "기본 상태", "활성화 상태", "비활성화 상태" 등으로 쉽게 나눠 사용할 수 있습니다.Variants는 일종의 '컴포넌트 집합'이며, 같은 구조를 가진 여러 상태를 하나의 그룹으로 묶어 디자인할 수..

프로토타입 구조와 예시  prorotype 프로토 타입이란 디자인한 UI의 흐름과 사용자 경험(UX)을 시뮬레이션하기 위한 도구 사용자 인터페이스(UI) 및 사용자 경험(UX) 디자인 작업을 돕기 위해 개발된 웹 기반 애플리케이션입니다. Figma는 그래픽 디자인, 웹 디자인, 모바일 앱 디자인 등 다양한 디자인 작업에 활용됩니다. Figma 프로토타입은 디자인 요소와 화면 간의 상호작용을 시뮬레이션하고 시각화하는 기능을 제공하고 이를 통해 디자이너와 클라이언트 또는 팀 간의 커뮤니케이션을 강화하고 디자인의 동작과 흐림을 검태 하고 개선할 수 있습니다.  - 스크린 간 전환 시물레이션  : 디자인 화면 간의 이동 및 전환을 시각적으로 시뮬레이션하여 사용자 경험을 평가하고 디자인 결함을 확인할 수 있습니다..

베리어블 사용법  베리어블 컬러  Primary Color: 주 색상으로 가장 많이 사용되는 색상.Primary Light: 주 색상의 밝은 버전.Primary Dark: 주 색상의 어두운 버전.Secondary Color: 보조 색상.Secondary Light: 보조 색상의 밝은 버전.Secondary Dark: 보조 색상의 어두운 버전.Background Color: 배경 색상.Text Primary: 주 텍스트 색상.Text Secondary: 보조 텍스트 색상.Success Color: 성공 메시지나 알림에 사용되는 색상.Warning Color: 경고 메시지나 알림에 사용되는 색상.Error Color: 오류 메시지나 알림에 사용되는 색상.Info Color: 정보 메시지나 알림에 사용되는 색..

Markdown 작성법 vscode extension 설치markdown All in OneMarkdown Preview Enhanced  위키백과바로가기 1) 타이틀제목(Headers): # 으로 시작# 제목# 1개부터개 부터 ~ 6개 까지# h1 ~ # 6개 h6 # 제목1## 제목2### 제목3### 제목4#### 제목5###### 제목6   2) 수평선 - 또는 * 또는 _ 을 3개 이상 작성.단, - 을 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워두어야 함.***---___  3) 줄 바꿈  : 한 줄 처리 4) 리스트 순서 없는 목록 *, +, - 를 이용해서 순서가 없는 목록들여 쓰기를 하면 모양 변경  순서 있는 목록숫자 기입하면 순서가 있는 목록 들여 쓰기를 하면 모양..

window.localStorage localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다.저장한 데이터는 브라우저 세션 간에 공유됩니다.localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)  https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API ..

모듈 module import 혹은 export 구문을 사용 엄격 모드(strict mode)로 동작 export는 변수, 함수 및 클래스를 내보내려면 문을 사용 import문을 사용하여 다른 모듈에서 변수, 함수 및 클래스를 가져오기 type="module" 웹 브라우저에 JavaScript 파일을 모듈로 로드하도록 지시하려면 script 태그에 사용 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import import - JavaScript | MDN 정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다. developer.mozilla.org https://developer.mozilla.o..

생성자함수와 클래스 프로토타입 생성자함수생성자함수 상속클래스클래스 상속 클래스 오버라이딩클래스 get/set  1. Prototype  프로토타입  자바스크립트의 프로토타입(Prototype)은 모든 객체가 상속받는 속성과 메서드를 정의한 객체입니다. 모든 JavaScript 객체는 내부적으로 프로토타입을 가지고 있습니다. 프로토타입은 객체 간의 상속 관계를 정의하고, 객체가 원시적인 값을 가지지 않고 다른 객체를 기반으로 하도록 합니다. 프로토타입은 객체 지향 프로그래밍에서 중요한 개념이며, 상속, 코드 재사용, 객체 지향 디자인 패턴 등을 구현하는 데에 널리 사용됩니다. 상속 (Inheritance): 모든 JavaScript 객체는 다른 객체로부터 상속된 속성과 메서드를 가질 수 있습니다. 객체가 ..

# 비구조화 할당 ( 구조분해 ) 문법 비구조화 할당 문법은 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org 비구조화 할당 ex1) const array = [10, 20]; const [a, b] = array; console.log(a); console.log(b); ex2) const..