--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/typography' title: '타이포그래피 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:05:47+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 리드 문장을 크게 만들거나 인용문을 브랜드 색상으로 설정하거나 어두운 사진 위의 제목을 흰색으로 바꿀 수 있습니다. 변경은 스타일 패널의 글꼴 크기와 글꼴 색상으로 수행하며, 하나의 요소에 있는 모든 텍스트가 바뀝니다. 텍스트 일부에는 대신 텍스트 편집기의 툴바를 사용합니다. 모든 페이지가 공유하는 크기와 색상에는 테마를 사용합니다. 동영상에서는 아래 실전 방법에 따라 한 문장을 더 큰 크기와 브랜드 색상의 리드로 바꿉니다. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 타이포그래피 description: |- 리드 문장을 크게 만들거나 인용문을 브랜드 색상으로 설정하거나 어두운 사진 위의 제목을 흰색으로 바꿀 수 있습니다. 변경은 스타일 패널의 글꼴 크기와 글꼴 색상으로 수행하며, 하나의 요소에 있는 모든 텍스트가 바뀝니다. 텍스트 일부에는 대신 텍스트 편집기의 툴바를 사용합니다. 모든 페이지가 공유하는 크기와 색상에는 테마를 사용합니다. 동영상에서는 아래 실전 방법에 따라 한 문장을 더 큰 크기와 브랜드 색상의 리드로 바꿉니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:05:47+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/typography' articleSection: '요소 스타일 지정' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/typography' description: |- 리드 문장을 크게 만들거나 인용문을 브랜드 색상으로 설정하거나 어두운 사진 위의 제목을 흰색으로 바꿀 수 있습니다. 변경은 스타일 패널의 글꼴 크기와 글꼴 색상으로 수행하며, 하나의 요소에 있는 모든 텍스트가 바뀝니다. 텍스트 일부에는 대신 텍스트 편집기의 툴바를 사용합니다. 모든 페이지가 공유하는 크기와 색상에는 테마를 사용합니다. 동영상에서는 아래 실전 방법에 따라 한 문장을 더 큰 크기와 브랜드 색상의 리드로 바꿉니다. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[페이지 만들기](/ko/hc/documentation/learn-dxpr-builder/build) /[요소 스타일 지정](/ko/hc/documentation/learn-dxpr-builder/element-settings) # 타이포그래피. DXPR Builder 배우기페이지 만들기요소 스타일 지정 ## 이 가이드의 내용 관련 가이드 - [HTML ID와 클래스](/ko/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 리드 문장을 크게 만들거나 인용문을 브랜드 색상으로 설정하거나 어두운 사진 위의 제목을 흰색으로 바꿀 수 있습니다. 변경은 **스타일** 패널의 **글꼴 크기**와 **글꼴 색상**으로 수행하며, 하나의 요소에 있는 모든 텍스트가 바뀝니다. 텍스트 일부에는 대신 텍스트 편집기의 툴바를 사용합니다. 모든 페이지가 공유하는 크기와 색상에는 테마를 사용합니다. 동영상에서는 아래 실전 방법에 따라 한 문장을 더 큰 크기와 브랜드 색상의 리드로 바꿉니다. ## 시작하기 전에 - DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 **더보기**가 있는 컨트롤 바가 표시됩니다. 빌더가 처음인가요? [첫 페이지](/ko/hc/documentation/learn-dxpr-builder/getting-started/first-page)를 참조하세요. - **저장**(대화상자)은 변경 사항을 에디터에 유지합니다. 콘텐츠 위 빌더 툴바의 **저장**은 페이지를 저장하고 “Saved field”를 표시합니다. - **스타일 패널 사용**은 하나의 요소에 사용합니다. 리드 단락, 인용문, 사진 위의 제목이 예시입니다. - **텍스트 편집기 사용**은 텍스트 일부와 구조에 사용합니다. **제목 2**나 **제목 3**으로 제목을 실제 제목으로 만들고, 더 큰 **보통** 줄로 만들지 마세요. 스크린 리더와 검색 엔진은 크기가 아니라 수준을 읽습니다. - **에디터의 스타일 목록 사용**은 브랜드 텍스트 스타일에 사용합니다. 웹마스터가 **일반 설정** > **텍스트 편집기** > **사용자 정의 스타일**(`/admin/dxpr_studio/dxpr_builder/settings`)에서 설정합니다. - **테마 사용**은 본문 글꼴, 제목 크기, 링크 색상에 사용합니다. ## 실전: 브랜드 색상의 리드 문장 1. 요소 **텍스트**를 추가하고 한두 문장을 **보통** 텍스트로 입력합니다. 2. 해당 요소에 마우스를 올리고 **더보기**, **설정**을 차례로 클릭합니다. 3. 패널 **스타일**을 열고 **글꼴 크기**를 20으로 드래그합니다. 드래그하면 텍스트가 커집니다. 4. 다음으로 **글꼴 색상**을 열고 견본에서 브랜드 색상을 선택하거나 색상 필드에 #1a4d8f 같은 코드를 입력합니다. 5. 대화상자에서 **저장**을 클릭합니다. 20px에서는 문장이 일반 텍스트로 간주되므로 4.5대 1의 대비가 필요합니다. 색상 코드와 배경색을 대비 검사기에 입력합니다. 흰색 페이지는 #ffffff입니다. 6. 툴바에서 **저장**을 클릭합니다. ## 표시 내용 문장이 20px로 커지고 브랜드 색상으로 바뀝니다. 같은 텍스트 요소 안의 제목과 링크도 해당 색상이 적용되지만 제목은 자체 크기를 유지합니다. ## 설정의 동작 방식 ### 글꼴 크기 **글꼴 크기**는 0~100px이며, 0은 테마 크기를 유지합니다. 값은 모든 화면 크기에서 같습니다. 데스크톱의 48px 줄은 휴대폰에서도 48px입니다. 크기는 요소에 적용되며, 자체 크기가 있는 텍스트는 유지됩니다. 제목은 보통 페이지 기본 크기에서 Bootstrap이 크기를 정하므로 해당됩니다. 에디터의 글꼴 크기 도구로 크기를 정한 텍스트도 유지됩니다. ### 글꼴 색상 사이트에 팔레트가 있으면 선택 도구에 테마 팔레트가 견본으로 표시됩니다. 불투명도 슬라이더와 #1a4d8f 같은 색상 코드를 입력하는 필드도 있습니다. 선택 도구의 **지우기**를 클릭하면 텍스트가 테마 색상으로 돌아갑니다. 텍스트, 카드, 알림 같은 콘텐츠 요소에서는 제목과 링크를 포함하여 안의 모든 것에 색상이 적용됩니다. 다만 **섹션**에서는 자체 색상이 없는 텍스트에만 적용됩니다. 테마에서 색상을 지정한 제목과 링크는 해당 색상을 유지합니다. Bootstrap 색상 클래스는 `!important`로 표시되므로 **글꼴 색상**보다 우선합니다. 예를 들어 **Primary text color** 칩과 같이 **HTML 클래스**에 있는 항목이 있으며, 텍스트 일부의 **Primary Brand Text** 같은 에디터 스타일도 있습니다. 대상 **버튼**에서는 색상이 버튼 자체에 적용되어 테마의 호버 색상을 대체합니다. **호버 스타일**에도 **글꼴 색상**을 설정합니다. ### 호버 패널 **호버 스타일**에는 별도의 **글꼴 색상**과 **글꼴 크기**가 있습니다. 호버 시 크기가 커지면 주변 콘텐츠가 밀리므로 보통 색상 변경이 더 차분한 선택입니다. ## 대비 대부분의 사람이 읽을 수 있는 텍스트를 위해 WCAG 2 AA 수준에서는 다음 대비를 요구합니다. | 텍스트 | 배경과의 대비 | |---|---| | 일반 텍스트 | 최소 4.5대 1 | | 큰 텍스트: 24px(18pt) 이상, 또는 굵게 표시된 19px(14pt) 이상 | 최소 3대 1 | 사진 위에서는 텍스트 뒤의 가장 밝은 부분을 기준으로 측정합니다. [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) 같은 대비 검사기로 색상 조합을 테스트합니다. ## 표시되지 않는 경우 - **텍스트 안의 제목이 커지지 않았습니다.** 제목에 테마의 자체 크기가 있습니다. 텍스트 편집기에서 다른 제목 수준을 선택하거나 글꼴 크기 도구를 사용합니다. - **링크와 제목이 색상을 유지합니다.** 섹션에서는 자체 테마 색상이 있는 텍스트가 유지됩니다. 대신 텍스트 요소에 **글꼴 색상**을 설정합니다. - **글꼴 색상이 전혀 작동하지 않습니다.** **Primary text color**나 **White text** 같은 색상 클래스가 **HTML 클래스**에 있으면 우선합니다. 해당 칩을 제거합니다. - **텍스트 일부가 다른 색상을 유지합니다.** 해당 부분의 **Primary Brand Text** 같은 에디터 스타일이 우선합니다. 텍스트 편집기에서 해당 스타일을 제거합니다. - **글꼴 크기가 카운터에서는 작동하지 않습니다.** 서클 카운터와 숫자 카운터에는 자체 **글꼴 크기**가 있습니다. 해당 설정을 사용합니다. - **견본 색상이 더 이상 브랜드와 일치하지 않습니다.** 견본은 선택할 때 색상을 복사합니다. 팔레트가 바뀐 뒤에는 견본을 다시 선택합니다. - **브랜드 색상이 대비 검사를 통과하지 못합니다.** 더 어두운 계열을 선택합니다. 또는 텍스트를 최소 24px로 만들어 3대 1 목표를 적용합니다. - **사진 위의 텍스트가 읽기 어렵습니다.** 대비가 너무 낮습니다. [배경](/ko/hc/documentation/learn-dxpr-builder/element-settings/background) 페이지에 설명된 대로 그라데이션으로 사진을 어둡게 합니다. - **버튼의 호버 텍스트 색상이 사라졌습니다.** **글꼴 색상**이 테마의 호버 색상을 대체했습니다. **호버 스타일**에도 **글꼴 색상**을 설정합니다. ## 다음 단계 - [HTML ID와 클래스](/ko/hc/documentation/learn-dxpr-builder/element-settings/custom-css): 모든 요소에 설정하는 대신 클래스로 텍스트 스타일을 재사용합니다.