Duda Guide

Duda는 주로 중소기업 웹사이트를 제작하는 데 많이 사용되는 웹사이트 빌더로, HTML 및 JavaScript 삽입 기능을 통해 Tailwind CSS와 Startupful 리소스를 통합할 수 있습니다. 이 가이드는 Duda에 Tailwind CSS를 추가하고 Startupful에서 제공된 HTML 리소스를 적용하는 방법을 설명합니다.

Step 1: Tailwind CSS 통합

Duda에서 Tailwind CSS를 사용하려면, 외부 스크립트를 추가하여 CSS 프레임워크를 불러와야 합니다.

1. HTML Widget을 통해 Tailwind CSS 추가

Duda는 웹사이트에 HTML 위젯을 추가하여 커스텀 코드를 삽입할 수 있습니다. 다음과 같은 절차를 통해 Tailwind CSS를 적용할 수 있습니다.

1. Duda 에디터에서 페이지에 Tailwind CSS가 필요한 섹션으로 이동합니다.

2. 좌측 메뉴에서 Widgets를 클릭한 후 HTML 위젯을 페이지에 드래그하여 추가합니다.

3. HTML 위젯 설정 창이 열리면, 아래 코드를 입력하여 Tailwind CSS를 불러옵니다.

   <script src="https://cdn.tailwindcss.com"></script>
   

4. Save 버튼을 클릭하여 코드를 저장합니다.

이 코드를 추가하면 해당 페이지에 Tailwind CSS가 적용되어 Tailwind 클래스들을 사용할 수 있습니다.

2. 사이트 전체에 Tailwind CSS 적용

Duda에서는 각 페이지마다 Tailwind CSS 스크립트를 추가할 수도 있지만, 사이트 전체에 적용하려면 Site Settings에 스크립트를 추가할 수 있습니다.

1. Duda 에디터에서 Design 탭을 클릭하고 Site HTML/CSS 설정으로 이동합니다.

2. Head HTML 섹션에 아래 코드를 추가합니다.

   <script src="https://cdn.tailwindcss.com"></script>
   

3. Save를 클릭하여 변경 사항을 저장합니다.

이제 Tailwind CSS가 사이트 전체에 적용되므로, 모든 페이지에서 Tailwind 클래스를 사용할 수 있습니다.

Step 2: Startupful 리소스 적용

Tailwind CSS 스크립트를 추가한 후, Startupful에서 제공한 HTML 리소스를 Duda에 통합할 수 있습니다. HTML 위젯을 사용하여 Startupful 코드를 삽입하면 됩니다.

1. HTML 위젯을 통한 리소스 삽입

1. Duda 에디터에서 디자인을 적용할 섹션으로 이동합니다.
2. Widgets 메뉴에서 HTML 위젯을 선택하여 페이지에 드래그하여 추가합니다.
3. HTML 위젯 설정 창이 열리면, Startupful에서 제공된 HTML 코드를 붙여넣습니다.
4. Save 버튼을 클릭하여 코드 삽입을 완료합니다.

이렇게 하면 Startupful의 HTML 리소스가 Duda 페이지에 추가되어 표시됩니다. 필요에 따라 HTML 위젯의 크기와 위치를 조정하여 페이지 레이아웃에 맞출 수 있습니다.

2. 미리보기 및 스타일 조정

• Preview 모드를 사용하여 페이지가 예상한 대로 표시되는지 확인합니다.
• 필요에 따라 HTML 위젯의 크기를 조정하거나, Tailwind CSS 클래스를 수정하여 원하는 디자인을 완성합니다.

Step 3: 전체 넓이 적용 문제 해결

Duda에서 Startupful 리소스를 사용할 때, 일부 테마 설정으로 인해 전체 넓이가 적용되지 않을 수 있습니다. 이 경우, Container 설정을 조정하여 전체 넓이를 적용할 수 있습니다.

1. HTML 위젯이 포함된 섹션을 선택한 후, Section Settings로 이동합니다.
2. Width 옵션에서 Full Width로 설정하여 해당 섹션이 페이지 전체에 걸쳐 표시되도록 합니다.
3. 필요에 따라 HTML 위젯의 Max Width 및 Margins를 조정하여 화면 전체에 맞추도록 합니다.

또한, Tailwind CSS 클래스 중 w-full이나 max-w-full을 HTML 코드에 추가하여 레이아웃 넓이를 제어할 수 있습니다.

추가 팁: Duda에서의 Tailwind CSS 커스터마이징

Duda에서 Tailwind CSS를 사용할 때 추가적인 커스터마이징이 필요할 경우, Tailwind의 설정을 수정하여 원하는 스타일을 적용할 수 있습니다.

1. Tailwind CSS 설정을 변경하려면, HTML 위젯에 Tailwind 설정 스크립트를 추가합니다.

   <script>
     tailwind.config = {
       theme: {
         extend: {
           colors: {
             primary: '#1a202c',
             secondary: '#2d3748',
           }
         }
       }
     }
   </script>
   <script src="https://cdn.tailwindcss.com"></script>
   

2. 이 설정을 통해 Tailwind의 기본 색상 팔레트를 수정하거나, 추가적인 스타일을 적용할 수 있습니다.

주의사항

• Duda의 레이아웃 설정과 Tailwind CSS가 충돌할 수 있으므로, 필요한 클래스만 사용하여 스타일을 조정하는 것이 좋습니다.
• Duda는 일부 JavaScript와 CSS의 실행을 제한할 수 있으므로, HTML 위젯에서 적용 가능한 범위 내에서 스타일링을 진행해야 합니다.

이 가이드를 통해 Duda에서 Tailwind CSS와 Startupful 리소스를 효과적으로 통합하여, 웹사이트의 디자인을 더욱 강화할 수 있습니다. Tailwind CSS 설정과 HTML 위젯을 활용해 유연하게 스타일을 조정해 보세요.