단면적

사이트 구축에서 가장 기본적이고 다양한 요소인 div 블록에 대한 개요입니다.

섹션 영역은 웹 사이트 구축에 사용되는 기본적이고 적응 가능한 단위입니다. 버튼, 래퍼 및 세그먼트는 모두 특정 추가 기능이 포함된 섹션 영역입니다. 어느 정도 섹션 영역은 원하는 어떤 모양이든 취할 수 있습니다. 예를 들어 섹션 영역은 공백이나 구분 기호 역할을 할 수 있지만 가장 일반적인 목적은 다른 구성 요소를 함께 그룹화하는 것입니다. HTML document에서 파티션을 설명합니다.

이 튜토리얼 전체에서 다음 방법을 알아볼 수 있습니다.

  1. 단면 영역 통합
  2. 섹션 영역을 링크 영역으로 변환
  3. 단면 영역을 사용하여 구성 요소 간의 간격 설정

단면 영역 통합

삽입 패널에서 Webflow 웹사이트에 섹션 영역을 포함할 수 있습니다. 그런 다음 제목, 설명, 클릭 유도 버튼 등 섹션 영역 내에서 다른 구성 요소를 통합할 수 있습니다. 단면 영역을 포함시키고 이 세 가지 요소를 내부로 드래그하면 일괄적으로 수정 및 관리할 수 있습니다. 섹션 영역의 너비를 50%로 조정하면 내부 콘텐츠도 마찬가지로 50%로 조정됩니다.

섹션 영역 내에 요소를 중첩하면 해당 크기는 포함된 콘텐츠에 따라 자동으로 맞춰집니다. 섹션 영역을 중앙에 정렬하면 해당 내용도 마찬가지로 정렬됩니다.

섹션 영역을 링크 영역으로 변환

섹션 영역을 링크 영역으로 변환하여 (그 안에 포함된 콘텐츠와 함께) 다른 대상에 하이퍼링크할 수 있습니다. 이는 콘텐츠를 그룹화하는 동안 링크 영역 대신 섹션 영역을 실수로 활용한 경우에 유용합니다.

섹션 영역을 링크 영역으로 변환하려면 섹션 영역 내에 링크된 요소가 없는지 확인한 다음 섹션 영역을 마우스 오른쪽 버튼으로 클릭하고 링크 영역으로 변환.

단면 영역을 사용하여 구성 요소 간의 간격 설정

섹션 영역을 활용하여 다른 구성 요소 사이에 빈 공간을 생성할 수 있습니다(그리고 고정 높이나 너비를 지정하여 다른 콘텐츠의 위치를 변경할 수 있습니다). 그럼에도 불구하고 이 기술은 공간을 만드는 데 최적이 아니며 시간이 지남에 따라 모니터링하기 어려울 수 있습니다. 기본적인 지침으로는 마진이나 패딩을 활용하여 구성 요소 사이에 공간을 만들고 꼭 필요한 경우에만 섹션 영역을 활용하는 것이 좋습니다.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)