• 가이드

텍스트 줄간격 고급 조절 방법 (행간, 코드)

텍스트 위젯 설정에서 줄간격 옵션을 변경하여 문장의 행간을 쉽게 조절할 수 있습니다. 그러나 이 방법은 텍스트 위젯에 작성된 모든 텍스트에 적용됩니다.

만약 문장마다 줄간격을 세밀하게 조절하고 싶다면 텍스트 에디터를 코드 뷰로 전환하여, CSS 스타일 속성을 추가하는 방식으로 조절할 수 있습니다. 단, 이 방법을 사용하기 위해선 HTML 및 CSS에 관한 지식이 필요합니다.

주의: 이 도움말에서는 텍스트 에디터에서 줄간격 및 일부 CSS 속성을 추가하는 방법에 관해서만 설명합니다. 그외 사용자가 임의로 편집한 부분에 대해서는 기술 및 고객지원이 불가합니다.

중요: 시작에 앞서

줄간격 속성을 추가하기 전 텍스트의 크기, 색상 등을 변경했다면 줄간격 속성이 정상적으로 작동하지 않습니다. 이 땐 먼저 텍스트에 적용된 스타일을 모두 초기화하고, CSS로 새롭게 스타일을 추가하는 것이 좋습니다.

모든 텍스트를 선택하고, 서식 제거 옵션을 클릭하여 텍스트 스타일을 초기화 할 수 있습니다.

줄간격 조절방법

  1. 텍스트 위젯을 마우스로 더블-클릭 후 텍스트 도구에서 코드보기 </> 아이콘을 클릭하여 텍스트 에디터를 코드뷰로 전환할 수 있습니다.

    중요: 코드를 편집한 후에는 반드시 코드보기 </> 아이콘을 다시 클릭해야 작업한 내용이 적용됩니다.

  2. 코드뷰로 전환되면 아래 그림과 같이 HTML 태그가 표시됩니다.

코드뷰로 전환하면 문장의 앞뒤가 <p></p> 태그로 묶인 걸 확인할 수 있습니다. p 태그는 HTML에서 문장을 작성할 때 사용합니다.

문장의 줄간격을 조절하기 위해선 p 태그줄간격 CSS 스타일 속성을 추가해야 합니다. 아래 그림과 같이 p 태그style 을 입력하여 해당 문장에 CSS 스타일을 추가할 것을 선언해 주세요.

  1. 구체적인 CSS 스타일 속성을 입력하기 위해 style 뒤에 ="" 를 추가로 입력합니다.

    <p style="">위에도 무엇인지 내 하나에 까닭...
  2. 쌍따옴표 사이에 구체적인 CSS 스타일 속성속성 값을 입력할 수 있습니다. 속성 값은 반드시 세미콜론(;)으로 끝나야 합니다.

    참고: 아래 예제에서는 줄간격(line-height) 속성이 추가되었으며, 값은 2.2가 입력되었습니다. 2.2 대신 220%와 같이 퍼센트 단위로 입력할 수도 있습니다.
    <p style="line-height: 2.2;">위에도 무엇인지 내 하나에 까닭...
  1. CSS 스타일 속성을 모두 입력했다면 텍스트 도구의 코드보기 </> 아이콘을 클릭합니다.

  2. 줄간격이 정상적으로 적용됐는지 확인하고, 텍스트 위젯 바깥 영역을 클릭해 편집을 종료합니다.

(선택 사항) 여러 스타일 속성 추가하기

하나의 문단에는 여러 스타일 속성을 추가할 수 있습니다. 만약 문단에 줄간격 뿐만 아니라 텍스트 크기, 색상 등의 스타일 속성을 모두 추가하려면 아래 도움말에 따라 추가해 보세요.

하나의 문단(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%

관련 도움말

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
704.5K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
3.3K
전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 이지페이, 엑심베이 공식파트너입니다.