• 가이드

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

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

이 도움말에서는 게시물 텍스트 에디터를 코드뷰로 전환하여 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. 줄간격이 정상적으로 적용됐는지 확인하고, 텍스트 위젯 바깥 영역을 클릭해 편집을 종료합니다.

관련 도움말

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

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

아임웹에서 당신의 생각을 표현해보세요.
704.5K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
3.3K
전국 파트너/리셀러 수

아임웹 공식제휴사

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