위멘토 사용가이드


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

위멘토 사용 가이드

가이드 297

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


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

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

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


게시물 대표이미지를 본문에서 숨기는 방법



게시물 본문에 첨부한 이미지 중 하나를 게시물의 대표 이미지로 설정할 수 있습니다. 게시물 대표 이미지는 아래 그림과 같이 게시판의 썸네일로 사용될 수 있습니다.

여기서 지정한 대표 이미지를 게시판 썸네일로는 사용하지만, 게시물 본문에서는 표시되지 않도록 숨기려면 이 도움말을 참고할 수 있습니다.

참고: 대표 이미지가 게시판 썸네일로 표시되려면, 게시판 스타일이 썸네일을 표시하는 스타일이어야 합니다. 예를 들어, 텍스트로 구성된 일반 게시판은 게시판 썸네일이 표시되지 않습니다.



1단계: 게시물 추가하기



  1. 내 사이트에 접속 후 게시판이 삽입된 페이지로 이동합니다.
  2. 게시판의 글쓰기 버튼을 클릭합니다.
  3. 텍스트 에디터가 나오면 이미지 첨부  아이콘을 클릭합니다.
  4. 대표 이미지로 사용할 이미지를 선택해 올려줍니다.
  5. 필요에 따라 글과 이미지를 계속해서 추가해 게시물을 작성합니다.




2단계: 대표 이미지 지정하기



게시물에 올린 이미지가 2개 이상인 경우, 게시물의 대표 이미지를 지정해야 합니다. 텍스트 에디터 왼쪽에서 대표 이미지를 마우스로 클릭해 주세요.

이미지를 대표 이미지 1개만 올린 경우, 자동으로 대표 이미지로 지정되므로 이 과정은 건너 뜁니다.

중요: 대표 이미지를 지정할 수 없는 경우, 디자인 모드에 접속해 게시판 설정을 열고, 대표 이미지 지정기능 사용 옵션이 해제되지 않았는지 확인해 주세요.





