초기화
필요성
초기화 코드의 필요성
Jetcraft 웹 사이트에서 본 템플릿의 모양새 그대로 사용자의 환경에서 온전히 재현하기 위해 고려해야 할 사항을 정의해 놓은 짧은 CSS 코드. 워드프레스 자식 테마의 functions.php에 직접 입력하거나 Code Snippets 플러그인을 설치 후 다운받은 템플릿을 Import 합니다.
초기화를 하지 않아도 제공되는 템플릿 자체 스타일의 조형은 거의 동일하나, 미리보기가 어렵고 디테일한 부분에서 차이가 날 수 있습니다.
코드를 직접 삽입할 때 아래 코드에서 1번 라인의 <?php는 삭제해 주세요. 이 문서의 코드하이라이팅을 위해 사용한 부분입니다.
초기화 전 템플릿 편집화면
초기화 후 템플릿 편집화면
글꼴 통일
Jetcraft에서는 Pretendard 글꼴을 사용합니다. Noto Sans KR이 가진 자간 문제, 알파벳과 한 줄에 같이 쓰일 때의 높이 문제 따위가 해결되어 이미 많은 곳에서 범용적으로 사용되고 있습니다. 글꼴 제작자의 웹사이트 서두에 설명이 잘 정리되어 있으니 참고.
제작자가 제공하는 다이나믹 서브셋의 경우, font-weight 개당 25kb, 한 페이지에서 다섯가지의 두께를 사용해도 총 100kb 정도의 경량입니다. 기존에 사용하던 글꼴을 그대로 사용해도 문제가 없습니다. 다만 글꼴이 가진 특성에 따라 자간, 행간 등 표현이 조금씩 다를 수 있습니다.
기존 글꼴을 유지하거나 이미 프리텐다드를 사용중이라면 코드의 3 - 14 라인을 삭제하세요. 그리고 31 라인에 Jetcraft의 템플릿에서 사용할 글꼴을 현재 사용중인 글꼴이름으로 변경합니다.
스타일 초기화
스타일 초기화는 사용자의 워드프레스에서 사용중인 글로벌 설정이 템플릿에 영향을 주지 않도록 합니다. 반대로 템플릿 역시 사용자의 어떤 설정도 변경하지 않습니다.
엘레멘터 편집환경 조정
엘레멘터 편집 화면에서 아이콘이나 텍스트, 컨테이너 요소를 작게 만들 때 강제로 15px의 여백이 발생하는 부분을 조정합니다. 요소의 크기가 너무 작아
편집기가 선택할 수 없는 경우를 대비해 최소 여백을 넣어둔 것인데, 이것이 라이브 편집에서 의도치 않은 여백을 발생시킵니다.
그동안 작업중에 아이콘이나 텍스트, 컨테이너 하단에 알 수 없는 여백이 자꾸 생긴다거나 했다면 이 문제입니다.
요소 가림
많은 엘레멘터 사용자가 container와 section 템플릿에서 타이틀과 사이트 헤더를 감출 수 있는 기능의 추가를 요청했지만 아직 고쳐지지 않고 있습니다. 사이트 헤더는 경우에 따라 참고해야 하는 경우가 있으므로 템플릿 타이틀만 가리도록 하였습니다.
Jetcraft에서 제공하는 HTML 위젯은 Navigator 바에서 확인 할 수 있으므로 라이브 편집 화면에서는 가려집니다.
그리드
템플릿 파일 내부에 모양새 확인을 위한 그리드 레이어가 있습니다. Jetcraft 웹 사이트에서 격자를 토글했을 때와 동일한 그리드이며, 템플릿이 사용자의 편집환경에서 동일하게 재현되는지 확인할 때 사용할 수 있습니다.