Skip to content
No-code tool 어떻게 사용하는가?

Webflow

구성 요소

CMD+E 사용해서 바로 찾아 넣을 수 있음

CSS

스타일 클래스 저장하는 것. 뭔가 스타일을 조정하면 CSS로 저장해 두고 다른 곳에서도 쓰자

단위

Pixel, viewport height (vh), %

블록

Body 안에 section 넣어서 나누기 - 수직으로 나누기
Container 수평 width를 조절하기 위해서 넣는 것
Column 수평을 나누기
Desktop, Mobile 화면에서 Column스타일을 바꾸면 하위(오른쪽으)로 영향 받음
Div 는 Element를 그룹해서 스타일을 수정하거나, 수평 마진을 조정할 때 사용 (가능하면 원래 Element의 마진을 조정할 것)

Custom Attribute

HTML에서 지원하는 커스텀 속성을 사용하는 것
예) Let's say you want a tooltip to appear when a user hovers over an element. You can add a custom attribute to this element with the tooltip text.

Form

Form을 사용하는 경우, 이메일 주소를 Webflow에 연결하게 됨 (Collection화됨)
이때 이메일 마케팅이나, auto-response는 Collection을 연동해야 함
외부 연동된 툴 (예: zapier)를 구동시키려면 버튼보다 Form을 써야 한다 (고 한다).
Form으로 해야, 추가적인 정보 (예: 사용자 ID) 들을 HTML Embed의 <input type=”hidden” …> 으로 함께 보낼 수가 있다. (
)

Symbol

페이지마다 반복되는 부분은 Symbol로 지정하고 재사용하기
Override Fields를 지정해서 각각의 블락의 Unique해야 할 것은 지정해 준다
Class가 스타일에 한정된 거라면 Symbol은 더 큰 의미
Navbar가 가장 좋은 예

Slider

슬라이더 - 수평으로 움직이며 내용을 보여주는 것
섹션 대신 슬라이드 통으로 넣어도 됨

Style

오렌지는 상속 받는 것, 블루는 새로 바꾼것 (이거 클릭하면 Reset 할 수 있다)

Tag

클래스는 새로 정의하는 CSS라고하면, 태그는 HTML 태그에 해당하는 기본 스타일링
헤딩, 이미지, 링크가 대표적

Combo Class

스타일을 수정하고 클래스를 지정하면, 같은 클래스의 블록은 모두 스타일이 바뀜
클래스를 하나 더 추가하고 스타일을 수정하면, 수정된 스타일은 해당 클래스로 귀속된다
파란, 오렌지색 필드를 클릭하면 어떤 클래스의 영향을 받는지 나오고, 어떤 클래스를 쓸지 지정할 수 있다

State

인터랙티브한 것을 정의하기 위해서 쓰임, None, Hover, Focus, Click

Layout

블락 (항상 새 라인에), 인라인 블락 (한 줄에 여러 블록을 놓기),
인라인 (텍스트의 일부로 처리, 사이즈 마진 등등 다 개무시)
Flex 1차원
(Flexible Box) - Container를 Flex으로 바꾸고, alignment 설정해서 정렬함
Grid 2차원
Container, Section, Div를 Grid로 만들거나 Grid element를 끌어다 놓기
Edit Grid 아이콘 클릭 = Row, Column 조정, SHIFT+ 눌러서 마진 조절
Element를 Grid에 넣으면 자동으로 빈셀부터 채워짐
Manual을 선택해서 (혹은 SHIFT+로) 위치 조정이 가능
복사하려면 OPTION+ 로 드래그-앤-드랍하면 복사됨
Grid에 Div 박스를 넣어서 position을 조정할 수 있음
각 Grid의 끝부분을 끌어서 여러 Grid 셀을 하나의 셀로 만들 수 있음
Position
Relative - 하나의 엘레먼트만 상대적인 위치에 놓기
Absolute - Parent 블락에서 절대 위치에 놓기
Fixed - Viewport에서 특정 위치에 계속 위치함 (Navbar가 공간을 차지함)
Sticky - ?? Navbar가 상단 섹션 위에 붙어 있음 (투명하게 하면 섹션이 보임)

Elements

Section - full width의 요소,
Container - full width가 아니도록 요소들을 담아 두는 껍데기. Section으로 세로를 구분하고, Container로 각 섹션의 수평 구성을 만드는 방식
Columns - Container 내부에 수평 구성을 만들 때 Columns 형태로 만들기 위한 것
Div - div는 여러 요소를 담는 요소. section, container, column 모두 div에서 특별한 속성을 더 가진 요소임.
참고
Section: full width of viewport and cannot have nested sections
Container: Same as Div but locked at 940 pixel width and auto-placed in center of page
Div: Same as a container without restrictions and can have nested divs
link block - link를 연결할 수 있는 div block. 서로간에 convert가 가능함
button - Selector에 가면 hover, pressed 등의 state에 따른 정의를 할 수 있다
form
radio button은 개별 입력하고 같은 group name으로 묶어주면 됨

background video -
lightbox - 이미지, 비디오를 크게 확대해서 보는 thumbnail 박스, 그룹으로 묶어서 슬라이드쇼 형태로 볼 수 있게도 만들 수 있다
Navigation
Pre-built Layout
Hero, Card section, Sticky Navbar, Galary, Call-to-action, Contact form
Footer layout,
잘 활용하여 빠르게 페이지를 빌드 가능하다

Breakpoints (responsiveness)

장비 화면을 선택하는 것 자체가 새로운 Class, 태그 처럼 동작한다
별표 되어있는 장비 중심으로 위로 상속, 아래로 상속된다
Grid를 조정하는 일이 많을 듯
캔버스 끝 부분을 끌어당기면 디바이스 명을 볼 수 있다

Collection (CMS)

구조 = Collection > Item > Fields
Collection List를 캔버스에 넣고, Element를 추가해서 Collection의 필드와 바인딩
세팅 (오른쪽 톱니바퀴)에 가서 sort, filter, 등을 할 수 있다
Field
이미지 - 백그라운드 이미지를 설정할 때 유용. 블로그 포스트마다 다르게 하기
Switch Field - 특정 조건에 맞을때 Contact Form을 노출하는데 유용
Reference Field - Collection 하나 안에 다른 Collection의 Item을 선택할 수 있게 하는 필드를 만드는 것
Mult-Reference Field - 다른 Collection의 여러 Items를 선택할 수 있게 해 주는 필드를 만드는 것

E-commerce

Products, Categories 라고 하는 dynamic collections 이 처음에 자동 생성됨

Integration

CMS를 Airtable로 쓰는 방법은 편하지 않을 듯 하다 (이건 Webflow의 정책)
Webflow는 웹페이지, 블로그, 커머스 사이트를 구축하는데 가장 적절해 보인다

SHORT-CUTS

CMD+Shift+S - 백업 만드는 숏컷
COMMAND+Z Undo
CMD + E 구성요소 찾는 것
마진 - OPTION- 좌우, 상하 함께 조정, SHIFT - 모두 함께 조정

이슈

왜 Container 안에 Container를 두지는 않는가?
Container는 Pre-styled된 div 이기 때문에
여러 Class가 포함될 때 어떤것이 Overriding하게 되는가?
Style 속성을 Class와 지정해 주면 됨
그 블락만 스타일을 바꿀 때 Class는 언제 만들어야 하는지?
스테이트를 정의한 것을 복사할 방법은 없을까?

MemberStack

Member 관리를 쉽게 해 줌

실시간 검색, 다이내믹 필터링 기능을 리스트에 더 해 줌

인사이트

템플릿(솔루션)이 아니라 문제를 물어봐야 한다!
클래스 이름을 외워야 하는게 고역이다
튜토리얼 은 재밌어야 한다 ...
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.