프로덕트디자이너 Hailey 일기장📝

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

No-Code/Webflow

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

Hailey_l 2024. 12. 12. 14:05

 

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-웹플로우)

'No-Code > Webflow' 카테고리의 다른 글

Webflow Link block(Wrap in/Convert to)  (0) 2024.12.12