# 글로벌 디자인 설정하기

글로벌 디자인이란 전체 홈페이지에 적용되는 기본 디자인을 의미합니다.

본문 너비, 본문 글자 사이즈, 배경색 등을 설정할 수 있습니다.

\[디자인 편집\] - \[글로벌 디자인 설정\] 메뉴에서 설정이 가능합니다.

자세한 내용은 아래 안내를 참고해 주시기 바랍니다.

[https://docs.dothome.co.kr/books/06/page/17d63](https://docs.dothome.co.kr/books/06/page/17d63)

[![dhbd-06-04-01.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-04-01.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-04-01.jpg)

디자인 편집기 메뉴에서 \[글로벌 디자인 설정\] 버튼을 눌러 글로벌 디자인 설정창을 열어줍니다.

기본과 버튼 두 개의 탭으로 나뉘어져 있습니다.

기본은 전체 페이지에 대한 설정, 버튼은 버튼 디자인에 대해 설정할 수 있습니다.

항목별 수정사항을 입력한 뒤 적용하기 버튼을 누르면 글로벌 디자인이 적용됩니다.

**\[기본\]**

**전체**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EB%B3%B8%EB%AC%B8%ED%8F%AD-%EB%B3%B8%EB%AC%B8-%EC%98%81%EC%97%AD%EC%9D%98-%EB%84%88%EB%B9%84%EB%A5%BC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 24.2263%;">항목</td><td style="width: 75.8929%;">설명</td></tr></thead><tbody><tr><td style="width: 24.2263%;">본문폭</td><td style="width: 75.8929%;">본문 영역의 너비를 설정합니다. 보통 1100px에서 1300px 사이를 많이 사용합니다.</td></tr><tr><td style="width: 24.2263%;">배경색</td><td style="width: 75.8929%;">페이지의 배경색상을 설정합니다</td></tr><tr><td style="width: 24.2263%;">정렬</td><td style="width: 75.8929%;">이미지, 글자 등의 정렬을 설정합니다.</td></tr></tbody></table>

</div></div>**폰트**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9%C2%A0-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90-%ED%81%AC%EA%B8%B0-%EA%B8%80%EC%9E%90-%EC%82%AC%EC%9D%B4%EC%A6%88%EB%A5%BC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 24.5834%;">항목 </td><td style="width: 75.5358%;">설명</td></tr></thead><tbody><tr><td style="width: 24.5834%;">글자 크기</td><td style="width: 75.5358%;">글자 사이즈를 설정합니다. 보통 16px를 많이 사용합니다.</td></tr><tr><td style="width: 24.5834%;">글꼴</td><td style="width: 75.5358%;">기본 글꼴을 설정합니다.</td></tr><tr><td style="width: 24.5834%;">글자색</td><td style="width: 75.5358%;">글자 색을 설정합니다.</td></tr><tr><td style="width: 24.5834%;">링크색</td><td style="width: 75.5358%;">페이지 링크가 설정된 글자의 색을 설정합니다.</td></tr><tr><td style="width: 24.5834%;">링크 마우스오버색</td><td style="width: 75.5358%;">링크가 설정된 글자에 마우스를 올렸을 때 변경될 색을 설정합니다.</td></tr></tbody></table>

</div></div>**블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%ED%94%84%EB%A0%88%EC%9E%84-%EB%B8%94%EB%9F%AD%EC%9D%98-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 24.7025%;">항목</td><td style="width: 75.4167%;">설명</td></tr></thead><tbody><tr><td style="width: 24.7025%;">좌우 여백</td><td style="width: 75.4167%;">프레임 블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 24.7025%;">상하 여백</td><td style="width: 75.4167%;">프레임 블럭의 상하 여백을 설정합니다.</td></tr><tr><td style="width: 24.7025%;">프레임박스 간격  
</td><td style="width: 75.4167%;">프레임 블럭 안에 프레임박스간의 간격을 설정합니다.  
</td></tr></tbody></table>

</div></div>**요소 블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EC%9A%94%EC%86%8C-%EB%B8%94%EB%9F%AD%EC%9D%98-%EC%A2%8C"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.0596%;">항목</td><td style="width: 75.0596%;">설명</td></tr></thead><tbody><tr><td style="width: 25.0596%;">좌우 여백</td><td style="width: 75.0596%;">요소 블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 25.0596%;">상하 여백</td><td style="width: 75.0596%;">요소 블럭의 상하 여백을 설정합니다.</td></tr><tr><td style="width: 25.0596%;">애니메이션</td><td style="width: 75.0596%;">화면에 요소 블럭이 보일 때 동작할 애니메이션을 설정합니다.  
</td></tr></tbody></table>

</div></div>**\[버튼\]**

**버튼 기본**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90-%ED%81%AC%EA%B8%B0-%EB%B2%84%ED%8A%BC%EC%9D%98-%EA%B8%80%EC%9E%90-%ED%81%AC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.2977%;">항목</td><td style="width: 74.8215%;">설명</td></tr></thead><tbody><tr><td style="width: 25.2977%;">글자 크기</td><td style="width: 74.8215%;">버튼의 글자 크기를 설정합니다.</td></tr><tr><td style="width: 25.2977%;">글자색</td><td style="width: 74.8215%;">버튼의 글자 색을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">배경색</td><td style="width: 74.8215%;">버튼의 배경 색을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">테두리색</td><td style="width: 74.8215%;">버튼의 테두리 색을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">좌우 여백</td><td style="width: 74.8215%;">버튼 안쪽의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 25.2977%;">상하 여백</td><td style="width: 74.8215%;">버튼 안쪽의 상하 여백을 설정합니다.</td></tr></tbody></table>

</div></div>**버튼 마우스오버**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90%EC%83%89-%EB%B2%84%ED%8A%BC%EC%97%90-%EB%A7%88%EC%9A%B0%EC%8A%A4%EB%A5%BC-%EC%98%AC"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.4167%;">항목</td><td style="width: 74.7025%;">설명</td></tr></thead><tbody><tr><td style="width: 25.4167%;">글자색</td><td style="width: 74.7025%;">버튼에 마우스를 올렸을 때 변경될 글자 색을 설정합니다.</td></tr><tr><td style="width: 25.4167%;">배경색</td><td style="width: 74.7025%;">버튼에 마우스를 올렸을 때 변경될 배경 색을 설정합니다.  
</td></tr><tr><td style="width: 25.4167%;">테두리색</td><td style="width: 74.7025%;">버튼에 마우스를 올렸을 때 변경될 테두리 색을 설정합니다.  
</td></tr></tbody></table>

</div></div>**모바일 모드 글로벌 디자인 설정하기**

**[![dhbd-06-04-02.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-04-02.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-04-02.jpg)**

모바일 글로벌 디자인은 모바일 모드에서 설정할 수 있습니다.

디자인 편집기 메뉴에서 \[모바일 화면 디자인 모드로 전환\] 버튼을 눌러 편집기 화면 모드를 모바일로 전환합니다.

[![dhbd-06-04-03.jpg](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/scaled-1680-/dhbd-06-04-03.jpg)](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/dhbd-06-04-03.jpg)

편집 메뉴의 \[글로벌 디자인 설정\] 버튼을 누르면 모바일 글로벌 디자인 설정창이 열립니다.

항목별 수정사항을 입력한 뒤 적용하기 버튼을 누르면 모바일 글로벌 디자인이 적용됩니다.

**폰트**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EA%B8%80%EC%9E%90-%ED%81%AC%EA%B8%B0-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%AA%A8%EB%93%9C%EC%9D%BC-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.5068%;">항목</td><td style="width: 74.4932%;">설명</td></tr></thead><tbody><tr><td style="width: 25.5068%;">글자 크기</td><td style="width: 74.4932%;">모바일 모드일 때의 글자 크기를 설정합니다. PC에서 설정한 글자 크기에 대비하여 적용됩니다.

1~5까지 설정할 수 있으며, 숫자가 클 수록 글자 크기가 커집니다.

</td></tr></tbody></table>

</div></div>**블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%AA%A8%EB%93%9C%EC%9D%BC-"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.1497%;">항목</td><td style="width: 74.8503%;">설명</td></tr></thead><tbody><tr><td style="width: 25.1497%;">좌우 여백</td><td style="width: 74.8503%;">모바일 모드일 때의 프레임 블럭의 좌우 여백을 설정합니다.  
</td></tr><tr><td style="width: 25.1497%;">상하 여백</td><td style="width: 74.8503%;">모바일 모드일 때의 프레임 블럭의 상하 여백을 설정합니다.  
</td></tr><tr><td style="width: 25.1497%;">프레임박스 간격

</td><td style="width: 74.8503%;">모바일 모드에서 추가한 프레임 블럭의 프레임박스 간의 간격을 설정합니다.

</td></tr></tbody></table>

</div></div>**요소 블럭**

<div class="col-xl-9 col-lg-9" id="bkmrk-%ED%95%AD%EB%AA%A9-%EC%84%A4%EB%AA%85-%EC%A2%8C%EC%9A%B0-%EC%97%AC%EB%B0%B1-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%AA%A8%EB%93%9C%EC%9D%BC--1"><div class="contents"><table class="table table-bordered" style="width: 100%;"><thead><tr><td style="width: 25.0302%;">항목</td><td style="width: 74.9698%;">설명</td></tr></thead><tbody><tr><td style="width: 25.0302%;">좌우 여백</td><td style="width: 74.9698%;">모바일 모드일 때의 요소 블럭의 좌우 여백을 설정합니다.</td></tr><tr><td style="width: 25.0302%;">상하 여백</td><td style="width: 74.9698%;">모바일 모드일 때의 요소 블럭의 상하 여백을 설정합니다.</td></tr></tbody></table>

</div></div>