Web flow 단축키 모음( Quick Find 단축키 )

 

Webflow의 단축키

일반 단축키

• 단축키 요약표 보기: Shift + ?
• 스냅샷으로 저장: Shift + Command + S (Mac) 또는 Shift + Control + S (Windows)
• 요소 선택 해제/종료: Esc
• 요소 삭제: 삭제
• 게시 대화 상자 표시: Shift + P
• 내보내기 코드 대화 상자 표시: Shift + E
• 요소 편집: Enter

바로가기 보기

• 미리보기 모드: Shift + Command + P (Mac) 또는 Shift + Control + P (Windows)
• 가이드 오버레이: Shift + Command + G (Mac) 또는 Shift + Control + G (Windows)
• 요소 모서리 표시: Shift + Command + E (Mac) 또는 Shift + Control + E (Windows)
• X선 모드: Shift + Command + X (Mac) 또는 Shift + Control + X (Windows)

왼쪽 도구 모음 바로가기

• 추가 패널 표시: A
• 탐색기 패널 표시: Z
• 페이지 패널 표시: P
• 구성 요소 패널 표시: Shift + A
• 선택한 요소를 구성 요소로 만들기: Command + Shift + A (Mac) 또는 Control + Shift + A (Windows)
• 자산 패널 표시: J
• 중첩된 모든 페이지 폴더 확장/축소: Option + Shift + 클릭 (Mac) 또는 Alt + Shift + 클릭 (Windows)
• 모든 페이지 확장/축소: Option + 클릭 (Mac) 또는 Alt + 클릭 (Windows)하여 모든 페이지 섹션 헤더를 클릭합니다.
• 모든 폴더 확장/축소: Option + 클릭 (Mac) 또는 Alt + 클릭 (Windows) 모든 폴더

오른쪽 탭 단축키

• 스타일 패널 표시: S
• 요소 설정 패널 표시: D
• 스타일 관리자 패널 표시: G
• 상호 작용 패널 표시: H

복사/붙여넣기 단축키

• 복사: Command + C (Mac) 또는 Control + C (Windows)
• 잘라내기: Command + X (Mac) 또는 Control + X (Windows)
• 붙여넣기: Command + V (Mac) 또는 Control + V (Windows)
• 복제: Command + D (Mac) 또는 Control + D (Windows)
• 복제: Option + 드래그 (Mac) 또는 Alt + 드래그 (Windows)

실행 취소/다시 실행 단축키

• 실행 취소: Command + Z (Mac) 또는 Control + Z (Windows)
• 다시 실행: Shift + Command + Z (Mac) 또는 Shift + Control + Z (Windows)

장치 보기 단축키

• 데스크탑: 1
• 태블릿 : 2
• 전화(가로): 3
• 전화(초상화): 4

스타일 패널 단축키

• 여백/패딩(모든 면): Shift 키를 누른 채 드래그
• 여백/패딩(위쪽 + 아래쪽 또는 왼쪽 + 오른쪽): Alt 키를 누른 채 드래그
• 선택한 요소에 클래스 추가: Command + Enter (Mac) 또는 Control + Enter (Windows)
• 선택한 요소의 마지막 클래스 이름 바꾸기: Command + Shift + Enter (Mac) 또는 Control + Shift + Enter (Windows)

기타 단축키

• 패널 섹션 확장/축소: Alt + 섹션 클릭
• 부모/자식 요소 선택: 위쪽 화살표/아래쪽 화살표
• 형제 요소 선택: 왼쪽 화살표 / 오른쪽 화살표
• 다음/이전 요소 선택: Alt + 왼쪽 화살표/오른쪽 화살표
• 선택한 요소에서 편집기에서 작업하는 팀원 전환: Command + Shift + L (Mac) 또는 Control + Shift + L (Windows)
• 선택한 요소의 마지막 클래스를 복제합니다. Command + Option + Enter (Mac) 또는 Control + Alt + Enter (Windows)
• 선택한 요소의 마지막 클래스 제거: Option + Shift + Enter (Mac) 또는 Alt + Shift + Enter (Windows)
• H Flex에서 요소 래핑: Option + G (Mac) 또는 Alt + G (Windows)
• V Flex에서 요소 래핑: Command + G (Mac) 또는 Control + G (Windows)
• 요소 풀기: Command + Shift + G (Mac) 또는 Control + Shift + G (Windows)

단축키 찾기

• 빠른 찾기:Command + E(Mac) 또는 Control + E (Windows) / Command + K(Mac) 또는Control + K(Windows)

Webflow의 Quick Find 사용
→ Command + E를 활용하여 빠르게 원하는 기능을 검색 및 실행

 

 

 

요소 이동 단축키

이러한 단축키를 사용하면 캔버스에서 요소를 이동할 수 있습니다.

• 이전 요소 앞으로 요소 이동: [ 또는 Command + Down (Mac) 또는 Control + Down (Windows)
• 이전 요소 뒤로 요소 이동: ] 또는 Command + Up (Mac) 또는 Control + Up (Windows)
• 현재 부모 내에서 형제 요소 앞으로 요소를 이동합니다: Command + [ 또는 Command + Left (Mac) 또는 Control + Left (Windows)
• 현재 부모 요소 내에서 형제 요소 뒤로 요소를 이동합니다. Command + ] 또는 Command + Right (Mac) 또는 Control + Right (Windows)
• 부모 요소 앞으로 요소 이동: Command + Shift + Up (Mac) 또는 Control + Shift + Up (Windows)
• 부모 요소 뒤로 요소 이동: Command + Shift + Down (Mac) 또는 Ctrl + Shift + Down (Windows)

요소 이동 단축키 제한 사항:

• 동적 요소 외부(예: 컬렉션 목록)로 요소를 이동할 수 없습니다.
• 고정된 요소를 부모 요소에서 이동하려고 하면(예: 슬라이더 마스크를 슬라이더 래퍼 외부로 이동) 전체 부모 요소(예: 슬라이더 래퍼)가 이동합니다.

마크다운 단축키

이러한 마크다운 단축키를 사용하면 키보드만 사용하여 서식 있는 텍스트 요소 와 서식 있는 텍스트 필드 내의 텍스트(예: 굵게, 기울임꼴, 하이퍼링크 추가)와 블록 요소(예: 제목, 목록)를 서식 지정할 수 있습니다 .

• 텍스트를 기울임체로 표시: *text* 또는_text_
• 굵은 글씨: **text** 또는__text__
• 기울임체와 굵은체로 텍스트를 표시: ***text*** 또는___text___
• 하이퍼링크 삽입:[hyperlink text](https://www.url.com)
• 제목 1 삽입: # + 공백
• 제목 2 삽입: ## + 공백
• 제목 3 삽입: ### + 공백
• 제목 4 삽입: #### + 공백
• 제목 5 삽입: ##### + 공백
• 제목 6 삽입: ###### + 공백
• 인용문 삽입: >+ 공백
• 순서 없는 목록(글머리 기호) 삽입: - + Space
• 순서가 있는(즉, 번호가 매겨진) 목록 삽입: 1. + Space

슬래시 명령 단축키

RTE(Rich Text Element) 또는 RTF (Rich Text Field) 내에서 콘텐츠를 편집할 때 '슬래시 명령' 단축키를 사용하여 새 콘텐츠 요소를 빠르게 추가할 수 있습니다. 슬래시 명령 단축키를 사용하려면 키보드에서 " / "(슬래시)를 누르고 추가 메뉴 에서 원하는 요소를 선택 하거나 입력을 시작하여 요소 목록을 필터링합니다.

• 제목(H1–H6)
• 번호가 매겨진 목록
• 요점 목록
• 절
• 인용구
• 영상
• 동영상
• 풍부한 콘텐츠
• HTML 임베드
• 코드 블록

키보드의 위쪽 및 아래쪽 화살표를 사용하여 요소 목록을 이동할 수도 있습니다. Return 키를 눌러 요소를 선택하고 RTE 또는 RTF에 추가합니다.

Flex 및 그리드 레이아웃 단축키

다음 단축키를 정렬 상자 와 함께 사용하면 부모 요소 안에서 flex 및 grid 자식을 빠르게 정렬할 수 있습니다.

플렉스 단축키

• 정렬(즉, justify-content)을 간격 설정 : 정렬 상자 셀을 두 번 클릭 하거나 Command (Mac) 또는 Control (Windows)을 누른 채 정렬 상자 셀을 클릭합니다.
• 정렬(즉, align-items)을 stretch 로 설정 : Option (Mac) 또는 Alt (Windows) + 정렬 상자 셀 클릭

flex children 정렬에 대해 자세히 알아보세요 .

그리드 단축키

• 정렬(즉, justify-items)을 stretch 로 설정 : 정렬 상자 셀을 두 번 클릭 하거나 Command (Mac의 경우) 또는 Control (Windows의 경우)을 누른 채 정렬 상자 셀을 클릭합니다 .
• 정렬(즉, align-items)을 stretch 로 설정 : Option (Mac) 또는 Alt (Windows) + 정렬 상자 셀 클릭

https://help.webflow.com/hc/en-us/articles/33961359609875-Keyboard-shortcuts-in-Webflow#general-shortcuts

(출처 Webfolw-웹플로우)