[Webflow 프로젝트] Layout 구성 익히고 들어가기

IT최신동향

by 띵가띵가 2023. 5. 22. 22:38

Webflow에서는 HTML&CSS의 대부분의 개념을

아이콘으로 손쉽게 구현이 가능합니다!

이전에 웹페이지 구성하려면 <head>부터 시작해서

표, 글자, 이미지, 여백 등 하나하나 코드로 했었는데

이제는 그냥 블럭처럼

쌓기만 하면 되니까 정말 편리하죠?

대부분 템플릿으로 구성되어 있어도

기본 Layout이 어떻게 구성되어 있는지 알고 뜯어보면

더욱 쉽게 이해가 될 수 있어요

기본적으로 webflow의 Layout은 Top에서 down으로

블럭처럼 쌓이는 구조입니다

그렇지만, 보통 웹페이지는 주르륵 나열하는 것이 아니라,

왼쪽에서 오른쪽으로 이미지/설명/글 등이 나열되어 있죠?

이럴 때는, 스타일 패널에서 'Flex layout' ,

즉 노란색으로 칠한 아이콘을

Heading, Paragraph를 전체 포함하고 있는

Div Block에서 설정하면, 전체 배열이 왼->오로

바뀌는 모습을 볼 수 있습니다

해당 Flex box를 화면 중앙으로

가지고 오고 싶으면,

Direction을 Horizontal로,

Aligh을 가운데 정열,

그리고 Hight을 100 VH로 세팅하면

중앙으로 옵니다.

왼쪽의 + 버튼을 누르면

Layout들이 UI 형태로 직관적으로

딱 나와있죠?

몇 번 클릭해서 하다보면 느낌이 옵니다

그래도 흰 도화지에 만들라고 하면

아직 어려울 것 같지만..

남이 만든 템플릿을 보고

이해할 수 있어서 내가 필요한 부분만

따라할 수 있으면 괜찮을 것 같아요!

이제 본격적으로 Webflow 템플릿들을 가져와서

랜딩페이지 만드는 실습을

공부해보도록 하겠습니다!

에어테이블에서 간단하게 Database 만들기 (0)	2023.06.10
[Webflow] 레이아웃 플러그인 설치 및 활용 (0)	2023.05.29
Webflow 프로젝트 생성 및 에디터 구성 (0)	2023.05.15
코딩 1줄도 없이 웹사이트 만들기! Webflow 툴 소개 (1)	2023.05.14
ITIL v4 Practice Checklist : 2. Strategy Management (0)	2023.04.25