에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

카페24 쇼핑몰은 자체적으로 디자인 편집기를 제공합니다. 미리보기도 가능하고, 코드 하이라이트도 되는 편집기이기는 하지만, 전문 텍스트 에디터가 아니어서 불편한 점도 있습니다. 만약 에디트플러스를 사용한다면, 카페24에서 제공하는 플러그인을 이용하여 에디트플러스에서 코딩 작업을 할 수 있습니다.

에디트플러스 4

카페24의 플러그인이 지원하는 에디트플러스 버전은 4, 32비트입니다. 최신 버전은 5인데, 5에서는 플러그인을 사용할 수 없습니다. 에디트플러스 4는 아래 링크에서 다운로드할 수 있습니다.

https://www.editplus.com/kr/latest4.html

에디트플러스 5에서도 FTP로 접속하여 코딩을 할 수 있습니다. 단, FTP 설정을 따로 해야 하고, 플러그인이 제공하는 모듈 삽입 등의 기능을 사용할 수 없을 뿐입니다.

카페24 에디트플러스 플러그인 다운로드

아래 링크에서 에디트플러스 플러그인을 다운로드합니다. 

http://sdsupport.cafe24.com/board/tip/read_intro.html?no=636&board_no=5

연결

플러그인을 설치하면 바탕하면에 카페24 에디트플러스가 생깁니다. 실행을 시키면...

로그인 창이 뜹니다. 상점 아이디, 비밀번호, FTP 비밀번호를 입력하고 [확인]을 클릭합니다.

만약 FTP 비밀번호를 모른다면 상점관리의 비밀번호 변경에서 설정할 수 있습니다.

정보가 맞다면 FTP로 접속이 되고, 디렉토리 창에 목록이 나옵니다. 그리고 상단의 Cafe24 메뉴에서 모듈 삽입이 가능합니다.

Related Posts

Brackets / 실시간 미리보기 사용하는 방법

Brackets / 실시간 미리보기 사용하는 방법

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다. 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다. 을 클릭하면… 크롬에서 HTML 문서를 보여줍니다. 코드에 커서를 위치시키면, 그 부분이 크롬에서 강조됩니다. 코드를 수정하면 ...

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

크롬 / 요소 검사 패널 레이아웃 변경하는 방법

대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면… 요소 검사의 오른쪽 위에 있는 점 ...

윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전

인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스 에디트플러스는 윈도우에서 사용하는 텍스트 에디터입니다. 가볍고, 유용한 기능을 포함하고 있으며, HTML, PHP, Java, C/C++, CSS, ASP, Perl, JavaScript, VB Script, Python, Ruby 등 다양한 언어에 대한 코드 하이라이트를 제공합니다. 또한 FTP/SFTP로 원격 서버에 접속하여 바로 코딩을 할 수 있는 기능을 포함하고 있습니다. 코드 하이라이트는 직접 만들어 사용할 수도 있고, 다른 사용자가 ...

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax는 홈페이지에 수식을 표현할 수 있게 해주는 오픈소스 자바스크립트입니다. 다음의 스크립트만 HTML 문서에 추가하면 수식을 넣을 수 있습니다. <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: } }); </script> <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 수식 입력은 LaTeX나 MathML 등으로 합니다. LaTeX으로 수식을 나타낸 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

안드로이드 스튜디오 / 구글 플레이(Google Play)에 등록하는 APK 파일 만드는 방법

안드로이드 스튜디오 / 구글 플레이(Google Play)에 등록하는 APK 파일 만드는 방법

구글 플레이(Google Play)에 앱을 등록하려면 APK 형식으로 빌드해야 합니다. 이때 업로드 키도 필요합니다. 업로드 키: 첫 번째 버전을 서명하는 데 사용하는 키입니다. 이후 모든 버전을 동일한 키로 서명하여 본인이 업로드한 버전임을 증명할 수 있습니다. 업로드 키는 안전한 곳에 보관하세요. 업로드 키가 분실 또는 손상되면 개발자 지원팀에 연락하여 교체하시기 바랍니다. 업로드 키를 만들고 ...

안드로이드 스튜디오 / 버전코드 변경하는 방법

안드로이드 스튜디오 / 버전코드 변경하는 방법

구글 플레이 콘솔에 앱을 등록할 때 앱에서 설정한 버전이 등록됩니다. 버전은 versionName과 versionCode가 있습니다. 상단의 0.1.0이 versionName, 하단에 있는 1이 versionCode입니다. 버전은 build.gradle에서 정합니다. versionCode와 versionName의 값을 수정하면 됩니다.

MySQL Workbench / Windows 10에 설치하는 방법

MySQL Workbench / Windows 10에 설치하는 방법

MySQL Workbench는 MySQL 데이터베이스를 관리하고 분석할 때 유용한 도구입니다. 호환성 문제가 있다고 하지만, MariaDB로 관리 가능합니다. MySQL Workbench를 Windows 10에 다운로드하고 설치하는 방법을 정리합니다. 다운로드 https://www.mysql.com/products/workbench/에서 다운로드 합니다. 는 MySQL을 다운로드 하는 것이니, 혼동하지 마세요. 로그인하라고 하는데, 굳이 그러고 싶지 않다면 를 클릭합니다. 바로 ...