위멘토 사용가이드


포토샵을 못해도 코딩을 못해도 쉽고 간편하게 관리 해보세요

위멘토 사용 가이드

사이트 편집(디자인모드)게시판 게시물의 텍스트 줄간격 조절 방법 (고급, 코드)

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


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

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

이 도움말에서는 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. 게시물의 텍스트 줄 간격이 원하는 크기로 변경되었는지 확인합니다.


INFORMATION


상호명 : (주)위멘토


사업자등록번호 : 506-87-00931

통신판매업번호 : 제2022-서울강서-1096호 

고객센터 : 1800-2142 ∣ 이메일 : sales@wemento.kr

대표자 : 김성진 ∣ 개인정보책임자 :김성진

주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호

호스팅주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi