CSS3 문장 들여쓰기 효과를 적용하는 text-indent 속성 사용법

오늘은 가독성을 올릴 수 있을 것 같은 첫 문장의 들여쓰기에 대해서 알아보고, 티스토리에서 어떻게 적용시키는지에 대해서도 알아보겠습니다. 먼저 들여쓰기란 무엇인지에 대해서 살펴보도록 하겠습니다.


  지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니다.


  지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니다.

보시면 스페이스로 두번 입력 후 문장이 시작하는 것 처럼 보입니다. 하지만 태그를 살펴보면 이렇게 되어 있습니다.


<p>&nbsp;&nbsp지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니다.</p>


처음에 &nbsp 라고 하는 특수기호 태그가 들어갔습니다. 즉 겉보기에는 멀쩡해 보여도 막상 태그 요소들을 살펴보면 이렇게 검색에서 다소 불리하게 적용될 수 있는 것들도 존재할 수 있다는 의미 입니다. 그래서 우리는 text-indent 라고 하는 CSS 스타일을 이용해서 들여쓰기 효과를 줄 수 있습니다.


안녕하세요?

안녕하세요?

안녕하세요?

안녕하세요?


이런식으로 첫 문장을 들여쓰기 하면 가독성이 더 향상될지도 모릅니다. 보통 책에서 많이 볼 수 있는 스탈이죠? 근데 저는 책을 잘 안 읽어서 이게 가독성이 높은건지 낮은건지는 잘 모르겠지만, 확실한건 들여쓰기를 하면 문단의 구분이 되니까 따지고보면 이게 가독성이 높아 보인다고 말씀드릴수도 있을 것 같습니다.

p {font-size: 30px;}
.hi01 {text-indent: 10px;}
.hi02 {text-indent: 30px;}
.hi03 {text-indent: 50px;}
.f01 {text-indent: 17px; font-size: 17px;}

바로 마크업을 해서 적용시켜 보겠습니다. 임시로 넣어 본 문장입니다. 결과는 어떻게 출력될까요? 아래를 살펴봐주시면 됩니다.


See the Pen text-indent by rgy0409 (@rgy0409) on CodePen.


보시면 text-indent 값이 커질수록 더욱 많이 떨어진다는 것을 알 수 있습니다. 가장 가독성이 좋아 보이는게 저의 경우는 딱 글자 한 칸 정도 떨어진 위치에서 시작하는 문장입니다. (개인차이가 있음) 그렇기 때문에 딱 이 정도 사이즈를 만드시려면, 폰트 크기와 indent 크기를 같게 해주시면 됩니다. 위의 예시 문장에서도 폰트 크기가 17이기 때문에 text-indent 값도 17px로 입력한게 그 이유입니다. 이런식으로 티스토리에서도 얼마든지 문장을 들여쓰기해서 가독성을 높일 수 있습니다. 끝.



"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유하기

댓글(0)

Designed by JB FACTORY