3단계: 대표 이미지 숨김 처리하기



  1. 텍스트 에디터 오른쪽 끝의 코드 보기 아이콘을 클릭합니다.

  2. 마우스 휠 스크롤을 움직여 <p style="text-align: left;"> 로 시작하는 코드를 찾습니다.
  3. 코드에서 <p style="text-align: left; 와 "> 사이에 ▼아래의 CSS 속성을 추가합니다.

    display:none;
  4. CSS 속성을 추가하면 아래 그림과 같이 코드가 완성됩니다.

    주의: 코드 내 특수기호(; 또는 ")가 빠지거나 추가되지 않았는지 잘 확인해 주세요.

  5. 다시 코드 보기 아이콘을 클릭하면 텍스트 에디터에서 대표 이미지가 숨겨진 걸 확인할 수 있습니다.
  6. 오른쪽 상단의 작성 버튼을 클릭해 게시물을 올려줍니다.





4단계: 게시판 썸네일 및 본문 대표 이미지 확인하기



  1. 게시판 메뉴로 이동합니다.
  2. 게시판에 대표 이미지 썸네일이 표시되는지 확인합니다.
  3. 게시물을 클릭해 게시물 본문에는 대표 이미지가 숨겨졌는지 확인합니다.


카카오 API키 발급 및 적용방법 (카카오 링크)



방문자는 공유하기 아이콘을 클릭해, 내 사이트의 콘텐츠(상품, 게시물 등)를 간편하게 메신저, SNS에 공유할 수 있습니다. 이 도움말에서는 카카오톡 공유 및 카카오 스토리 공유를 위한 카카오 API키 발급 및 적용방법을 설명합니다.

중요: 2018년 6월 1일부로 카카오 링크 2.0 정책 변경으로 인해 카카오톡, 카카오 스토리에 공유 기능을 사용하기 위해선 카카오 개발자센터에서 API 키를 발급받아 내 사이트에 적용해야 합니다.  카카오 개발자센터 공지 확인하기

 


1단계: 카카오 개발자 페이지 접속하기

  1. 카카오 디벨로퍼스에 접속합니다.
  2. 오른쪽 상단의 로그인 버튼을 클릭해 카카오 계정으로 로그인 합니다. *카카오 계정이 없는 경우 새롭게 계정을 생성합니다.




2단계: 내 애플리케이션 만들기

  1. 상단 메뉴에서 내 애플리케이션을 클릭합니다.
  2. 서비스 이용 동의 페이지가 나타나는 경우 필수 항목에 동의하고, 개발자 이름을 입력한 다음 회원가입 버튼을 클릭해 다음 단계로 넘어갑니다. (기존에 서비스 이용 동의한 경우 표시되지 않을 수 있습니다.)
  3. 전체 애플리케이션 페이지가 나타나면, 애플리케이션 추가하기를 클릭합니다.
  4. 앱 아이콘(로고)을 업로드하고, 앱 이름, 회사 이름을 작성합니다. 5. 저장 버튼을 클릭합니다.





3단계: 플랫폼 설정하기

  1. 전체 애플리케이션 목록으로 돌아가면, 새로 추가한 앱을 클릭합니다.
  2. 플랫폼 항목에서 플랫폼 설정하기를 클릭합니다.
  3. Web 항목의 Web 플랫폼 등록 버튼을 클릭합니다.
  4. 운영 중인 사이트 주소(URL)를 입력합니다. 여러 개의 도메인을 사용하고 계신 경우, Enter로 구분해 도메인을 모두 입력합니다.
주의: http:// 및 https:// 를 정확히 구분해 입력해 주세요.

     5.저장 버튼을 클릭해 적용합니다.





4단계: 발급 받은 Javascript 키 복사하기

  1. 왼쪽 탭 메뉴에서 앱 키를 클릭합니다.
  2. JavaScript 키 오른쪽 복사버튼을 클릭합니다.







5단계: 내 사이트에 JavaScript 키 적용하기

  1. 내 사이트 관리자 페이지에 접속합니다. 
  2. 왼쪽 메뉴에서 [환경설정 > 소셜 로그인 / API 설정]을 클릭합니다.
  3. 상단 공유 및 API 설정 탭 메뉴를 클릭합니다.
  4. 카카오 링크 항목에서 카카오 링크 사용을 선택합니다.
  5. API 키 오른쪽 빈 칸에, 위 4단계에서 복사한 JavaScript 키를 붙여넣습니다.


      6. 저장 버튼을 클릭해 적용합니다.







사업자정보조회 확인 링크 추가하기 (통신판매업 신고 확인)




온라인 쇼핑몰을 운영하려면 필수로 사업자정보 및 통신판매업신고가 필요하며, 고객이 신고여부를 확인할 수 있도록 링크를 제공해야 합니다.

이 도움말에서는 방문자가 쇼핑몰 운영자의 사업자정보 및 통신판매업신고 정보를 확인할 수 있도록 웹사이트 하단에 사업자정보조회 링크를 추가하는 방법을 설명합니다.




방법1: 간편 추가 방법(단순 새창 링크)



  1. 디자인 모드에 접속합니다. 접속방법
  2. 링크 추가가 가능한 위젯 또는 텍스트 에디터에 다음 링크를 추가합니다.

    http://www.ftc.go.kr/bizCommPop.do?wrkr_no=사업자등록번호(숫자만)
  3. 사업자등록번호(숫자만)이라고 작성된 부분을 삭제하고, 본인의 사업자등록번호를 입력합니다. 만약 사업자등록번호 123-45-67890 인 경우, 하이픈(-)을 제거한 숫자만 입력합니다.

    예시: http://www.ftc.go.kr/bizCommPop.do?wrkr_no=1234567890





방법2: 고급 추가 방법(팝업 링크)



만약 아래과 같이 클릭 시 팝업 형태로 나오도록 설정하고 싶다면 코드 입력이 필요합니다.


1단계: 공통 스크립트 추가하기

  1. 내 사이트 관리자 페이지에 접속합니다. 
  2. 왼쪽 메뉴에서 [환경설정 > SEO,해더설정]을 클릭합니다.
  3. Footer Code에 아래의 스크립트 코드를 복사해 붙여넣습니다.

    <script> var url = "http://www.ftc.go.kr/bizCommPop.do?wrkr_no=사업자등록번호(숫자만)" $(document).ready(function(){ $('.ftc_btn').click(function(){ window.open(url, "bizCommPop", "width=750, height=700;"); return false; }); }); </script>
  4. 붙여넣은 코드의 사업자등록번호(숫자만) 이라고 작성된 부분을 삭제하고, 본인의 사업자등록번호를 입력합니다.
    참고: 사업자등록번호 입력 시 하이픈(-)은 빼고 숫자만 입력해 주세요.
  5. 저장 버튼을 클릭해 적용합니다.



2단계: 사업자정보조회 확인 링크 추가하기

사업자정보조회 확인 링크를 추가하는 방법은 두 가지입니다. 디자인 모드에 접속해 원하는 방법으로 추가합니다.

1. 위젯에서 링크를 추가하는 경우:
  • 페이지에 링크 삽입이 가능한 위젯(텍스트, 버튼, 이미지 등)을 추가합니다.
  • 위젯 설정을 열어줍니다. 위젯 설정 열기
  • 링크 항목에서 링크 타입을 코드로 변경합니다.
  • 다음의 코드를 복사합니다.

    ;" class="ftc_btn
  • 링크 입력 칸에 위에서 복사한 코드를 붙여넣습니다.

  • 설정 창을 닫고, 미리보기를 클릭해 작동여부를 확인하고, 게시하기를 클릭해 적용합니다.




2. 하단 영역에 코드로 링크를 추가하는 경우:
  1. 하단 섹션의 텍스트 영역을 마우스로 클릭합니다.
  2. 텍스트 도구에서, 마지막 코드 보기 도구를 클릭합니다.

  3. 코드 보기로 전환되면 다음 HTML 코드를 추가합니다.

    <a href=";" class="ftc_btn">사업자정보조회</a>

  4. 코드 보기 버튼을 다시 클릭합니다.

  5. 미리보기를 클릭해 작동여부를 확인하고, 게시하기를 클릭해 적용합니다.



결제수단 신청 및 설정하기



1단계: PG사 가입 신청하기

1) 내 사이트 관리자 페이지에 접속합니다. 접속방법

