컨테이너 또는 앵커 블록에 요소를 넣습니다.

Webflow에서 웹 사이트를 제작하는 동안 컨테이너나 앵커 블록과 같은 포함 요소 내에 요소를 포함하여 모양을 보다 편리하게 사용자 정의하는 것을 고려할 수 있습니다. 이제 컨테이너나 앵커 블록에 요소를 신속하게 포함하여 클릭 횟수를 줄이고 디자인 프로세스의 효율성을 높일 수 있습니다. 

이 튜토리얼에서는 다음 내용을 이해하게 됩니다. 

1. 컨테이너 블록에 요소를 포함하는 프로세스
2. 앵커 블록에 요소를 포함하는 프로세스
3. H Flex 또는 V Flex 구성요소에 요소를 포함하는 프로세스
4. 요소를 묶는 방법

참고하세요: 이러한 기술을 사용하면 모든 요소를 포함할 수 있으며 CMS에 연결된 요소도 포함할 수 있습니다. 기본 구성 요소를 제외하고 구성 요소 내의 개별 구성 요소 인스턴스와 요소를 묶을 수도 있습니다.

컨테이너 블록에 요소를 묶는 방법

컨테이너 블록은 웹 디자인의 기본적이고 다양한 요소입니다. 공간을 만들거나 구분선 역할을 하는 등 다양한 목적으로 사용되지만 주로 요소를 그룹화하는 데 사용됩니다. 

컨테이너에 요소를 포함하려면: 

1. 디자이너 캔버스에 포함하려는 요소를 선택하세요.
2. 누르다 명령 + 옵션 + G (Mac의 경우) 또는 제어 + Alt + G (윈도우즈에서)

컨테이너에 요소를 포함하는 또 다른 방법은 캔버스 메뉴를 사용하는 것입니다. 

1. 디자이너 캔버스에 포함하려는 요소를 마우스 오른쪽 버튼으로 클릭하세요.
2. 위로 마우스를 감싸다
3. 딸깍 하는 소리 컨테이너 블록

요소가 포함되면 새 컨테이너(예: 컨테이너 블록)가 자동으로 선택되어 내비게이터 패널에서 확장됩니다.

‍주요 팁: 요소를 컨테이너 블록에 넣은 후 다음을 누를 수 있습니다. 명령 + 입력하다 (Mac의 경우) 또는 제어 + 입력하다 (Windows의 경우) 클래스를 추가합니다.

앵커 블록에 요소를 묶는 방법

앵커 블록은 구조와 레이아웃 측면에서 컨테이너 블록과 유사하게 작동하지만 앵커 블록 내부가 하이퍼링크로 변환됩니다. 

앵커 블록에 요소를 포함하려면 다음을 수행하십시오. 

1. 디자이너 캔버스에 포함하려는 요소를 선택하세요.
2. 누르다 명령 + 옵션 + ㅏ (Mac의 경우) 또는 제어 + Alt + ㅏ (윈도우즈에서) 

캔버스 메뉴를 통해 앵커 블록의 요소를 묶으려면 다음을 수행하십시오. 

1. 디자이너 캔버스에 포함하려는 요소를 마우스 오른쪽 버튼으로 클릭하세요. 
2. 위로 마우스를 감싸다
3. 딸깍 하는 소리 앵커 블록 

포함되면 새 컨테이너(예: 앵커 블록)가 자동으로 선택되어 내비게이터 패널에서 확장됩니다.

전문가 팁: 당신은 누를 수 있습니다 명령 + 입력하다 (Mac의 경우) 또는 제어 + 입력하다 (Windows의 경우) 요소를 앵커 블록으로 묶은 후 클래스를 적용합니다.

H Flex 또는 V Flex 구성 요소에 요소를 포함하는 방법

H Flex 구성요소에서 요소를 래핑하려면 다음을 수행하세요. 

1. 디자이너 캔버스에 포함하려는 요소를 선택하세요.
2. 누르다 명령 + 시간 (Mac의 경우) 또는 제어 + 시간 (윈도우즈에서) 

V Flex 구성 요소에서 요소를 래핑하려면 다음을 수행하십시오. 

1. 디자이너 캔버스에 포함하려는 요소를 선택하세요.
2. 누르다 명령 + G (Mac의 경우) 또는 제어 + G (윈도우즈에서) 

캔버스 메뉴를 통해 H Flex 또는 V Flex 구성 요소에 요소를 포함하려면 다음을 수행하십시오. 

1. 디자이너 캔버스에 포함하려는 요소를 마우스 오른쪽 버튼으로 클릭하세요. 
2. 위로 마우스를 감싸다
3. 선택하다 H 플렉스 또는 V 플렉스

요소를 묶는 방법

또한 요소(예: 컨테이너, 섹션, 앵커 블록 등)를 포함하는 상위 요소에서 요소를 묶지 않는 옵션도 있습니다. 둘러싸기를 해제하면 하위 요소는 현재 위치를 유지합니다.

상위 컨테이너에서 요소를 둘러싸지 않으려면 다음을 수행하세요.

1. 제거하려는 상위 컨테이너를 선택하세요.
2. 누르다 명령 + 옮기다 + G (Mac의 경우) 또는 제어 + 옮기다 + G (윈도우즈에서)

메모: 하위 요소가 캔버스에 상위 컨테이너(예: 양식 입력 필드, 목록 항목 등)가 있어야 하는 경우 하위 요소를 묶을 수 없습니다.