# 코드 블럭 다루기

코드 블럭이란 블럭 영역 안에 HTML, CSS, 스크립트 코드를 직접 작성할 수 있는 블럭입니다.

직접 코드를 입력함으로서 자신만의 디자인 또는 퍼블리싱 블럭을 만들 수 있습니다.

코드 블럭 사용에 대한 자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/09/page/e2c0b](https://docs.dothome.co.kr/books/09/page/e2c0b)

[![codeblock_01.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/codeblock-01.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/codeblock-01.png)

<span style="color: rgb(22, 145, 121);">\[코드 블럭 추가 화면\]</span>

블럭 추가 창에서 '코드'탭을 누르면 코드 블럭이 나옵니다.

블럭을 클릭하여 추가해 주세요.

[![codeblock_02.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/codeblock-02.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/codeblock-02.png)

<span style="color: rgb(22, 145, 121);">\[코드 편집하기 버튼 화면\]</span>

코드 블럭 위에 마우스를 올려서 \[코드 편집하기\] 버튼을 클릭하여 코드 작성이 가능합니다.

[![codeblock_03.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/codeblock-03.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/codeblock-03.png)

<span style="color: rgb(45, 194, 107);">\[코드 입력창 화면\]</span>

코드 입력창에서 미리보기 버튼을 누르면 새 창에서 작성한 내용을 확인할 수 있습니다.

미리보기는 전체 페이지가 아닌 작성된 코드 블럭의 내용만 확인이 가능합니다.

[![codeblock_04.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/codeblock-04.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/codeblock-04.png)

<span style="color: rgb(22, 145, 121);">\[코드 블럭 설정 버튼 화면\]</span>

코드 블럭 위에 마우스를 올리면 우측 상단에 블럭 편집 메뉴가 표시됩니다.

가운데에 있는 \[설정(톱니 바퀴 모양)\] 버튼을 클릭하여 상세 설정창을 열어줍니다.

**- 배경**

[![codeblock_05.png](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/codeblock-05.png)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/codeblock-05.png)

<span style="color: rgb(22, 145, 121);">\[코드 블럭 상세설정 화면\]</span>

코드 블럭 상세 설정 창에서 블럭에 대한 배경을 설정합니다. 색 또는 이미지로 설정할 수 있습니다.