2) 왼쪽 메뉴에서 [환경설정 > 전자결제(PG) 설정]을 클릭합니다.

3) 왼쪽 국내 전자 결제 탭 메뉴를 클릭합니다.


4) 가입할 전자결제(PG)사를 확인하고, 신청 및 상세보기 버튼을 클릭합니다.

참고: PG사 가입이 처음인 경우, 초기 가입비, 수수료 등 PG사 특별 혜택이 적용된 PG사를 선택하시면 좋습니다.


5) 페이지를 내려가며 PG사 가입에 필요한 서류 및 정보를 확인하고 작성합니다. (가입 신청서는 PG사별로 다를 수 있습니다.)

6) (선택 사항) 카카오페이 간편결제를 함께 신청하는 경우, 간편결제 체크박스를 선택합니다. (KG이니시스 신청 시에는 카카오페이가 자동으로 함께 신청됩니다.)

주의: PG사 가입신청 후, 취소 또는 가입 해지하는 경우 카카오페이 기존 가입자로 인식되어 사용자가 개별 신청해야 하는 번거로움이 생겨날 수 있으므로 주의해 신청해 주시길 바랍니다.


7) 서비스 신청 버튼을 클릭합니다.

8) 서비스 신청일을 기준으로 1~2영업일 내에 PG 담당자가 작성하신 연락처로 연락하여 가입을 도와드립니다.

