를 사용하여 탭 들여쓰기하기

블로그 스타일 게시물에 사용할 수 있는 빠른 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">

![image|330x314, 50%](upload://8zsmHfqxlU5IrqSywrinvyDfhOx.png)

</div>

위 모든 내용을 적용했을 때의 결과: