인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

현진 심님의 프로필 이미지
현진 심

작성한 질문수

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

그리드 만들기

마켓컬리 그리드 사이즈 알수 있는법

작성

·

305

1

강의 중 타 사이트 ex) 에어비앤비 혹은 마켓컬리 그리드 사이즈는 어떻게 알 수 있었나요?

답변 1

3

에릭님의 프로필 이미지
에릭
지식공유자

안녕하세요 현진님,

질문 감사합니다.

해당 강의 영상에서는 타사의 Container Width (좌우 길이)를 이야기하고 있는데요. 제가 Container width를 어떻게 재는지 공유드리도록 하겠습니다. 말로 설명하는 것과 더불어서 직접 과정을 보시는 게 더 도움이 되실 것 같아 영상으로 캡쳐를 했습니다.

아래 영상을 함께 봐주시기 바랍니다.

먼저 기본 세팅은 브라우저 상에서 Container Width가 더 이상 늘어나지 않는 지점까지 좌우 길이를 늘이셔야 됩니다. 더 이상 늘어나지 않는 시점이 Container width의 최대길이라고 보시면 됩니다. 그 다음에는..

1. Container의 사이즈를 재고 싶은 화면을 캡쳐합니다.

2. 캡쳐한 화면을 Figma에 붙여넣습니다.

3. 사각형을 만들어서 Container의 사이즈를 잽니다.

제가 타사 container사이즈를 잴 때 조금은 수작업이 들어가지만 이렇게 했었습니다.

참고가 되시기를 바라며 또 궁금한 점이 있다면 말씀주세요.

감사합니다.

현진 심님의 프로필 이미지
현진 심

작성한 질문수

질문하기