`<style>` 태그

html

<style>

	h1 {
		color: red;

		/* 사이트 디자인에 설정된 CSS 변수 활용 */
		font-family: var(--font-family-heading);
		font-weight: var(--font-weight-heading);

		/* Handlebars.js 문법으로 컨텍스트 내 property 값 활용 */
		margin-bottom: {{property.titleSpacing}}px;
	}

	p {
		/* 사이트 디자인에 설정된 CSS 변수 활용 */
		font-family: var(--font-family-body);
		font-weight: var(--font-weight-body);
	}
	
</style>

CSS 및 Handlebars.js 로 작성된 스타일 예시

css

var(--font-family-heading)  /* 제목 폰트 */
var(--font-weight-heading)  /* 제목 폰트 굵기 */
var(--font-family-body)     /* 본문 폰트 */
var(--font-weight-body)     /* 본문 폰트 굵기 */

기본 제공되는 글로벌 CSS 변수

블록에 적용될 CSS 코드를 입력할 수 있어요.
입력된 CSS 코드는 웹사이트에 삽입된 각 블록 별로 격리되어 적용돼요.
일관된 블록 디자인을 위해서 일부 CSS 변수가 글로벌 변수로 제공돼요.
일반적인 CSS 문법과 다르게 추가로 Handlebars.js 문법을 지원해요.
Handlebars.js 문법으로 컨텍스트(Context) 값에 접근해서 동적인 디자인 구성에 활용할 수 있어요.
컨텍스트(Context) 값으로 동적인 디자인을 구성하지 않는다면, Handlebars.js 문법 없이 기본적인 CSS 코드만 입력하여 사용해도 괜찮아요.

🙋🏻 기본 HTML 디자인이 이상해요!

블록 메이커를 통해 제작되는 블록들은 다양한 기기에서 여러 테마에 적용되어도 최대한 동일한 블록 UI를 제공할 수 있도록 브라우저에서 기본 적용되는 디폴트 CSS 스타일이 대부분 초기화(Reset)되어 있어요.

🚨 CSS 셀렉터에 Handlebars.js 문법을 사용하지 말아주세요.

현재 블록 메이커 시스템 동작 방식에 의해 블록이 정상적으로 동작하지 않을 수 있어, CSS 셀렉터에서는 Handlebars.js 문법 사용을 지양주세요.

html

<!-- Bad -->
<style>
	.{{property.myClassName}} {
		color: red;
	}
</style>

<style> 태그 ​

`<style>` 태그