토큰으로 등록하지 않고 사용
이 템플릿은 기본적으로 엘리멘터의 디자인 토큰을 설정하는데 도움을 주도록 제작된 레퍼런스입니다. 하지만 이 템플릿에 포함 된 각각의 헤딩 위젯을 그대로 복사하여 붙여넣기로 사용해도 상관 없습니다.
Settings 레이어를 헤더 템플릿과 같이 페이지 전체에 공통적으로 사용되는 템플릿에 복사해두면 편리합니다.
핵심 레이어는 Settings 레이어와 원하는 헤딩 스타일의 위젯 레이어입니다.
헤딩 위젯은 H1부터 H6까지 데스크탑과 모바일 기기 모두 대응하며, Settings 레이어는 주로 모바일 기기에서의 font-weight 속성을 오버라이드합니다.
엘리멘터의 텍스트 관련 콘트롤러에서 font-weight는 모바일 대응을 하지 않기 때문에 별도로 Settings 레이어에서 명시하고 있습니다.
토큰으로 등록하여 사용
엘리멘터의 디자인 시스템에 등록하면 각 헤딩 위젯에 설정된 모든 값들을 중복없이 단일 CSS로 처리합니다.
엘리멘터 편집화면에서 좌측 햄버거 메뉴를 클릭 후, Site Settings → typography에서 H1 - H6에 해당하는 부분을 이 템플릿에서 제공하는 헤딩 위젯의 설정을 참고하여 설정합니다. Desktop과 Mobile 두 개의 Break Point 모두 설정하세요.
이렇게 토큰으로 설정하면 어디서든 헤딩 위젯을 생성해서 콘트롤러의 HTML Tag 값을 원하는 헤딩으로 변경하면 됩니다.
모바일 font-weight
아쉽게도 엘리멘터 Typography 설정에서 font-weight는 모바일이나 기타 다른 Break Point를 지원하지 않습니다. 그래서 어떤 기기에서 보든 동일한 두께의 텍스트를 보게 됩니다. 원한다면 이 템플릿에서 제공하는 모바일 font-weight를 특정 클래스를 추가해 사용할 수 있습니다.
헤딩 위젯의 Classes 필드에 jetcraft-heading 클래스를 추가하면 이 템플릿에 설정 된 모바일 대응 font-weight가 적용됩니다. 이 부분은 템플릿의 Settings 레이어에 명시되어 있으므로, 사이트의 공용 파트 어딘가에 반드시 Settings 레이어를 위치시켜야 합니다. 앞서 말한바와 같이 헤더 템플릿과 같은 곳이 좋습니다.
엑스트라 헤딩
이 템플릿에는 Extra Hading이라는 추가 헤딩이 있습니다. 이것은 주로 대문 슬라이드나 매우 큰 글자를 표현할 때 사용합니다. 이 헤딩은 엘리멘터 디자인 시스템에 추가할 수 없으므로 템플릿에서 직접 복사해서 붙여넣습니다.