텍스트 줄간격 고급 조절 방법 (코드, 고급)
텍스트 위젯 설정에서 줄간격 옵션을 변경하여 문장의 행간을 쉽게 조절할 수 있습니다. 그러나 이 방법은 텍스트 위젯에 작성된 모든 텍스트에 적용됩니다.
만약 문장마다 줄간격을 세밀하게 조절하고 싶다면 텍스트 에디터를 코드 뷰로 전환하여, CSS 스타일 속성을 추가하는 방식으로 조절할 수 있습니다. 단, 이 방법을 사용하기 위해선 HTML 및 CSS에 관한 지식이 필요합니다.
중요: 시작에 앞서
줄간격 속성을 추가하기 전 텍스트의 크기, 색상 등을 변경했다면 줄간격 속성이 정상적으로 작동하지 않습니다. 이 땐 먼저 텍스트에 적용된 스타일을 모두 초기화하고, CSS로 새롭게 스타일을 추가하는 것이 좋습니다.
모든 텍스트를 선택하고, 서식 제거 옵션을 클릭하여 텍스트 스타일을 초기화 할 수 있습니다.
줄간격 조절방법
텍스트 위젯을 마우스로 더블-클릭 후 텍스트 도구에서 코드보기 </> 아이콘을 클릭하여 텍스트 에디터를 코드뷰로 전환할 수 있습니다.
중요: 코드를 편집한 후에는 반드시 코드보기 </> 아이콘을 다시 클릭해야 작업한 내용이 적용됩니다.
코드뷰로 전환되면 아래 그림과 같이 HTML 태그가 표시됩니다.
코드뷰로 전환하면 문장의 앞뒤가 <p> 와 </p> 태그로 묶인 걸 확인할 수 있습니다. p 태그는 HTML에서 문장을 작성할 때 사용합니다.
문장의 줄간격을 조절하기 위해선 p 태그에 줄간격 CSS 스타일 속성을 추가해야 합니다. 아래 그림과 같이 p 태그에 style 을 입력하여 해당 문장에 CSS 스타일을 추가할 것을 선언해 주세요.
구체적인 CSS 스타일 속성을 입력하기 위해 style 뒤에 ="" 를 추가로 입력합니다.
<p style="">위에도 무엇인지 내 하나에 까닭...쌍따옴표 사이에 구체적인 CSS 스타일 속성과 속성 값을 입력할 수 있습니다. 속성 값은 반드시 세미콜론(;)으로 끝나야 합니다.
참고: 아래 예제에서는 줄간격(line-height) 속성이 추가되었으며, 값은 2.2가 입력되었습니다. 2.2 대신 220%와 같이 퍼센트 단위로 입력할 수도 있습니다.<p style="line-height: 2.2;">위에도 무엇인지 내 하나에 까닭...
CSS 스타일 속성을 모두 입력했다면 텍스트 도구의 코드보기 </> 아이콘을 클릭합니다.
줄간격이 정상적으로 적용됐는지 확인하고, 텍스트 위젯 바깥 영역을 클릭해 편집을 종료합니다.
(선택 사항) 여러 스타일 속성 추가하기
하나의 문단에는 여러 스타일 속성을 추가할 수 있습니다. 만약 문단에 줄간격 뿐만 아니라 텍스트 크기, 색상 등의 스타일 속성을 모두 추가하려면 아래 도움말에 따라 추가해 보세요.
하나의 문단(p)에는 여러 스타일을 동시에 추가할 수 있습니다. 아래 예제에서는 한 문단에 줄간격(line-height), 텍스트 색상(color), 텍스트 크기(font-size) 속성이 적용되었습니다.
아래는 텍스트 작성에 자주 쓰는 스타일 속성을 안내합니다. 더 다양한 CSS 스타일 속성 정보는 W3Schools 또는 MDN 웹 문서를 참고해 주세요.
| 속성 | 설명 | 값/단위 | 예시 |
| font-size | 텍스트 크기를 변경합니다. | PX(픽셀) | font-size: 18px; |
| color | 텍스트 색상을 변경합니다. | HEX RGB RGBA | color: #212121; color: rgb(222, 222, 222); color: rgba (222, 222, 222, 0.5); |
| line-height | 줄간격을 변경합니다. | 숫자 또는 % *소수점 허용 | line-height: 1.25; line-height: 125% |