웹플로우 에디터 알아보기 #3
오른쪽 패널 편
웹플로우에는 웹사이트를 제작하기 위한 수많은 기능들이 존재합니다.
웹플로우로 웹페이지를 제작하기 위해선 기본적으로 에디터에 있는 각 패널들에 대한 이해가 필요한데요.
이번 글에서는 에디터 오른쪽 패널의 자주 사용되는 기능들에 대해서 알아보도록 하겠습니다.
오른쪽 패널
웹플로우 에디터 화면 구성웹플로우 에디터는 중앙의 에디터 화면을 제외하면 크게 3가지의 패널로 이루어져 있습니다.
오른쪽 패널 주로 Style 적용 및 기능 Setting, Interaction 관리와 같은 역할을 하는데요 하나씩 설명 드리도록 하겠습니다.
이번 글을 끝으로 웹플로우 에디터에 대한 설명은 끝나는 데요, 웹플로우의 궁금한 점에 대해서 댓글로 달아주시면 컨텐츠를 만들어 보도록 하겠습니다.
만약 왼쪽 패널과 상단 패널에 대해서도 궁금하시다면 다음 글들을 참고해 주세요!
https://brunch.co.kr/@team-thecompass/22
https://brunch.co.kr/@team-thecompass/24
Style
Style 태그에는 정말 많은 기능들이 있습니다.
주로 tag나 class, id를 대상으로 스타일을 부여하는 역할을 수행하는데 사용됩니다.
만약 css에 대한 이해가 있으시다면 보다 쉽게 이해하실 수 있으실 것 같습니다.
Style selctor
style selector는 가장 위에 위치해 있는 기능으로 css class를 지정할 수 있습니다.
다음과 같이 여러개를 연달아 쓸 경우 다양한 style을 부여하는 것도 가능하고 특정 상황에서 style을 부여하는 것도 가능 합니다.
또한 hover, focused와 같이 다양한 이벤트나 상태에 따라서도 조건을 부여할 수 있습니다.
Layout
layout은 css의 display 속성에 해당하는 부분입니다.
주로 레이아웃을 구성하거나 요소를 보여주거나 숨길때 사용되기도 합니다.
크게 Block, Flex, Grid, None, inline으로 나눌 수 있으며 기능은 다음과 같습니다.
Block: 요소가 부모 컨테이너의 전체 너비를 차지하고, 앞뒤로 새로운 줄을 만듭니다.
Flex: 요소가 플렉스 컨테이너가 되어 자식 요소들을 주 축(가로 또는 세로)에 따라 유연하게 배치할 수 있습니다.
Grid: 요소가 그리드 컨테이너가 되어 자식 요소들을 행과 열로 구성된 2차원 레이아웃으로 배치할 수 있습니다.
None: 요소가 문서 흐름에서 완전히 제거되어 페이지에서 보이지 않으며, 공간도 차지하지 않습니다.
Inline: 요소가 자신의 콘텐츠만큼의 너비만 차지하고, 새로운 줄을 만들지 않습니다.
Spacing
Spacing은 css의 Margin과 Padding에 해당하는 부분입니다.
보이는 위치에 따라 방향을 결정해서 Margin과 Padding을 부여할 수 있습니다.
Size
Size는 요소(element)에 대한 크기나 비율 등을 결정할 수 있습니다.
이 외에도 영역을 벗어낫을때의 상태를 정의 하는 overflow 속성을 정의 할 수 있습니다.
Position
Position은 요소의 배치 방식을 정의할 수 있는 속성입니다.
static, relative, absolute, fixed, sticky의 값에 따라 요소가 배치되는 방식이 달라집니다.
또한 z-index에 따라 요소의 쌓이는 순서를 결정할 수 있기도 합니다.
Typography
Typography는 Font에 대한 속성을 정의 할 수 있는 속성입니다.
기본적으로 폰트 종류, 굵기, 사이즈, 행간 등 폰트와 관련된 속성과 들여쓰기 그림자 속성 등 여러 속성을 부여할 수도 있습니다.
Backgrounds
Backgrounds는 배경에 대한 속성을 정의 할 수 있는 속성입니다.
배경에 색상 뿐만아니라 gradient나 이미지 등을 넣을 수도 있습니다.
Borders
Borders는 테두리에 관한 속성을 정의 할 수 있습니다.
Radius를 통해 테두리의 각짐 정도를 결정하거나 테두리의 굵기나 색상등의 속성을 결정할 수 있습니다.
Effects
Effects는 요소에 다양한 시각적 효과를 추가할 수 있게 해줍니다.
주로 트랜지션이나 필터 효과, 투명도를 적용하기 위해 사용합니다.
Custom properties
Custom Properties는 Style 내의 없는 css 속성을 추가적으로 부여할 수 있는 속성입니다.
Settings
Settings는 주로 id 설정이나 텍스트 입력, 정렬과 같은 기능을 사용하기 위해 사용됩니다.
요소마다 특정한 속성들이 있어 어떤 요소를 선택하느냐에 따라서 조금씩 기능이 달라집니다.
ID
ID는 class보다 한단계 높은 css 명시도(specificity)를 가지는 선택자 입니다.
ID 값은 고유해야 하며 중복해서 사용되서는 안됩니다.
Visibility & user access
Visibility는 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨기는 속성입니다.
Custom attributes
Custom attributes 기능은 HTML 요소에 사용자 정의 속성을 추가하여 맞춤형 기능을 구현할 수 있게 해줍니다. 예를 들어, 'data-'로 시작하는 속성을 추가하여 JavaScript로 해당 요소를 동적으로 제어하거나 고유한 데이터를 요소에 저장할 수 있습니다.
Collection list settings
만약 cms를 이용한 요소라면 Settings의 Collection list settings 기능이 생성됩니다.
Collection list settings는 cms 요소들의 조건을 걸어 보여질 요소를 제한하거나 정렬할 수 있습니다.
Interactions
Interactions는 요소들을 움직일 수 있게 하기 위한 Interaction 기능들을 다루기 위해 사용합니다.
Scroll into View와 같이 특정 영역안에 사용자의 viewport가 들어오거나 While scrolling in view와 같이 스크롤 길이에 따른 이벤트를 정의 할 때 주로 사용됩니다.
위의 이미지와 같이 다양한 상황에 대해 Interaction이 발생할 수 있도록 설정할 수 있습니다.
Interaction 기능은 웹플로우의 핵심 기능인 만큼 복잡한 요소들이 많아 다른 글로 찾아 뵙도록 하겠습니다.
이렇게 이번 시간에는 웹플로우 에디터의 오른쪽 패널에 대해서 알아보았습니다.
혹시 웹 사이트를 제작하고 계신데 어려움을 느끼고 계신가요?
저희 더컴퍼스에서는 60여 개 이상의 관공서, 스타트업, 유튜버 및 유수기업 홈페이지 및 프로젝트 개발을 성공적으로 수행하였습니다. 귀사의 홈페이지가 단순하고 일반적인 홈페이지가 아닌, 담당자님의 철저한 니즈 분석과 소통을 통해 꼭 맞는 웹사이트를 제작해 드리겠습니다.
직접 웹페이지를 만드실 때 어려움을 느끼시거나 전문가의 조언이 필요하시다면 언제든 편하게 연락해 주세요.
