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

텍스트 위젯 설정에서 줄간격 값을 변경하여 문장의 행간을 쉽게 조절할 수 있습니다. 그러나 이 방법은 텍스트 위젯에 입력된 모든 텍스트에 적용됩니다. 만약 문장의 행간을 개별적으로 세밀하게 조절하고 싶은 경우 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 값을 달리 입력해 문장마다 줄간격을 다르게 설정해보세요.

사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved. 


고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호

고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호


사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved.