startupful

👋🏻 Welcome Startupful
Getting Started
SignUp/Login
Profile Setting
Membership Setting
Utility Setting
UI/UX Design Code
Navigation Filter
Preview/Codeview
Likes/Scrap
UI/UX Integration
Wordpress
Wix
Webflow
Bubble
Duda
GnuBoard

Wix Guide

이 가이드는 Wix 웹사이트에 Tailwind CSS와 Startupful에서 제공된 리소스를 통합하는 방법을 안내합니다. Wix는 HTML iFrame 위젯을 통해 일부 사용자 정의 코드를 추가할 수 있지만, Tailwind CSS와 같은 외부 CSS 프레임워크를 완벽히 통합하기에는 제한적일 수 있습니다. 그럼에도 불구하고, Wix에서 가능한 방법을 최대한 활용하여 디자인을 적용하는 방법을 살펴보겠습니다.

Step 1: Tailwind CSS 스크립트 적용

Wix에서는 외부 스크립트를 직접 <head> 태그에 추가하는 기능이 제한적입니다. 그러나, Wix Velo 기능을 사용하여 JavaScript 및 일부 사용자 정의 코드를 추가할 수 있습니다.

방법 1: Wix Velo를 통한 Custom Code 추가

  1. Wix 편집기에서 Dev Mode를 활성화합니다.

    • Wix 편집기 오른쪽 상단에서 **Dev Mode (개발자 모드)**를 활성화하여 Velo 기능을 사용할 수 있습니다.

  2. 페이지 설정에서 추가할 스크립트 작성

    • Dev Mode가 활성화되면, Velo 기능을 통해 페이지마다 JavaScript와 같은 스크립트를 추가할 수 있지만, Tailwind CSS와 같은 외부 라이브러리를 직접 추가하는 것은 제한적일 수 있습니다.
    • Tailwind CSS가 반드시 필요한 경우, 직접 스타일링한 CSS 코드를 추가하거나, 간단한 Tailwind-like 스타일을 적용할 수 있도록 CSS를 직접 작성하는 방법을 고려해 볼 수 있습니다.

방법 2: Custom CSS 작성

Tailwind CSS를 Wix에서 직접 적용하기는 어려울 수 있기 때문에, Tailwind CSS에서 제공하는 스타일을 참고하여 Custom CSS를 작성하는 것도 하나의 대안이 될 수 있습니다. Velo 기능을 통해 Custom CSS를 페이지별로 적용하거나, HTML iFrame에 스타일을 지정할 수 있습니다.

Step 2: Startupful 리소스 적용

Startupful에서 제공된 HTML 리소스를 Wix 웹사이트에 통합하려면, HTML iFrame을 사용하는 방법이 있습니다. HTML iFrame을 통해 제공된 코드를 추가하여 디자인 요소를 삽입할 수 있습니다.

1. HTML iFrame을 통한 리소스 삽입

  1. Wix 에디터에서 추가할 섹션으로 이동하여 + 버튼을 클릭합니다.
  2. Embed > Custom Embeds > Embed a Widget을 선택하여 HTML iFrame을 추가합니다.
  3. HTML iFrame 위젯이 페이지에 추가되면, Enter Code를 클릭하여 Startupful에서 제공된 HTML 코드를 붙여넣습니다.
  4. 코드를 입력한 후 Update를 클릭하여 적용합니다.

이 방법으로 Startupful에서 제공된 HTML 리소스를 Wix 페이지에 포함할 수 있습니다. 필요에 따라 HTML iFrame의 크기 및 위치를 조정할 수 있습니다.

Step 3: Wix에서 리소스 편집 및 확인

Startupful의 리소스를 추가한 후, 디자인이 페이지에 적절히 표시되는지 확인합니다.

  1. 미리보기 모드로 전환하여 페이지가 예상한 대로 표시되는지 확인합니다.
  2. iFrame 크기 조정:
    • HTML iFrame 위젯의 크기가 원하는 디자인을 충분히 담지 못하는 경우, 위젯의 크기를 조정하여 필요한 만큼 넓히거나 높일 수 있습니다.

전체 넓이 적용 문제 해결

Wix에서 Startupful 리소스를 사용하여 만든 섹션이 전체 넓이로 표시되지 않는 경우가 있습니다. 이를 해결하려면, 페이지 레이아웃 또는 섹션 설정을 조정하여 최대한 넓은 레이아웃으로 설정할 수 있습니다.

  1. 섹션 설정을 열고, Stretch 옵션을 활성화하여 섹션이 페이지 전체에 걸쳐 표시되도록 설정합니다.
  2. 필요에 따라 iFrame 위젯의 너비를 최대화하여 화면 전체에 맞출 수 있도록 조정합니다.

이 가이드를 통해 Wix 사이트에 Tailwind CSS와 Startupful 리소스를 통합하여 원하는 디자인을 적용할 수 있습니다. Wix의 제한된 기능으로 인해 완전한 Tailwind CSS 통합은 어려울 수 있지만, Custom HTML과 CSS 작성으로 디자인을 최대한 반영할 수 있습니다.