참고: KG이니시스 신청 시에는 가입비 면제 대상에 한해 신청 후 상점에 신용카드, 실시간 계좌이체, 가상계좌 등 결제수단이 바로 제공됩니다. 단, 자동 취소 및 환불은 영업일 1~3일 후에 가능하며 카카오페이 결제수단은 개별 심사가 진행되어 연동 완료까지 14일 내외 기간이 소요됩니다.





2단계: PG/카드사 심사 진행

1) 서비스 가입이 완료되면, PG/카드사 심사가 진행됩니다. 심사에는 통상 1~2주의 기간이 소요됩니다.                                                                        

참고: 카드사 심사 중에는 자동으로 테스트 결제 모드로 전환되어 카드사별 심사가 진행됩니다. 실제 과금되지 않으며 신용카드 등 결제수단이 사이트에 표시될 수 있습니다.

2) 심사가 완료되면 별찌에서 결제 설정을 완료해 드립니다. (이메일로 발송되는 상점 ID 및 키값은 차후 다시 사용될 수 있으므로 안전하게 보관해 주세요.)





3단계: 결제수단 설정하기

1) 심사가 완료되면, 내 사이트 관리자 페이지에 접속합니다. 

2) 왼쪽 메뉴에서 [환경설정 > 전자결제(PG) 설정]을 클릭합니다.

3) 국내 결제설정 항목에서 결제 가능한 수단을 선택합니다. (복수 선택 가능)

4) 기본 결제수단 항목에서 기본 결제수단을 선택합니다. (예: 신용카드, 가상계좌, 무통장입금만 선택)

5) (선택 사항) 무통장입금 등 현금성 결제수단을 사용하는 경우, 구매자가 현금영수증을 신청할 수 있도록, 현금영수증 신청 기능을 사용 선택할 수 있습니다. 

6) (선택 사항) 무통장입금 결제수단을 사용하는 경우, 무통장입금 계좌 정보 항목에 계좌 정보를 입력해 주세요.

참고: 쇼핑몰에 현금 결제가 잦은 경우, 입금확인을 자동으로 처리해 주는 뱅크다 부가서비스를 이용해 볼 수 있습니다.

7) (선택 사항) 가상계좌 결제수단을 사용하는 경우, 가상계좌 통보URL을 PG사 관리자 페이지에서 추가해 주셔야 합니다. 상세 추가방법은 가상계좌 자동 입금확인 설정방법 도움말을 참고하세요.

8) 저장 버튼을 클릭해 적용합니다.




4단계: 통신판매업신고

판매자는 전자상거래소비자보호법 제12조4항에 따라, 구매자가 정확한 사업자의 정보를 알고 안전하게 거래할 수 있도록 통신판매업신고를 통해 판매자의 신원정보를 제공해야 합니다.

아래 사항들을 참고하여 통신판매업신고를 진행하고, 발급 받은 통신판매업 신고번호는 쇼핑몰 하단에 기재해 주세요. 쇼핑몰 하단 법적필수정보 기재하기


  • 필요서류: 사업자등록증 사본, 에스크로 구매안전서비스 이용확인증(PG신청시 신청), 사업자 신분증, 법인사업자의 경우 법인등기부등본
  • 신고방법: 사업장 소재지 관할 구청 방문 신청, 또는 정부24에서 온라인 신청
  • 신고비용 및 처리기간: 있음, 통상 3일 소요
  • 서버 소재지: 서울시 강남구 논현로 508, GS타워 12층

게시글에 이미지,파일,동영상 첨부하기(모바일버전)



이미지 첨부하는 법

1. 아래 사진과 같이 이미지 첨부 아이콘을 클릭합니다.

2. 모바일에서 원하는 이미지를 클릭하여 첨부합니다.



파일 첨부하는 법

1. 아래 사진과 같이 이미지 첨부 아이콘을 클릭합니다.

2. 모바일에서 원하는 파일을 클릭하여 첨부합니다.




동영상 첨부하는 법

1. 삽입 더보기를 클릭 후 카메라아이콘을 눌러줍니다.

2. 동영상 URL입력 부분에 미리 복사해 놓은 유튜브 동영상 링크를 붙여넣기 합니다.

