사이트의 기본 기능을 넘어 HTML, Markdown, CSS 등을 추가하여 사이트를 사용자 지정할 수 있습니다.

코드 블록을 사용하면 페이지, 블로그 게시물, 사이드바, 바닥글 또는 기타 콘텐츠 영역에 사용자 지정 코드를 추가할 수 있습니다. 타사 위젯을 삽입하거나 다른 블록으로는 불가능한 방식으로 페이지를 사용자 지정하고 싶을 때 코드 블록은 좋은 선택입니다. 코드 블록을 사용하여 HTML과 Markdown을 렌더링하거나 코드 스니펫을 표시할 수도 있습니다.

사용자 지정 콘텐츠에 가장 적합한 블록을 선택하는 방법을 알아보려면 사이트에 사용자 지정 코드 추가하기를 참조하세요.

모든 요금제에서, 코드 블록은 일반 텍스트, HTML, Markdown, CSS 코드를 태그로 감싸 지원합니다.

코드 블록에서 JavaScript 또는 iframe을 추가하는 기능은 코어, 플러스, 어드밴스드, 비즈니스, 커머스 베이직, 커머스 어드밴스드 요금제에서 사용할 수 있습니다. 자세히 알아보려면 적합한 Squarespace 요금제 선택하기를 참조하세요.

비디오 시청하기

코드 블록 추가하기

코드 블록을 추가하려면 다음 단계를 따르세요.

1. 페이지나 게시물을 편집하고 블록 추가 또는 삽입 지점을 클릭한 다음 코드를 클릭하세요. 도움이 필요하면 블록으로 콘텐츠 추가하기를 방문하세요.
2. 블록의 연필 아이콘을 클릭하여 블록 편집기를 엽니다.
3. 텍스트 필드에 코드를 추가하세요.
4. 코드 블록을 코드 스니펫 표시용으로 사용하는 경우, 소스 표시 토글을 켜세요.

코드 추가

코드를 렌더링하기 위해 코드 블록을 사용하는 경우, 유형 메뉴에서 HTML 또는 Markdown을 선택하세요.

텍스트 필드에 코드를 입력하거나 붙여넣으세요. 코드를 붙여넣으려면 코드를 복사한 뒤 입력 필드를 클릭하고 Ctrl + V(Windows) 또는 Command + V(Mac)을 누르세요.

CSS 또는 JavaScript로 설정된 코드 블록은 기본적으로 코드를 텍스트로 표시합니다. 코드 블록에서 CSS 또는 JavaScript를 렌더링하려면 드롭다운 메뉴에서 HTML을 선택하세요. CSS의 경우 코드를 태그로 감싸세요. JavaScript의 경우 코드를 태그로 감싸세요.

참고: 코드 블록에는 약 300,000자에 해당하는 400KB 제한이 있습니다.

소스 표시

코드 블록을 코드 스니펫 표시용으로 사용하는 경우, 소스 표시 토글을 켜세요.

이 기능은 코드 블록이 자동으로 코드 스니펫을 가독성 있게 서식화하므로, 코드 예시를 보여주기에 텍스트 블록보다 더 좋은 방법입니다.

참고: 소스 표시는 CSS, JavaScript, 일반 텍스트 옵션에서 항상 선택된 상태입니다.

임베드 코드 미리 보기

보안상의 이유로, 방문자는 볼 수 있어도 로그인한 상태에서는 코드가 표시되지 않을 수 있습니다. 코드 블록에 추가한 코드를 볼 수 없는 경우, 안전 모드에서 미리 보기를를 클릭해 삽입된 항목을 확인하세요.

문제 해결

코드 블록에 문제가 있는 경우 다음을 참고하세요.

• 색인 안의 페이지에 코드를 추가한 경우, 코드가 렌더링되지 않을 수 있습니다. 테스트하려면 페이지 패널에서 해당 페이지를 색인에서 제거하고 사이트에서 로그아웃하세요.
• Ajax 로딩은 사용자 지정 코드에 문제를 일으킬 수 있습니다. 테스트하려면 Ajax 비활성화 후에도 문제가 지속되는지 확인하세요.

코드 블록 문제로 인해 사이트를 편집할 수 없다면 미리 보기에서 스크립트 비활성화를 사용해 코드를 편집하거나 제거하세요.

그래도 문제가 해결되지 않으면 작동 방식에 가장 익숙한 소스(예: 위젯 코드를 받은 서비스)에 문의하는 것이 좋습니다.

참고: 코드 기반 사용자 지정은 지원 범위에 포함되지 않습니다. 이는 사용자 지정 코드 설정이나 문제 해결에 대해 추가 지원을 할 수 없음을 의미합니다. 또한, 코드 기반 솔루션의 경우 기능이나 Squarespace와의 완전한 호환성이 보장되지 않습니다. 여기에는 반응형 디자인이 모바일 기기에서 어떻게 표시되는지, 그리고 모든 템플릿에서 작동하는지 여부도 포함됩니다. 코드 기반 사용자 지정은 Squarespace 플랫폼의 향후 업데이트에서도 디스플레이 문제를 일으킬 수 있습니다. Squarespace가 추가적인 지원을 제공할 수는 없지만 아래에서 올바른 방향을 제시하는 다양한 자료를 살펴볼 수 있습니다.

• 사용자 정의 코드를 추가하는 모범 사례를 배워 보세요.
• 코드 기반 사용자 지정에 대한 일반 가이드를 읽어보세요.
• 고객 및 개발자 포럼인 Squarespace Forum을 방문하세요.
• Squarespace Expert를 고용하여 나의 사이트에 맞춤형 코드를 구축하는 데 도움을 받으세요.