요소 삽입 섹션

요소 추가 패널을 사용하면 Webflow 프로젝트에 추가할 수 있는 다양한 요소에 빠르게 시각적으로 액세스할 수 있습니다.

요소 삽입 섹션을 사용하면 프로젝트에 포함할 수 있는 다양한 구성 요소에 대한 신속한 시각적 입력이 가능합니다.

Webflow 요소 패널

섹션은 기본 그룹으로 분류됩니다. 예를 들어 글꼴 스타일 영역은 텍스트와 관련된 모든 요소를 포함합니다. 양식의 또 다른 부문은 양식을 생성하는 데 활용할 수 있는 모든 구조로 구성됩니다. 다음은 모든 카테고리와 해당 요소의 종류입니다.

  • 공들여 나열한 것
  • 근본적인
  • 타이포그래피
  • 콘텐츠 관리 시스템
  • 미디어
  • 양식
  • 구성요소

요소 삽입 섹션의 요소를 진행 중인 페이지에 포함하는 세 가지 방법이 있습니다.

  • 탭하여 그 자리에서 삽입하세요.
  • 작업 공간으로 드래그
  • 윤곽선으로 드래그
알아두면 좋아요
다음을 활용하여 작업 공간에 요소를 추가로 포함할 수 있습니다. 빠른 검색(CMD+E/CTRL+E). 신속한 검색을 활용하는 방법을 숙지하세요.

탭하여 그 자리에서 삽입하세요.

탭하여 삽입하는 것은 작업 공간에 요소를 삽입하는 빠른 접근 방식입니다.

  1. 페이지에서 기존 요소를 선택합니다.
  2. 요소 삽입 섹션을 찾아보세요.
  3. 삽입하려는 요소를 누르십시오.
  4. 새로운 요소가 페이지에 삽입됩니다.
 

통합된 요소가 처음 나타나는 위치는 선택한 요소와 연결됩니다. 따라서 선택한 요소가 텍스트, 미디어 또는 버튼 요소인 경우 삽입된 요소는 선택한 요소 옆이나 아래에 표시됩니다.

처음에 div 블록이나 컨테이너와 같은 상위 요소를 선택한 경우 새 요소는 기본에 있는 이 구조 요소 내부에 삽입됩니다.

 

선택한 요소가 없는 경우 탭하여 요소를 포함하면 해당 요소가 페이지 하단의 Body 요소 내부에 삽입됩니다.

원하는 위치로 요소를 끌어서 언제든지 요소의 위치를 수정할 수 있습니다.

작업 공간으로 드래그

요소 삽입 섹션에서 요소를 삽입하는 두 번째 방법은 요소를 작업공간으로 끌어서 배치하는 것입니다.

요소를 드래그하는 동안 주황색 표시기는 요소를 배치할 상위 요소를 알려줍니다. 파란색 표시기는 상위 요소 내부의 요소 위치를 나타냅니다.

 

오른쪽에 개요 탭이 열려 있으면 작업 공간에서 요소를 끌어 재배치할 때 이 요소를 배치하는 위치를 정확하게 관찰할 수도 있습니다.

 

윤곽선으로 드래그

페이지에 요소를 삽입하는 세 번째 방법은 개요를 활용하는 것입니다.

개요에서는 페이지의 전체 시각적 계획을 볼 수 있습니다. 결과적으로 요소 삽입 섹션의 요소를 정확하게 개요로 끌어서 놓을 수 있습니다.

 

요소의 기본 위치 지정

작업 공간에 요소를 삽입하면 해당 요소는 피어 요소를 기준으로 배치됩니다. 이 표준 위치 지정은 추가된 요소와 해당 피어 요소 모두의 기본 가시성 설정에 따라 제어됩니다.

따라서 기본 가시성 설정이 블록인 요소를 추가하는 경우 해당 요소는 인접한 요소 위 또는 아래의 단일 선에 일관되게 나타납니다.

인라인 블록의 가시성 설정을 가진 요소를 추가하는 동안 해당 요소는 블록 요소 아래 또는 위 또는 다른 인라인 블록 요소 옆에 배치됩니다. 요소 삽입 섹션의 모든 요소는 블록 요소이며, 인라인 블록인 요소는 제외됩니다.

  • 링크블록
  • 단추
  • 영상
  • 라이트박스 링크
  • 쓰러지 다
  • 양식 버튼

가시성 설정이 인라인인 유일한 요소는 텍스트 링크 요소입니다. 인라인 요소의 배치는 인라인 블록 요소와 유사하게 동작합니다.

공개 설정에 대해 자세히 알아보세요.

스타일 패널에서 대부분의 요소의 가시성 설정을 수정할 수 있습니다.

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