CSS3 문장 들여쓰기 효과를 적용하는 text-indent 속성 사용법
오늘은 가독성을 올릴 수 있을 것 같은 첫 문장의 들여쓰기에 대해서 알아보고, 티스토리에서 어떻게 적용시키는지에 대해서도 알아보겠습니다. 먼저 들여쓰기란 무엇인지에 대해서 살펴보도록 하겠습니다.
지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니다.
<p> 지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니다.</p>
보시면 스페이스로 두번 입력 후 문장이 시작하는 것 처럼 보입니다. 하지만 태그를 살펴보면 이렇게 되어 있습니다.
<p>  지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황이 다릅니다.</p>
처음에   라고 하는 특수기호 태그가 들어갔습니다. 즉 겉보기에는 멀쩡해 보여도 막상 태그 요소들을 살펴보면 이렇게 검색에서 다소 불리하게 적용될 수 있는 것들도 존재할 수 있다는 의미 입니다. 그래서 우리는 text-indent 라고 하는 CSS 스타일을 이용해서 들여쓰기 효과를 줄 수 있습니다.
<p>안녕하세요?</p>
<p class="hi01">안녕하세요?</p>
<p class="hi02">안녕하세요?</p>
<p class="hi03">안녕하세요?</p>
<hr>
<p class="hi02 f01">이런식으로 첫 문장을 들여쓰기 하면 가독성이 더 향상될지도 모릅니다. 보통 책에서 많이 볼 수 있는 스탈이죠? 근데 저는 책을 잘 안 읽어서 이게 가독성이 높은건지 낮은건지는 잘 모르겠지만, 확실한건 들여쓰기를 하면 문단의 구분이 되니까 따지고보면 이게 가독성이 높아 보인다고 말씀드릴수도 있을 것 같습니다.</p>
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로 입력한게 그 이유입니다. 이런식으로 티스토리에서도 얼마든지 문장을 들여쓰기해서 가독성을 높일 수 있습니다. 끝.
"친절한효자손 취미생활" 을 검색!
