HTML5 & CSS3, Figma Auto layout

2022.10.18.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 23

---

Review

 
 오늘은 수업 진도를 많이 나가지 않고, 과제를 해야하는 날이라 거의 Figma만 했다.
Figma는 너어어어어무 편한 프로그램인 것 같다. 

포토샵과 일러스트가 거의 필요없을만큼... 어도비에서 Figma를 인수했다는데, 아마

엄청나게 견제가 되고 합병하는 것이 기술력 향상에 훨씬 도움이 될 거라고 생각했겠지?

라는 생각이 든다.

CEO 굉장히 현명해 -

어쨋든 요즘은 포토샵과 일러스트 수업을 하지 않고 Figma를 이용하니 훨씬 수월함을

체감하고 있다. 하지만 감을 잃지 않기 위해 평가지를 작성하는 날에는 포토샵과 일러스트를

이용해서 이미지를 제작하고 있다. 

 

파이팅 - !

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 23

 

<box 수평으로 정렬시키기>

 

 

우선 HTML에서 banner라는 div로 전체를 감싸고,

하위에 box div 3개를 만들었다.

 

CSS에서는 전체에 margin과 padding을 없애고, banner에 div를 1440px로 설정했다.

box의 width와 height 값을 각각 400px로 지정하고, float: left로 가로로 정렬시킨다.

float을 주지 않으면 세로로 정렬되기 때문에 반드시 float:left 를 적어줘야 한다. 

 

 

 

이건 width를 1440px을 3등분 하지 않고 퍼센트로 설정해 100%를 3등분 한 33.333%로 설정한 결과이다.

 

 

---

 

 

<Figma에서 Auto layout을 이용하여 CGV 메인화면 만들어보기>

 

 

우선 width가 1025px인 사각형을 2개 그린다.

height는 원하는 크기로 설정하고 상단에 들어갈 사각형은 오른쪽 옵션 바에서 Fill을

클릭하고 빨간색으로 채운다. 

 

Type tool로 '로그인, 회원가입, English' 라는 문구를 각각 적고 3개를 모두 드래그 해서 

Shift + A를 누르면 Auto layout 처리가 된다.

그러면 그룹으로 설정이 되기 때문에 각각 선택하지 않아도 수평/수직으로 padding을

함께 늘리고 줄이는 등 여러가지 작업을 할 수가 있다.

 

선택한 특정 요소를 크게 확대해서 작업하고 싶다면 Shift + 2를 누르면 된다.

 

- Shift + A : Auto layout 

- Shift + 2 : 화면에 fit하게 확대하기

 

 

 

메뉴로 들어갈 문구도 작성한 뒤 5개를 모두 선택한 뒤, Shift + A를 눌러 

Auto layout 처리한다. 그러면 Grouping 되어 간격을 일정하게 조절하기가 용이하다.

 

로고와 Middle side의 저 이미지는 내 경로에서 드래그 해 가져다 놓았다.

 

메뉴 바와 로고를 함께 선택해 Auto layout을 하거나 왼쪽에 그룹을 함께 묶는 것도

좋은 방법이다.

 

 

 

 

middle 부분에 들어갈 이미지 4개를 내 경로에서 불러왔다.

4개의 이미지를 모두 선택해 Shift + A로 Auto layout 처리한 후, 간격을 함께 조절했다.

 

 

 

이벤트와 공지사항 문구를 작성하고,

공지사항 밑에 들어갈 내용은 각각 작성해 함께 선택하고 나서 Shift + A를 눌러 Auto layout

처리 해주었다. 그러고 나서 간격을 함께 설정했다. 

 

 

 

마지막으로 Footer 부분만 작업해주면 완성이다 -

 

 

 

 

 

 

 

*이미지 출처
: Tianyi Zhou