3. 삽입 버튼을 누릅니다.



게시글 작성하기(모바일버전)



모바일에서 게시글 작성하는 법


1단계:  메뉴>원하는 게시판을 선택한 후  글쓰기 버튼을 클릭합니다.



2단계: 카테고리를 선택합니다.



3단계: 글제목을 입력합니다.

4단계: 내용을 입력합니다.


5단계: 우측 상단의 작성버튼을 클릭합니다.




게시글에 이미지,파일,동영상 첨부하기(PC버전)


이미지 첨부하는 법

1. 아래 사진과 같이 이미지 첨부 아이콘을 클릭합니다.

2. PC에서 원하는 이미지를 클릭하여 첨부합니다.



파일 첨부하는 법

1. 아래 사진과 같이 이미지 첨부 아이콘을 클릭합니다.

2. PC에서 원하는 파일을 클릭하여 첨부합니다.


동영상 첨부하는 법

1. 삽입 더보기를 클릭 후 카메라아이콘을 눌러줍니다.

2.동영상 URL입력 부분에 미리 복사해 놓은 유튜브 동영상 링크를 붙여넣기 합니다.

3.삽입 버튼을 누릅니다.


게시글 작성하기(PC버전)



게시글 작성하는 법



1단계: 원하는 게시판에서 글쓰기 버튼을 클릭합니다.



2단계: 카테고리를 선택합니다.


3단계: 글제목을 입력합니다.


4단계: 내용을 입력합니다.


5단계: 우측 상단의 작성버튼을 클릭합니다.





게시글 글꼴 설정하는 법



· 글꼴 굵게 설정하기


· 글꼴 기울이기


· 밑줄 설정하기


· 글씨 크기 변경하기


· 글씨 색상 변경하기





캐시 비우기 및 강력 새로고침 활용하기 (구글 크롬 브라우저)



디자인 모드에서 사이트 편집 후 변경사항을 게시했으나 적용되지 않는 때가 있습니다. 

위 문제는 대개 웹 캐시로 인해 생기는 문제로, 사용 중인 웹 브라우저의 캐시를 초기화 하는 것으로 해결할 수 있습니다.


단, 일반 캐시 초기화 방법의 경우 웹 브라우저에 저장된 계정 정보, 비밀번호 등 웹사이트 설정도 함께 삭제될 수 있어, 사용자에 따라 매우 곤란해질 수 있습니다.


만약 Google 크롬 브라우저를 사용하는 경우 캐시 비우기 및 강력 새로고침을 사용해 볼 수 있습니다. 이 기능은 웹 브라우저 전체 설정을 삭제하지 않고, 원하는 페이지의 캐시만 간편하게 초기화하는 것이 가능합니다.




사용방법

  1. 내 PC에서 Google 크롬 브라우저를 켭니다.
  2. 디자인 모드에서 게시해도, 작업사항이 반영되지 않는 메뉴(페이지)에 접속합니다.
  3. 크롬 브라우저 오른쪽 상단 더보기 아이콘을 클릭합니다.
  4. [도구 더보기 > 개발자 도구]를 클릭해 개발자 도구를 열어줍니다. 또는 아래의 단축키를 사용할 수도 있습니다.
    • Windows: F12
    • Mac: Command + Option + I
  5. 오른쪽에 개발자 도구가 나타나면 크롬 브라우저 왼쪽 상단 새로고침 아이콘에 마우스 포인터를 올립니다.
  6. 마우스 오른쪽 버튼을 클릭합니다.
  7. 다음 그림처럼 새로고침 메뉴가 나타나면 캐시 비우기 및 강력 새로고침을 클릭합니다.
  8. 캐시 비우기 및 강력 새로고침 과정이 완료되면, 페이지 내 콘텐츠가 최근 변경한 것들로 적용되었는지 확인합니다.










INFORMATION


상호명 : (주)위멘토


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

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

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

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

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

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

WEMENTO


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

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

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


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi