[2024년 최신 버전] 웹플로우 사용 방법을 항목별로 정리해 보았습니다

항목별 웹플로 사용 방법 [요약]

Webflow를 사용하는 방법에 대한 글을 각 항목별로 나누어 작성하고 있습니다.관심 있는 페이지를 확인해 보세요.또한 이용에 관한 질문 및 글에서 이해가 안 되는 부분 등 설명 요청트위터에서 접수하고 있습니다.

웹플로우 기초

• [초보자도 쉽게] Webflow로 나만의 도메인을 설정하는 방법‍
• 웹플로우에서 Span 태그를 사용하는 방법
• ‍Webflow 사용 방법에 대한 질문 방법 [요약]
• ‍[전체 3가지 패턴 요약] Webflow에 글꼴을 추가하는 방법
• ‍[사용자 지정 코드 없음] Webflow를 사용하여 가장 쉬운 목차를 만드는 방법
• ‍아주 쉽습니다!단 5분 만에 연락처 양식을 만드는 방법 [웹플로우 유니버시티]
• ‍[웹플로우 공식 홈페이지 일본어 번역] 웹플로우 대학을 일본어로 설명해 드리겠습니다

웹플로우 CMS

• [CMS 제작 편] 웹플로우의 CMS 기능을 이용해 4페이지 동시 제작하는 방법 [7데이즈/웹플로우 유니버시티]
• [CMS 제작 편 2] 웹플로우의 CMS 기능을 이용해 4페이지 동시 제작하는 방법 [7데이즈/웹플로우 유니버시티]
• [무료] 웹플로우 CMS 완전 이해 가이드 2023
• [CMS 소개] 웹플로우로 맨 처음에 수행한 CMS 설정 [3일]

웹플로우 SEO

• Webflow를 사용한 SEO 측정에 대한 기본 지식
• 웹플로우로 SEO를 준비하는 방법 [중급]
• 웹플로우를 이용한 SEO 설정 방법 [11데이즈/웹플로우 유니버시티]
• Webflow로 이동 경로 목록을 만드는 방법 [SEO 측정/구조화]

웹플로우 수수료에 대해

• ‍웹플로우의 요금제 설명하기 [2023년 최신판]

웹플로우 × 피그마

• ‍[혁명] Figma에서 WebFlow로 디자인을 복사하여 붙여넣는 방법

웹플로우 다국어 애플리케이션 “Weglot”

• Webflow로 만든 코드 없는 사이트를 Weglot으로 다국어로 만들어 보았습니다.
• Webflow로 만든 사이트에 Weglot을 소개하는 방법
• “Weglot에서 번역하지 않았습니다!”이러한 경우에 대한 해결책
• Weglot에서 번역할 페이지를 제외하는 방법
• 웹플로우에서 Weglot 하위 디렉터리를 사용하는 방법 [트릭]

웹플로우 × 인스타그램

• ‍[무료] 코드 없는 웹플로우에 인스타그램을 임베드하는 방법
  

※Webflow 사용 방법에 대해 더 알고 싶으시면 수시로 업데이트됩니다.트위터다음 주소에서 귀하의 요청을 받을 수 있기를 기대합니다.

Webflow를 처음부터 사용하는 방법을 배운 방법 [당시에는 경험이 없었습니다]

제가 웹플로우를 배운 방법은 웹플로우의 공식포트폴리오 제작 과정3개월에 걸쳐 강좌를 수강하면서 시작됩니다.이 과정에서는 Webflow를 전반적으로 사용하는 방법을 소개하면서 포트폴리오 사이트를 만들 것입니다.

‍모든 과정은 영어로 진행됩니다.。따라서 첫 단계는 자동 번역과 수동 비디오 작업을 보면서 어떻게든 Webflow에 익숙해지는 것이었습니다.자료 등은 어떨까요?웹플로우 공식에서 다운로드할 수 있습니다.비디오를 보려면 여기를 클릭하십시오 ↓

이 공식 Webflow는 이 블로그에서 일본어로 번역되었습니다.

이 강좌는 일본어로 번역되어 이 블로그에 소개되었습니다.블로그 개설 초기에 만든 내용이라 읽기가 조금 어려울 수 있지만 “공식 사이트 ✕ Web Spring 일본어 번역”을 곱해서 보시면 순조롭게 만들 수 있을 것 같습니다.
>>일본어 번역을 보려면 여기를 클릭하십시오

현재는 14일까지 생성되고 있습니다.요청이 있는 경우 재작성 및 21일차까지 생성해 드리겠습니다.요청은 무엇인가요?트위터 커뮤니티또는트위터그곳에서 만나 뵙기를 기대합니다.

Webflow 템플릿을 효율적으로 편집하기 위한 기법

이번 트윗에서 소개한 것처럼 위와 같은 방법으로 Webflow에서 템플릿을 효율적으로 변경할 수 있습니다.

유료 템플릿은 많지 않을 수 있지만 누구나 무료 템플릿을 올릴 수 있기 때문에 번외로 숫자를 입력하는 경우가 많습니다.여분이란 예를 들어 반응형 디자인에 의미 없이 숫자 0을 지정했거나 의미 없이 중단점과 동일한 숫자 값 (★ 표시의 크기) 을 지정한 경우를 의미합니다.

참고로 이것은 Webflow 초보자도 자주 하는 일입니다.추가 값을 입력하면 중단점 (★ 마크 크기) 의 변경으로 인해 반응형 디자인이 자동으로 생성되지 않습니다.나중에 “어디에 숫자가 지정되어 있는지 모르겠는데 반응형 디자인이 잘못됐어요”라고 말하지 않도록 추가 숫자를 사용하지 마세요.

Webflow 프로덕션에서 자주 사용되는 단축키 목록

다음은 Webflow 단축키에 자주 사용되는 몇 가지 키입니다.덧붙여 말하자면, 다른 앱과 같은 방식으로 복사 및 붙여넣기, 뒤로, 앞으로 이동 등을 사용할 수 있습니다.

• “커맨드+” 복사
• “명령+v” 붙여넣기
• 앞으로, 뒤로 “커맨드+z” “커맨드+z+시프트”
  ---------------------------------------
• 숫자 삭제 “Alt+클릭”
• 클래스 입력 “명령+입력”
• 요소 검색+“ 명령+k” 삽입
  마진 및 패딩의 수치 사양
• 좌우 동시 지정 “Alt+마우스 슬라이드”
• 모든 방향 동시 지정 “쉬프트+마우스 슬라이드”
• CMS 페이지 (디자이너 페이지) 이동 “Alt+←→”
• 요소 요소 “↓” 내에서 이동
• 위에서 아래로 이동 “Alt+↓”

제가 자주 사용하는 키보드 단축키입니다.추천할 만한 것이 있으면 알려주세요.참고로 Webflow 디자이너의 왼쪽 하단에 있는 도움말 섹션에서 모든 단축키를 확인할 수 있습니다.
>>키보드 단축키에 대한 공식 웹 사이트를 보려면 여기를 클릭하십시오.

‍