텍스트 줄간격(행간) 조절하기 (기본·고급·게시판)

이 방법은 텍스트 위젯으로 작성된 텍스트의 전체 줄 간격 변경 시 유용합니다. 문장 또는 문단마다 부분 조절하려면 아래의 방법2를 참고해 주세요.

1. 디자인 모드에 접속합니다. 접속방법
2. 텍스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 컨텍스트 메뉴에서 텍스트 설정을 클릭합니다.

4. 객체 항목에서 줄간격 옵션을 수정합니다. 기본값은 Auto 입니다. 예를 들어, Auto를 삭제하고, 숫자 2.2를 입력할 수 있습니다.

   

5. 텍스트 설정 바깥 영역을 클릭해 적용을 완료합니다.
6. 텍스트 줄 간격이 정상적으로 변경되었는지 확인합니다.

텍스트 에디터로 글 작성 중, 문장마다(또는 문단마다) 줄 간격 조절이 필요할 때 이 방법을 사용할 수 있습니다.

1. 텍스트 위젯의 텍스트 에디터 또는 게시물 텍스트 에디터에서, 줄 간격을 조절할 문장을 마우스로 드래그하여 선택하고, 텍스트 도구에서 줄 높이 아이콘을 클릭합니다.

   

2. 아래 그림과 설명을 참고해 기본, 단일, 1.15, 1.5, 더블 중 하나를 선택합니다.

   

   • 기본: 공통 디자인 설정에서 지정한 줄 간격으로 표시됩니다.
   • 단일: 한 줄 간격으로 표시됩니다.
   • 1.15: 1.15배(115%) 간격으로 표시됩니다.
   • 1.5: 1.5배(150%) 간격으로 표시됩니다.
   • 더블: 2배(200%) 간격으로 표시됩니다.
3. 텍스트 에디터 바깥 영역을 클릭해 텍스트 작성을 완료합니다.
4. 텍스트 줄 간격이 정상적으로 변경되었는지 확인합니다.

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 웹 문서를 참고해 주세요.

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