별찌 사용가이드


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

관리자페이지

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

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

이 도움말에서는 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

통신판매업신고번호 : 서울금천-1375

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

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

주소 : 서울특별시 금천구 가산디지털1로 168, 우림라이온스밸리 A동 703호

호스팅주소 : 서울특별시 금천구 가산디지털1로 168, 우림라이온스밸리 A동 703호

BYULZZI


2012년 3월 자체 개발한 솔루션으로부터 모바일앱 제작을 시작으로, 2014년 6월 부터는 PC홈페이지와 모바일웹, 어플이 연동되는 시스템을 개발 및 제작해 왔습니다.

그동안의 노하우를 바탕으로 2016년 1월 반응형웹앱/쇼핑몰웹앱을 출시하여 다양한 업종의 웹사이트를 구축 하였습니다.  

특히, 웹사이트에서의 모든 활동은 스마트폰으로 실시간 알림을 주고 받을 수 있게 연동되어야만 한다는 슬로우건 아래 시장을 선도하고 있습니다.


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi