친절한효자손 취미생활

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


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


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


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


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


처음에 &nbsp 라고 하는 특수기호 태그가 들어갔습니다. 즉 겉보기에는 멀쩡해 보여도 막상 태그 요소들을 살펴보면 이렇게 검색에서 다소 불리하게 적용될 수 있는 것들도 존재할 수 있다는 의미 입니다. 그래서 우리는 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로 입력한게 그 이유입니다. 이런식으로 티스토리에서도 얼마든지 문장을 들여쓰기해서 가독성을 높일 수 있습니다. 끝.




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

공유하기

facebook twitter kakaoTalk kakaostory naver band