Webflow에서 웹 사이트를 제작하는 동안 컨테이너나 앵커 블록과 같은 포함 요소 내에 요소를 포함하여 모양을 보다 편리하게 사용자 정의하는 것을 고려할 수 있습니다. 이제 컨테이너나 앵커 블록에 요소를 신속하게 포함하여 클릭 횟수를 줄이고 디자인 프로세스의 효율성을 높일 수 있습니다.
이 튜토리얼에서는 다음 내용을 이해하게 됩니다.
- 컨테이너 블록에 요소를 포함하는 프로세스
- 앵커 블록에 요소를 포함하는 프로세스
- H Flex 또는 V Flex 구성요소에 요소를 포함하는 프로세스
- 요소를 묶는 방법
참고하세요: 이러한 기술을 사용하면 모든 요소를 포함할 수 있으며 CMS에 연결된 요소도 포함할 수 있습니다. 기본 구성 요소를 제외하고 구성 요소 내의 개별 구성 요소 인스턴스와 요소를 묶을 수도 있습니다.
컨테이너 블록에 요소를 묶는 방법
컨테이너 블록은 웹 디자인의 기본적이고 다양한 요소입니다. 공간을 만들거나 구분선 역할을 하는 등 다양한 목적으로 사용되지만 주로 요소를 그룹화하는 데 사용됩니다.
컨테이너에 요소를 포함하려면:
- 디자이너 캔버스에 포함하려는 요소를 선택하세요.
- 누르다 명령 + 옵션 + G (Mac의 경우) 또는 제어 + Alt + G (윈도우즈에서)
컨테이너에 요소를 포함하는 또 다른 방법은 캔버스 메뉴를 사용하는 것입니다.
- 디자이너 캔버스에 포함하려는 요소를 마우스 오른쪽 버튼으로 클릭하세요.
- 위로 마우스를 감싸다
- 딸깍 하는 소리 컨테이너 블록
요소가 포함되면 새 컨테이너(예: 컨테이너 블록)가 자동으로 선택되어 내비게이터 패널에서 확장됩니다.
주요 팁: 요소를 컨테이너 블록에 넣은 후 다음을 누를 수 있습니다. 명령 + 입력하다 (Mac의 경우) 또는 제어 + 입력하다 (Windows의 경우) 클래스를 추가합니다.
앵커 블록에 요소를 묶는 방법
앵커 블록은 구조와 레이아웃 측면에서 컨테이너 블록과 유사하게 작동하지만 앵커 블록 내부가 하이퍼링크로 변환됩니다.
앵커 블록에 요소를 포함하려면 다음을 수행하십시오.
- 디자이너 캔버스에 포함하려는 요소를 선택하세요.
- 누르다 명령 + 옵션 + ㅏ (Mac의 경우) 또는 제어 + Alt + ㅏ (윈도우즈에서)
캔버스 메뉴를 통해 앵커 블록의 요소를 묶으려면 다음을 수행하십시오.
- 디자이너 캔버스에 포함하려는 요소를 마우스 오른쪽 버튼으로 클릭하세요.
- 위로 마우스를 감싸다
- 딸깍 하는 소리 앵커 블록
포함되면 새 컨테이너(예: 앵커 블록)가 자동으로 선택되어 내비게이터 패널에서 확장됩니다.
전문가 팁: 당신은 누를 수 있습니다 명령 + 입력하다 (Mac의 경우) 또는 제어 + 입력하다 (Windows의 경우) 요소를 앵커 블록으로 묶은 후 클래스를 적용합니다.
H Flex 또는 V Flex 구성 요소에 요소를 포함하는 방법
H Flex 구성요소에서 요소를 래핑하려면 다음을 수행하세요.
- 디자이너 캔버스에 포함하려는 요소를 선택하세요.
- 누르다 명령 + 시간 (Mac의 경우) 또는 제어 + 시간 (윈도우즈에서)
V Flex 구성 요소에서 요소를 래핑하려면 다음을 수행하십시오.
- 디자이너 캔버스에 포함하려는 요소를 선택하세요.
- 누르다 명령 + G (Mac의 경우) 또는 제어 + G (윈도우즈에서)
캔버스 메뉴를 통해 H Flex 또는 V Flex 구성 요소에 요소를 포함하려면 다음을 수행하십시오.
- 디자이너 캔버스에 포함하려는 요소를 마우스 오른쪽 버튼으로 클릭하세요.
- 위로 마우스를 감싸다
- 선택하다 H 플렉스 또는 V 플렉스
요소를 묶는 방법
또한 요소(예: 컨테이너, 섹션, 앵커 블록 등)를 포함하는 상위 요소에서 요소를 묶지 않는 옵션도 있습니다. 둘러싸기를 해제하면 하위 요소는 현재 위치를 유지합니다.
상위 컨테이너에서 요소를 둘러싸지 않으려면 다음을 수행하세요.
- 제거하려는 상위 컨테이너를 선택하세요.
- 누르다 명령 + 옮기다 + G (Mac의 경우) 또는 제어 + 옮기다 + G (윈도우즈에서)
메모: 하위 요소가 캔버스에 상위 컨테이너(예: 양식 입력 필드, 목록 항목 등)가 있어야 하는 경우 하위 요소를 묶을 수 없습니다.
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일