Figma 활용법 - 2주차
프레임과 그룹의 차이
프레임을 정리하고 정렬하는 법
오토레이아웃과 컨스트레인트를 활용해 레이아웃을 만들고 조정하는 방법
- 뭐가 다른건데? 코드는 디자인을 박스처럼 쌓는다.(div)
프레임은 컨테이너라고도 불린다.
그룹은 코드블록으로 인식이 되질 않는다.
숙련도가 올라갈수록 그룹을 다루는 경우가 줄어든다.
프레임은 코드블록으로 바뀌어서 개발에 필요한 속성이 적용된다.
프레임: 개별적인 객체로서 존재
그룹: 객체들의 모음으로 개별적인 존재로 취급받지 않음. 모든 변경, 행동은 그룹내 요소에 공통적으로 적용됨.
- 프레임을 레이어 상에서 정리를 해야한다고?
피그마의 객체들은 점점 위로 쌓이지만, 왼쪽 레이어 창에서는 위에서 아래 방향으로 새 레이어가 추가된다.
정렬은 정렬하려는 근처 가장 바깥 도형을 기준으로 작동한다.
- 오토레이아웃
패딩, 보더, 마진
오토레이아웃은 사용자가 추가하려는 컨테이너를 자동으로 설정하고 배치하는 기능이다.
왔??
컨테이너
코드블럭
이 둘은 같은 뜻이다. 컨테이너는 코드블럭을 피그마에서 부르는 용어라는 뜻이다. 아니, 그래서 코드블럭이 뭔데?
Html과 css... 한참 과거부터 원래 있어왔던 이 둘은 웹을 개발하는 약속(문법이자 기본 개념)이다.
바로 이 약속이 대부분 코드블럭이 뭔지 정의했다. 심지어 정의하는 코드블럭도 여러 종류다.
쉬운데 상상 이상으로 지루해서 프론트엔드 개발 첫번째 관문이라고 개인적으로 생각한다.
Html과 css는 어떻게 해야 코드를 작성해 생성한 코드블럭들로 웹사이트를 원하는 모양으로 만들 수 있는지에 관한 개념이다.
Html과 css는 한몸이라고 봐도 좋다. Css는 html을 화장하는 정도가 아니라 아예 맨 몸인 html에 스타일을 잡아주는 수준의 역할을 한다. 반대로 html로는 내용의 구조정도만 잡는다.
여기 html을 꾸며주는 css코드에 보면 margin, border, padding이 나온다.
강사님의 설명처럼 padding은 충진재라고 생각해보자(참고로 비유들은 서로 절대 이어지지 않으니 1차원 적으로 한번 듣고 이해하고 까먹는게 좋다)
Border는 유광, 무광, 비닐등 패딩 표면이며 margin은 사회적 거리두기이다.
객체>오토레이아웃 적용>패딩 적용
객체>프레임 설정>오토레이아웃 적용>패딩 X
매우 이상한 개념 : 오토레이아웃이 적용된 객체들에선 레이어 패널 상 아래로 갈 수록 레이어가 위로 설정됨.
오토레이아웃이니 객체들끼리 겹칠수가 없는 상황이고, 진짜 위치가 평면에서 윗쪽으로 객체가 자리를 잡는다.
- 컨스트레인트
Constraint(컨스트레인트) : 제약, 제한으로 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할지를 정한 제약(규칙)이다.
이 규칙에 따라 자동으로 자식 요소들이 움직여 디자이너들이 조작할 필요가 없으니, 정말로 편하자고 만든 개념이다.
프레임 리사이징 : fixed, hug(부모만 사용), fill(자식만 사용)
Case1.
부모컨테이너 상에서 hug
자식 fixed
Case2.
부모컨테이너 상에서 fixed
자식 fill
Case3.
부모컨테이너 상에서 fixed
자식 컨테이너에서 fixed
