글쓰기를 편리하고 재미있게 만들어줍니다
글 쓸 때는 글에만 집중할 수 있도록
정보 전달이 필요한 긴 글이 많은 페이지에서 제목과 본문, 미디어 요소간의 간격을 매번 지정하는 것은 매끄러운 글 작성에 방해가 됩니다. 이 템플릿은 글을 작성할 때 다른 요인에 방해받지 않고 글에만 집중할 수 있도록 서식을 체계화 시켰습니다.
서식에 사용된 레퍼런스
제목과 제목 사이의 간격, 제목과 본문 사이의 간격, 본문의 행간과 자간 등, 서식은 미묘한 설정 차이에도 페이지의 균형이 크게 달라지곤 합니다. 이 템플릿은 공신력 있는 사이트들의 공통분모를 찾아 적절히 반영하였습니다.
NHN Corp.
‘네이버’의 자회사 NHN의 사이트는 주로 H3 이하의 작은 제목과 블로그가 아닌 일반 페이지의 본문부 서식을 매우 깔끔하게 표현합니다. 부제목과 행간, 자간, 테이블과 미디어 요소 등 페이지의 본문에 해당하는 양식에 대해 이 사이트를 참조하였습니다.
하이브랩
‘하이브랩’은 에이전시입니다. H3 이상의 대제목과 부제목, 페이지 각 요소들의 여백을 잘 표현하여 이 사이트를 참조하였습니다.
Kakao Corp.
‘카카오’는 티스토리, 브런치 등 여러 블로그 서비스를 운영중인 만큼 비교적 블로그 본문부 글 서식이 잘 짜여져 있습니다. NHN과 하이브랩에서는 일반 페이지의 서식을, 카카오에서는 블로그 페이지의 서식을 참조하였습니다.
컨테이너 설정
이 템플릿의 양식을 적용하고자 하는 최상위 부모 컨테이너를 다음과 같이 설정합니다.
- Layout 탭의
Gap필드는0을 입력합니다. 이는 위젯간의 불필요한 여백을 방지합니다. - Advanced 탭의
padding필드는0을 입력합니다. - Advanced 탭의
CSS Classes필드에jetcraft-comp jetcraft-block-content-01을 입력합니다. 🚀 Settings - jetcraft-block-content-01레이어는 템플릿의 핵심 스타일입니다. 템플릿과 항상 함께 있어야 합니다. 엘리멘터의 글로벌 위젯으로 등록하거나 페이지 템플릿에 전역적으로 위치해 놓으면 더욱 편리합니다.
이제 준비는 끝났습니다. 다운로드 받은 템플릿의 예시 레이어들을 복사하거나 참고하여 글을 작성합니다.
템플릿 고급 설정
템플릿 스타일에 대하여
🚀 Settings - jetcraft-block-content-01에는 사용자가 수정해도 문제가 없는 몇 가지 스타일에 대해 지역 변수로 설정해 가장 상위에 위치해 두었습니다.
| 클래스 이름 | 동작 |
--margin-default | 대부분의 공통된 경우에 사용된 여백 |
--margin-after-heading | 헤딩과 헤딩 사이의 여백 |
--margin-after-el | 헤딩이 아닌 요소와 헤딩 사이의 여백 |
--margin-paragraph | p 태그 사이의 여백 |
추가로, 컨테이너 혹은 Text Editor Widget의 CSS Classes 필드에 extended를 입력하면 --margin-after-el의 값이 변경되어 헤딩이 포함된 문단 사이의 거리를 더 넓힐 수 있습니다. 좀 더 시원한 여백을 원한다면 사용하세요.
그리고 템플릿 내부에 사용되는 모든 h1 - h6 헤딩 요소는 Jetcraft Design Token과 동일하게 설정되었습니다.
Heading Widget에 대하여
이 템플릿 내부에 생성되는 헤딩 위젯의 h1 - h6는 다른 요소와의 조화를 위해 사전에 정의된 여백이 있습니다. 사전 정의된 여백이 필요치 않거나 변경을 원하면 해당 위젯의 Advanced 탭의 margin 필드에 원하는 값을 넣으세요.
Text Editor Widget에 대하여
에디터 내부의 이미지 / 비디오 요소의 캡션 사용하기
Text Editor Widget에는 Add Media 버튼을 통해 이미지나 비디오 요소를 직접 삽입할 수 있지만 캡션은 따로 추가되지 않습니다. 캡션을 추가하거나 요소를 정렬하려면 Classic Editor 플러그인을 설치하세요. 이 플러그인은 워드프레스 사용자라면 필수이기도 합니다. 해당 플러그인이 설치되지 않으면 캡션을 사용하는 일부 예시가 마크업이 그대로 노출되고 제대로 표현되지 않습니다.
에디터 내부에서 리스트 사용하기
에디터 위젯 내부에서 사용된 ul 혹은 ol에 대해 사전 정의된 스타일이 있습니다.
에디터 내부에서 <details> 사용하기
이디터 내부에서 <details><summary></summary></details>에 대해 사전 정의된 스타일이 있습니다.
위젯 사이의 여백
사전 정의된 여백은 기본적으로 자주 사용되는 헤딩 위젯과 텍스트 에디터 위젯 이외에는 설정된 것이 없습니다. 위젯 사이의 간격은 해당 위젯의 콘트롤러를 통해 직접 입력합니다.
컨테이너 쿼리 사용하기
컨테이너 쿼리는 미디어 쿼리의 상위호환격인 메소드로, 디바이스의 크기가 아닌 컨텐츠 요소의 크기에 반응합니다. 템플릿에는 컨텐츠가 너비가 1024px 이하인 경우에 쿼리가 작동하도록 설정되어 있습니다. 예시 중에 ‘Container Query를 사용한 섹션 구조’를 살펴보죠.
2개의 컨테이너를 포함하고 있는 부모 컨테이너의 CSS Classes 필드에 jetcraft-media-container를 입력되어 있고, 자식 컨테이너 중 왼 편의 컨테이너에는 jetcraft-col-heading 클래스가 입력되어 있습니다.
이는 결과적으로 jetcraft-media-container의 너비가 1024px 이하가 되면 jetcraft-col-heading 컨테이너가 수평에서 수직 정렬로 변경됩니다. 컨텐츠 너비가 좁은 곳에서는 헤딩이 수평 정렬이 아니라 수직 정렬이 되는 형태입니다.
유틸리티 클래스
Text Editor 위젯 내부의 h1 - h6 그리고 p 태그 등의 요소는 콘트롤러로 여백을 조절할 수 없으므로 미리 준비된 클래스가 몇 가지 있습니다. 이 클래스들은 요소의 상단이나 하단 여백을 추가로 조정해야 할 때 쓸 수 있습니다.
에디터 내부 요소에 여백이 필요한 경우, ‘마진 상쇄’가 일어나는 특성상 padding으로 추가 여백을 처리합니다.
| 클래스 이름 | 동작 |
.pt-extend | 상단에 32px의 여백 생성 |
.pt-half | 상단에 16px의 padding 생성 |
.pb-extend | 하단에 32px의 padding 생성 |
.pb-half | 하단에 16px의 padding 생성 |
.pt-0 | 상단 padding 제거 |
.pb-0 | 하단 padding 제거 |
.mt-0 | 상단 margin 제거 |
.mb-0 | 하단 margin 제거 |