문장의 줄 간격을 조절하는 line-height 사용 방법
2018. 10. 21. 00:04
HTML 문서 내의 텍스트 문장의 줄 간격을 조절하는 CSS 요소가 있습니다. line-height 를 사용하시면 됩니다. 단위는 px, %, em을 사용하시면 됩니다. 참고로 1em은 100%를 의미합니다. 0.5em은 50%를 뜻하게 되는 샘 입니다. 역시 말로는 이해하기가 어려우므로 바로 사용 방법을 배워보겠습니다.
본문 전체에 적용하도록 내부스타일로 저렇게 마크업을 해두었습니다. 근데 살펴보시면 수치에 대한 단위를 표시하지 않았습니다. 이 경우는 "배"를 뜻합니다. 즉 예시에서 마크업의 의미는 1.5배라는 뜻 입니다.
결과물은 이렇게 출력됩니다. 만약 line-height 요소가 없다면 따닥 따닥 문장 사이사이가 붙어있어서 가독성이 떨어지게 됩니다. line-heignt 사용으로 가독성을 올릴 수 있습니다.
이번에는 2배로 떨어지게 만들어 보겠습니다.
보시는 것 처럼 문장 사이사이가 재법 많이 벌어짐을 확인하실 수 있습니다.
이번에는 2.5배로 적용시켜 보았습니다.
꽤 많이 간격이 떨어짐을 확인할 수 있습니다. 문장의 줄 간격을 조절할 때, line-height 를 사용해서 조절하실 수 있음을 기억하시기를 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
