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개의 공백 추가.