[내일배움캠프 본캠] 6/24 TIL

 

Framer 1일차

토스

리멤버

등등

 

New project

 

인터페이스 > 메뉴 >인서트(많은 에셋)

 

Size

Fixed 300px

add Stack

300fixed> 패딩> 색상>

Relative 80%

부모박스 안에서의 80퍼센트만 채운다는 개념

 패딩값이 들어가면 그거 제외하고 채워진다

Fill

텍스트같은거 fill로 해야 반응형으로 좋음

Fit

---

 

Position

!캔버스 자체가 스택이 되어있어야 다 설정가능!

 

Relative

화면 흐름대로 쌓임

디폴트의 고정값

Sticky

스크롤하다 특정 위치에 도달하면 고정

 Top에서 조정

!부모박스 오버플로우가 Visible이 되야함!

<Overflow>

넘치다는 뜻으로, CSS에서 요소의 크기를 넘어서는 범위를 어떻게 처리할 건지 말하는 거예요.

• Overflow: Visible 넘치는 걸 보여준다.
• Overflow: Hidden 넘치는 걸 숨긴다.
• Overflow: Scroll 넘치는 걸 요소 안에서 스크롤링 될 수 있게 한다.

피그마의 Clip Content랑 약간 비슷하다고 보면 좋을 거 같아요!

Absolute

원하는 곳에 자유롭게 이동

 부모박스에 붙는다

constraint? 포지션 어디에 고정되었으면 좋겠다

Absolute는 부모박스 안에 포지션으로 top,left,right,bottom에 값을 넣어 고정할 수 있어요! 이걸로 반응형이 가능합니다. (피그마의 Constraints와 같은 기능)

Fixed

고정

---

 

Distribute

체크가 많이사용

---

 

Card UI

Border

스토로크

4번 카드

디렉션>  vertical

이미지 fill?> 360정도로

앱솔루트로 변경

스택> 패딩

 

---

 

Button 컴포넌트

creative Component

primary의 컴포넌트가 수정되면 다 수정됨!

enabled/disable

primary 누르면 hover/pressed 만들 수 있음

 

 

1일차 : Framer 이해하기

1. 1강 이해

• [ ✅] 랜딩 페이지의 목적과 필요성에 대해 알고 있다.
• [ ✅ ] Framer가 주로 사용되는 활용 방법에 대해 알고 있다.
• [ ✅ ] Framer 인터페이스의 기본 구조를 이해하고 사용할 수 있다.
• [ ✅ ] Framer와 Figma의 차이를 알고 비교할 수 있다.

1. 아래에서 학습을 완료한 항목을 체크해주세요.

• 개념
• [ ✅ ] Frame
• [ ✅ ] Stack
• [ ✅ ] Width - Fixed
• [ ✅ ] Width - Fit
• [ ✅ ] Width - Fill
• [ ✅ ] Position - Relative
• [ ✅ ] Position - Absolute
• [ ✅ ] Position - Fixed
• [ ✅ ] Position - Sticky
• [ ✅ ] Distribute - Start
• [ ✅ ] Distribute - Center
• [ ✅ ] Distribute - End
• [ ✅ ] Distribute - Space between

 

• Framer 실습
• [ ✅ ] 폰트 설정과 업로드
• [ ] Element (Icons, Media, Forms, Interactive, Social, Utility, Creative)
• [ ✅ ] Size 실습 (Fit / Fill / Fixed)
• [ ✅ ] Position 실습 (Relative / Absolute / Fixed / Sticky)
• [ ✅ ] Distribute 실습 (Start / Center / End / Space Between)
• [ ✅ ] Button 컴포넌트 - 상태구성 (Default / Hover / Pressed)
• [ ✅ ] Button 컴포넌트 - Cursor 설정
• [ ✅ ] Button 컴포넌트 - Primary 설정
• [ ✅ ] Card UI 5가지 예제

 

• 학습에 필요한 자료
• [ ✅ ] 학습에 필요한 자료 다운받기

 

 

미니 프로젝트(2) 피드백 수정 추가 및 회고

2025.06.24 - [내일배움캠프 본캠프/6월] - 미니 프로젝트(2) 회고

미니 프로젝트(2) 회고