fullstack-study

이미지 가져오기, 속성, 이펙트, 마스크 이미지 가져오는 방법 이미지 속성 이미지 자르기이펙트 마스크 만들기마스크 제거하기 1. 이미지 가져오기 무료 이미지 : https://pixabay.com/ 1) 메뉴, 툴- [피그마아이콘] - [file] - [place image]- 단축키 : Ctrl+Shift+k- 도형툴 - [place image] 2) 도형안에 이미지 넣기 3) 여러개의 도형 안에 이미지 넣기 2. 이미지 보정과 속성 1. 이미지 2. 이미지 또는 GIF의 섬네일 3. 불투명도 백분율 값(%) 0% ~ 100% 4. 숨기기 / 보이기 5. [-] 이미지를 제거 6. [+] 추가 7. 이미지, 단색 및 그라디언트에서 색상 스타일을 만들고. 스타일 아..

그룹 프레임 섹션, 펜툴, Boolean operations ( 패스파인더 ), 텍스트  #  그룹(Group) ,  프레임(Frame) , 섹션(Section)  1. 프레임(Frame)설명: 프레임은 피그마에서 가장 기본적인 레이아웃 컨테이너로, 디자인의 개별 요소들을 감싸고 배치할 수 있는 영역을 의미합니다. 프레임은 보통 아트보드(artboard)로 사용되며, 디바이스의 화면 크기나 디자인 시스템의 구성 요소를 정의할 때 사용됩니다.특징:프레임은 디자인 요소(텍스트, 이미지, 기타 오브젝트)를 포함할 수 있으며, 개별 요소들의 위치와 크기를 관리합니다.프레임 내부에 다른 프레임을 중첩시킬 수 있습니다.프레임 자체에 배경색, 그림자, 모서리 곡률 등을 설정할 수 있습니다.자동 레이아웃(Auto La..

프레임, 페이지, 정렬, 편집        # 프레임프레임 프리셋 : 아이폰, 안드로이드, 데스크톱 사이즈 등을 지정합니다. 프레임을 제어하는 기능 외에는 레이어와 동일하게 사용 가능합니다. , Frame , Group , Seciton 가능위치와 사이즈 : 모든 프레임과 레이어에는 위치값(x , y)과 사이즈 (width, height)가 있습니다.  Rotation : 로테이션 각도를 지정합니다. (  360도를 기준으로 , + 양수, 음수 - )가 존재합니다. 360도를 기준으로 입력하면 음수각도와 양수각도를 자동으로 설정해 줍니다.Coner radius: 코너 라운딩 수치를 입력합니다. Clip content : 옵션 체크하면 레이어가 프레임에 걸쳐있을 때 해당 프레임에 잘려서 보입니다 ( css..

화면구조, 메뉴,  룰러, 가이드 캔버스(Canvas):피그마의 핵심 작업 영역으로, 디자인 요소들이 배치되고 편집되는 곳입니다. 프로젝트마다 하나의 캔버스가 있으며, 사용자는 캔버스를 생성하고 필요에 따라 크기를 조정할 수 있습니다. 사용자가 생성한 디자인 요소들을 캔버스에 배치하여 프로토타입을 만들거나 디자인을 완성합니다. 레이어(Layers):캔버스 위에 배치된 개별 요소들(텍스트, 모양, 이미지 등)을 관리합니다. 레이어 패널을 통해 사용자는 캔버스에 배치된 모든 요소들을 확인하고 관리할 수 있습니다. 레이어는 순서대로 쌓이며, 위에 있는 레이어가 하위에 있는 레이어를 가리게 됩니다. 이를 통해 요소들의 배치 순서를 조정할 수 있습니다. 그리드(Grids):디자인 요소를 정렬하고 배치하는 데 도움..

피그마 단축키  Ctrl(cmd)+Shift+/를 누르시면 여러 단축키 확인하기명령어 검색 : ctrl + /이동과 선택:V: 이동 도구 A: 선택 도구 Shift + 드래그: 여러 개의 요소 선택 Ctrl (Cmd) + 드래그: 선택한 요소 이동 시 그리드에 자동 스냅 Alt (Option) + 드래그: 요소를 복사해서 이동편집:Ctrl (Cmd) + C: 복사 Ctrl (Cmd) + V: 붙여넣기 Ctrl (Cmd) + Z: 되돌리기 Ctrl (Cmd) + Shift + Z: 다시 실행 Delete: 요소 삭제 화면 조작:Spacebar: 화면 드래그 Ctrl (Cmd) + +/-: 확대/축소 1: 100% 화면 보기 2: 캔버스에 맞추기 0: 선택한 요소 확대 레이어 및 그룹 관..

가입하기, 피그마 소개 #. 사이트 접속https://www.figma.com/ 엡데이트 이전에 사용중인 분들은  피그마 UI3 베타버전 사용으로 업데이트  #. 가입 ( 이메일가입 )Google 계정Google 비즈니스 계정 등 Google 계정을 갖고 있는 경우 Google 계정 세부 정보를 사용해 Figma 계정에 가입할 수 있습니다.Figma.com으로 이동하여 오른쪽 상단에서 가입을 클릭합니다. 또는 링크(https://www.figma.com/signup)로 직접 이동합니다. 창 상단에서 Google로 계속을 선택합니다.이미 Google에 로그인되어 있다면 세부 정보를 확인하라는 메시지가 표시됩니다.Google에 로그인되어 있지 않다면 표시된 필드에 Google 이메일 또는 전화번호를 입력하고..

비주얼스튜디오 코드설치, 확장 플러그인설치 방법  https://visualstudio.microsoft.com/ko/  Visual Studio: 소프트웨어 개발자 및 Teams용 IDE 및 코드 편집기Visual Studio 개발 도구 및 서비스를 사용하면 모든 개발자가 모든 플랫폼 및 언어로 앱을 쉽게 개발할 수 있습니다. 무료로 어디서나 코드 편집기 또는 IDE를 사용하여 개발하세요.visualstudio.microsoft.com   1. "동의합니다(A)"를 선택 2. "다음(N) >"을 선택해 다음 단계로 이동후 "다음(N) >"을 누르고  "설치(I) "  마지막으로 "종료" 3. 설치완료 후 바탕화면 아이콘 실행  # 확장 플러그인(Extension) 설치 방법비주얼 스튜디오 코드 - 확장..