웹플로우 기초교육
웹플로우를 통한 디자인을 위한 기본 개념과 각 요소별 설명이 있는 가이드 페이지 입니다.
기본 개념 이해
웹플로우에서는 HTML, CSS의 기본적인 구조, 원리를 따라갑니다.
그럼 기본기를 이해해볼까요?
박스 모델 이해하기
모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.
- 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
- 패딩(padding) : 내용과 테두리 사이의 안쪽 여백. 패딩은 눈에 보이지 않습니다.
- 테두리(border) : 내용와 패딩 주변을 감싸는 테두리
- 마진(margin) : 테투리와 이웃 요소 사이의 바깥 여백. 마진은 눈에 보이지 않습니다.
부모 - 자식 요소 이해하기
디자인시 고려해야할 점은, 부모 요소의 디자인을 수정할 경우 자식 요소에도 영향을 미친다는 점입니다.
예를들어 아래의 예시에서 할아버지 할머니 부모요소의 글씨(타이포그래피) 색상이나 글자 크기를 수정하면 자식요소에들에게도 영향을 미칩니다.
하지만 모든 요소가 영향을 미치는 것은 아닙니다. 블럭 자체의 디자인을 수정하는 것은 자식 요소에 영향을 미치지 않습니다.
Class 이해하기
동일한 클래스를 공유하는 요소는 동일한 디자인이 적용되게 됩니다.
예를들어 아래의 예시에서 둘은 "Box Example" 이라는 클래스를 공유합니다. 하지만 Box B의 경우는 "Box Example"과 더불어 "Red"라는 클래스를 추가로 가지고 있습니다. 이를 웹플로우에서는 "콤보 클래스"라고 합니다. Box A의 디자인 수정은 Box B에도 영향을 미치지만(동일한 클래스를 공유하기 때문에), Box B의 디자인 수정은 Box A에 영향을 미치지 않습니다(콤보 클래스로 지정된 "Red"에 디자인이 기록됨)
Box Example
Box Example
Red
디스플레이
블록을 어떻게 배치를 할 것 인지 자식 요소들의 배열을 어떻게 할 것인지 등 기본적인 레이아웃을 결정합니다.
Block은 대부분의 요소에 대한 기본 설정입니다. 각 Block 요소는 새 줄에서 시작하며 별도의 너비를 설정하지 않는 한 상위 요소의 전체 너비를 차지합니다.
너비에 관계없이 각 블록 요소는 다음 요소를 새 줄에 밀어 넣습니다. 요소를 나란히 배치하려면 Inline Block과 같은 다른 레이아웃 설정을 사용해야합니다.
Inline Block 요소는 한 줄에서 나란히 쌓이며 너비는 내부 콘텐츠에 따라 결정됩니다. 또한 Inline Block 요소는 콘텐츠가 상위 요소의 경계에 닿으면 새 줄에서 시작합니다.
플렉스 레아이웃이 있는 요소는 직계 자식 요소를 가로 또는 세로로 정렬합니다.
플렉스 컨테이너 내에서 직접 자식이 쌓이는 방식, 래핑되는 시기, 정렬 및 맞춤 방법을 사용자 지정할 수 있습니다. (왼쪽 이미지의 Align, Justify 등에 해당하는 부분입니다.)
플렉스 컨테이너를 만들면 해당 부모 요소의 모든 자식이 플렉스 자식(Flex Child)이 됩니다.
플렉스 자식 설정에서 플렉스 자식의 레이아웃을 추가하고 재정의할 수 있습니다.
(위 예시에서 Flex Container 안에 있는 자식 요소를 클릭해 확인해볼 수 있습니다.)
그리드 레이아웃이 있는 요소는 여러 열과 행에 걸쳐 직계 자식을 정렬합니다.
컨테이너, 개별 셀, 셀 그룹 또는 트랙과 같은 그리드 구성 요소 내에서 직접 자식의 위치, 정렬 및 배포 방식을 사용자 지정할 수 있습니다.
그리드 레이아웃을 사용하면 트랙이라고 하는 열과 행 사이의 간격을 지정할 수 있습니다. FR 장치를 사용하여 화면의 Width에 반응하는 유연한 그리드 레이아웃을 만들 수도 있습니다.
그리드 컨테이너의 자식을 선택하면 스타일 패널 상단에 그리드 자식 설정이 나타납니다.
이를 통해 정렬 및 맞춤에 대한 그리드 컨테이너 설정을 재정의할 수 있습니다.
Grid VS Flex?
Flexbox는 세로 또는 가로의 1차원 레이아웃 컨트롤을 제공합니다. 그리드는 2차원에서 작동하는 레이아웃 컨트롤을 제공하므로 잡지 등의 레이아웃에 적합합니다. 각 레이아웃 옵션에 대한 자세한 내용, 옵션 간의 차이점, 어느 한 옵션을 다른 옵션 대신 사용해야 하는 경우에 대해 알아보려면 Webflow University의 동영상 강의를 확인하세요.
포지션
블록을 어떻게 배치를 할 것 인가, 자식 요소들의 배열을 어떻게 할 것인가를 결정합니다.
모든 요소에는 기본적으로 Static Position가 있으므로 요소는 문서 흐름에 따라 고정됩니다. 정적 위치가 있는 요소는 쌓인 순서대로 표시됩니다. 스타일을 추가하지 않으면 겹치지 않으며 요소마다 다른 기본값을 갖지 않습니다. 요소를 정적으로 설정하는 유일한 이유는 요소에 적용된 위치 지정을 제거하기 위해서입니다.
상대 위치로 설정된 요소는 정상 위치를 기준으로 배치됩니다. 다른 위치 속성(위, 왼쪽, 아래, 오른쪽)을 추가하지 않은 상대 설정은 영향을 받지 않습니다. 이는 정적으로 설정한 경우와 똑같이 상대적이기 때문입니다. 상대 요소의 위쪽, 오른쪽, 아래쪽, 왼쪽 속성을 설정하면 해당 요소가 정상 위치에서 멀어집니다. 다른 콘텐츠는 요소에 의해 남겨진 간격에 맞게 조정되지 않습니다. 또한 Z- Index를 설정할 수 있습니다.
Z-index?
z-인덱스 값은 요소의 스택 순서를 제어합니다.
z-인덱스 값이 더 높은 요소는 값이 더 낮은 요소 위에 쌓입니다.
자식 요소는 부모 요소에 따라서만 스택할 수 있습니다.
Z-인덱스는 Relative, Absolute 및 Fixed 포지션에서만 작동합니다.
일반 문서 흐름에서 요소를 제거하려면 절대 위치가 좋은 옵션입니다. 절대 요소의 위치는 다른 요소의 영향을 받지 않으며 다른 요소의 위치에도 영향을 주지 않습니다.
기본적으로 요소의 위치는 본문 요소에 상대적이지만 부모가 정적이 아닌 다른 것으로 설정된 경우 요소 내부에 절대 요소를 배치할 수 있습니다.위, 왼쪽, 아래, 오른쪽 위치 속성을 사용하여 위치를 설정하면 이 값은 정적이 아닌 다른 설정이 있는 다음 부모 요소에 상대적인 위치가 됩니다.
고정 요소는 뷰포트 또는 브라우저 창을 기준으로 배치됩니다.
페이지를 아래로 스크롤하면 고정 요소는 해당 위치에 고정된 상태로 유지됩니다.
이 위치 설정은 Fixed Navigation에 자주 사용됩니다.
고정 요소는 뷰어의 스크롤 위치에 따라 상대 위치와 고정 위치를 번갈아 가며 표시합니다.
고정 요소는 정의된 스크롤 위치에 도달할 때까지 문서 흐름에 상대적입니다. 그 시점에서는 직접 상위 요소 내에서 고정 요소의 동작으로 전환됩니다. 고정 요소가 상위 요소의 하단에 도달하면 스크롤이 중지됩니다.
고정 위치 지정이 작동하려면 상단, 하단, 왼쪽 또는 오른쪽에 하나 이상의 위치 값을 지정해야 합니다. 부모 요소의 높이 또는 오버플로가 숨김, 스크롤 또는 자동으로 설정된 경우 위치 고정이 제대로 작동하지 않을 수 있습니다.