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

게시물의 줄간격은 공통 디자인 설정에서 설정한 값을 따라갑니다. 

그런데 만약 공통 줄 간격 값이 페이지 텍스트에는 적절하지만, 게시물에서는 너무 넓거나 좁은 경우 해당 게시물의 줄 간격을 변경해야 할 필요가 있습니다.

이 도움말에서는 CSS 코드를 사용해 줄 간격을 변경하는 방법을 설명합니다.

1단계: 게시물 코드 뷰로 전환하기

1. 게시판이 삽입된 메뉴로 이동합니다.
2. 게시물을 클릭하고 수정을 클릭합니다.
3. 텍스트 도구에서 코드보기  를 클릭합니다.

2단계: 줄간격 CSS 값 추가하기

게시물 코드를 보면 문장마다 <p>와 </p> 태그로 묶인 걸 알 수 있습니다. 이처럼 HTML은 열림 태그와 닫기 태그로 구성됩니다. 위 p 태그는 문장을 쓸 때 사용하며, 그 외에도 링크를 위한 a 태그, 이미지를 위한 img 태그 등 페이지에 콘텐츠를 표현하기 위한 다양한 태그가 존재합니다.

우리는 이렇게 추가한 태그에 CSS를 사용해 줄 간격 스타일을 추가할 것입니다. 줄 간격 스타일을 조절할 수 있는 CSS 속성은 line-height 입니다.

이 단계에서는 각 p 태그에 line-height 값을 추가하여 각 문장마다 줄 간격을 조절할 것입니다.

1. 아래의 코드를 복사합니다.

   <p style="line-height: 줄간격;">

2. 복사한 코드를 메모장에 붙여넣습니다.

3. 메모장에서 "줄간격"이라 작성된 부분을 삭제하고, 줄간격 숫자를 입력합니다. 줄간격 단위로는 배수(숫자만 입력), %, em, px 이 있습니다. 처음 시작하시는 분들은 편의를 위해 %를 사용하셔도 됩니다.
   주의: "줄간격" 글자를 삭제할 때 세미콜론(;)까지 삭제하지 않도록 주의해 주세요.

   

4. 메모장에 입력한 코드를 복사합니다.

5. 이제 게시물 코드에서 줄 간격을 조절하고 싶은 문장의 <p> 태그를 지우고, 위 4번에서 복사한 코드를 붙여넣습니다. 그럼 아래의 그림처럼 입력됩니다.

   참고: 필요에 따라 문장마다 다른 줄간격을 적용할 수도 있습니다.

   

6. 코드 대치를 완료했다면, 텍스트 도구의 코드보기 를 꼭 클릭해 주세요.

   주의: 코드보기를 다시 클릭하지 않으면 작업한 코드들이 모두 초기화 될 수 있습니다.

7. 줄 간격이 원하는 크기로 설정되었다면, 오른쪽 상단의 수정 버튼을 클릭해 완료합니다.
8. 게시물의 텍스트 줄 간격이 원하는 크기로 변경되었는지 확인합니다.