thumbnail

게시판 게시물의 텍스트 줄간격 고급 조절 방법 (행간, 코드)

게시판의 게시물 줄간격은 텍스트 도구에서 줄간격 도구를 사용해 간단하게 조절할 수 있습니다. 그러나 만약 더 세밀한 줄간격 조절이 필요하다면 코드를 사용해 원하는 간격으로 조절할 수 있습니다.

이 도움말에서는 게시물 텍스트 에디터를 코드뷰로 전환하여 CSS 스타일을 추가해 텍스트 간격을 조절하는 방법을 설명합니다.

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

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

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

  1. 게시판이 삽입된 메뉴로 이동합니다.

  2. 글쓰기 버튼을 클릭하고, 줄간격을 확인할 수 있도록 충분한 길이의 텍스트를 작성합니다.

  3. 텍스트 도구에서 코드보기 </> 아이콘을 클릭합니다.

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

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

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

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

  2. 쌍따옴표 사이에 구체적인 CSS 스타일 속성과 속성 값을 입력할 수 있습니다. 속성 값은 반드시 세미콜론(;)으로 끝나야 합니다.

    참고: 아래 예제에서는 줄간격(line-height) 속성이 추가되었으며, 값은 2.2가 입력되었습니다. 2.2 대신 220%와 같이 퍼센트 단위로 입력할 수도 있습니다.

  1. CSS 스타일 속성을 모두 입력했다면 텍스트 도구의 코드보기 </> 아이콘을 클릭합니다.

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