블로그 스타일 게시물에 사용할 수 있는 빠른 CSS 포맷팅 팁을 몇 가지 알려드릴게요.
인덴트(들여쓰기)를 잘못하고 있어요. CSS로 이를 처리하는 올바른 방법은 다음과 같습니다(인덴트 기준은 2em):
common.scss 파일에서:
[data-theme-indent="indent"] {
text-indent: 2em;
}
게시물에서:
<div data-theme-indent="indent">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
</div>
또한 이미지와 정렬에 대해 다른 포맷팅을 원한다면:
common.scss 파일에서:
[data-theme-image="left"] {
float: left;
img {
margin: 0 1em 0 0;
border-radius: 6px;
}
}
[data-theme-image="right"] {
float: right;
img {
margin: 0em 0em 0em 1em;
border-radius: 6px;
}
}
게시물에서:
<div data-theme-image="left">

</div>
위 모든 내용을 적용했을 때의 결과:
