문단 맨 앞에 공백을 삽입하는 방법 [띄어쓰기, 들여쓰기, 내어쓰기]

워드프레스 정보를 제공하는 블로그 Avada 2019. 9. 9. 00:00 • 댓글:

HTML에서는 스페이스를 여러 번 눌러 공백을 추가해도 공백이 하나밖에 추가되지 않습니다. 그리고 워드프레스에서도 문단 맨 앞에 스페이스를 눌러 공백을 추가해도 공백이 추가되지 않고, 글 중간에 여러 개의 공백을 넣어도 하나밖에 공백이 추가되지 않습니다.

이 경우에는, 잘 아시겠지만, HTML 소스 편집 화면에서 표현하고자 하는 공백의 개수만큼  를 추가하면 됩니다.  의 nbsp는 Non-breaking Space의 약자입니다.

문단 맨 앞에 공백을 삽입하기 [띄어쓰기, 들여쓰기, 내어쓰기]

워드프레스나 티스토리 등에서 글을 작성할 때 제목이나 문단 맨 앞에 공백을 추가하여 띄어쓰기 하고 싶은 경우: 모든 문단에 대하여 적용하고 싶다면 CSS를 통해 간단히 문단 맨 앞에 text-indent 속성을 적용하여 들여쓰기 하는 것이 가능합니다.

text-indent 속성

  • 들여쓰기내어쓰기는 text-indent 속성으로 만들 수 있습니다.
  • text-indent 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다.
  • 내어쓰기를 할 때는 왼쪽에 적절한 여백을 추가하도록 합니다.

실제 CSS 코드는 사용하는 워드프레스 테마에 따라 조금씩 다릅니다. 인기 매거진 테마인 Newspaper에서는 다음과 같은 CSS 코드를 사용할 수 있습니다.

.td-post-content p {
    text-indent: 2em;
}

이 코드를 적용해보면 다음과 같이 문단 앞에 공백이 추가됩니다.

문단 들여쓰기

특정 문단에만 적용하고 싶거나 글 중간에 공백을 추가하고 싶은 경우 직접  를 입력할 수 있습니다.

워드프레스 공백 추가하기

블록 에디터(구텐베르크 편집기)에서 작업하는 경우 블록을 선택하고 점 3개 모양의 아이콘을 클릭한 후 HTML로 편집을 클릭합니다.

 

워드프레스 공백 추가

원하는 곳에 표현하고자 하는 공백의 개수만큼  를 추가하도록 합니다. 저장하고 글을 확인해보면 띄어쓰기가 되어 있는 것을 확인할 수 있을 것입니다.

워드프레스에서 CSS 코드를 추가하는 방법은 "워드프레스에서 CSS 추가하기"를 참고해보세요.

※ 티스토리에서도 마찬가지로 HTML 편집 화면에서  를 여러 개 입력하여 공백을 추가할 수 있습니다. 예시:    3개의 공백 추가.