• 가이드

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

텍스트 위젯 설정에서 줄간격 값을 변경하여 문장의 행간을 쉽게 조절할 수 있습니다. 그러나 이 방법은 텍스트 위젯에 입력된 모든 텍스트에 적용됩니다. 만약 문장의 행간을 개별적으로 세밀하게 조절하고 싶은 경우 CSS 스타일 코드를 활용할 수 있습니다.

이 방법은 HTML 및 CSS 코드에 대한 약간의 이해가 필요할 수 있습니다.

주의 : 이 도움말은 텍스트 위젯에 입력한 문장의 줄간격을 조절하는 CSS 코드 사용방법에 관해 설명하고 있으며, 사용자가 임의로 변경 및 추가한 부분에 대한 기술 및 고객지원은 불가합니다.

조절방법

1단계, 텍스트 위젯 추가 및 코드뷰 전환하기
  1. 디자인 모드에 접속합니다. 접속방법
  2. 페이지에 텍스트 위젯을 추가합니다. 위젯 추가방법
  3. 텍스트 위젯을 마우스로 더블-클릭합니다.
  4. 텍스트 편집기가 나오면 줄간격의 변화를 확인할 수 있도록 충분한 길이의 문장을 입력합니다.
  5. 텍스트 도구에서 코드보기  를 클릭하여 코드뷰로 전환합니다.

2단계, CSS 줄간격 속성 삽입하기
  1. 코드뷰로 전환되면, 아래와 같이 문장의 처음과 끝이 <p>와 </p> 태그로 묶인 걸 확인할 수 있습니다.

    <p>디자이너 LINDA에서 제작되는 제품들은, 재료의 재질감이 잘 살려진 것으로 좋은 평가 받았습니다. 제품 하나, 하나 수작업으로 제작된 디자인 제품들은 친화경적이고, 여성의 아름다움을 잘 살린 디자인 제품들이 많습니다.</p>
    
  2. <p> 태그에 줄간격을 조절하는 CSS 속성을 추가합니다. 다음의 속성 코드를 복사해 <p > 사이에 삽입해주세요.
    속성 코드: style="line-height: 줄간격"
  3. 삽입을 완료하면 아래와 같이 CSS 코드가 <p> 태그 안에 삽입됩니다.

    <p style="line-height: 줄간격;">디자이너 LINDA에서 제작되는 제품들은, 재료의 재질감이 잘 살려진 것으로 좋은 평가 받았습니다. 제품 하나, 하나 수작업으로 제작된 디자인 제품들은 친화경적이고, 여성의 아름다움을 잘 살린 디자인 제품들이 많습니다.</p>
    
  4. 줄간격이라 작성된 부분을 삭제하고, 실제로 적용할 줄간격을 숫자로 입력합니다. 예를 들어 2.2를 입력할 수 있습니다.

    <p style="line-height: 2.2;">디자이너 LINDA에서 제작되...
    
  5. 다시 텍스트 도구의 코드보기  를 클릭해, 줄간격이 정상적으로 변경되는지 확인합니다.

  6. 잘 변경 되었으면 텍스트 편집기 바깥 영역을 클릭해, 텍스트 편집을 종료합니다.

(선택 사항) 여러 문장의 줄간격을 변경하려면?

만약 텍스트를 여러 문장으로 작성한 경우, 각 문장의 <p> 태그마다 line-height 값을 추가해줍니다. 필요에 따라 line-height 값을 달리 입력해 문장마다 줄간격을 다르게 설정해보세요.

목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

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

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

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