fullstack-study

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) 리스트 순서 없는 목록 *, +, - 를 이용해서 순서가 없는 목록들여 쓰기를 하면 모양 변경  순서 있는 목록숫자 기입하면 순서가 있는 목록 들여 쓰기를 하면 모양..

# 비구조화 할당 ( 구조분해 ) 문법 비구조화 할당 문법은 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. 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..

# Masonry https://masonry.desandro.com/ MasonryInstall Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works omasonry.desandro.com - CDN https://masonry.desandro.com/#cdn MasonryInstall..

# AOS https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io - CDN - JS 형식 ) 명령어 설명 data-aos 사용할 애니메이션 효과명 data-aos-easing 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) data-aos-anchor 특정한 객체에 anchor를 설정, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정 data-aos-delay 애니메이션 재생 대기시간 설정(default: 0) data-aos-offset 애니메이션 효과가 시작될 객체의 위치 설정 data-aos-durat..

# swiper https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com - CDN https://swiperjs.com/get-started#use-swiper-from-cdn Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavi..

# 플러그인 사이트  http://www.htmldrive.net/ HtmlDrive - Free Dhtml scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library www.htmldrive.net https://www.jqueryscript.net/ Free jQuery Plugins and Tutorials - jQuery Script www.jqueryscript.net # fancybox https://fancyapps.com/ Fancyapps UI | Robust JavaScript UI Component LibraryCarousel Responsive, touch-friendly carousels..