샘플 디자인
Text Background
한글의 경우
원리와 샘플 코드를 알아봅니다.
- 가로 행 블록을 하나 만듭니다.
- 행 속에 텍스트 블록을 하나 만듭니다.
- 텍스트 블록의 배경색을 지정합니다. 이 색은 underline 역할을 합니다.
- 텍스트 블록의 줄 높이를 0 으로 지정합니다. ( 이게 트릭 입니다 )
- 텍스트 블록의 하단 여백 ( padding ) 을 원하는 만큼 줍니다.
- 배경색은 텍스트 중심에서 시작해서 여백을 준 방향으로 채워집니다.
- 아래는 샘플 코드 블록 입니다. 복사해서 사용하세요.
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} --> <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"typography":{"fontSize":"3rem","lineHeight":"0"},"color":{"background":"#c9f5ff"},"spacing":{"padding":{"top":"0","left":"0","right":"0","bottom":"0.5em"}}}} --> <p class="has-background" style="background-color:#c9f5ff;padding-top:0;padding-right:0;padding-bottom:0.5em;padding-left:0;font-size:3rem;line-height:0">Text Background</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->참고 / 주의할 점
- 이 방법 외에도 다양한 방법이 있습니다. 배경색을 그래디언트로 깔아주는 것도 한 방법 입니다.
- 여러줄의 텍스트에는 가급적 사용하지 마세요.