쇼핑몰 상세페이지 디자인 만들기 - 쇼핑몰 상세페이지 HTML 제작 빌더 -모캔버스

캔버스를 이용하기 전에
딱 2분만 이 튜토리얼을 봐주세요.

실수로 닫으셔도 다시 보실 수 있습니다.

우선 좌측에 있는 긴 바는 카테고리입니다.

이곳에서 원하는 템플릿을 선택하실 수 있습니다.
만약 무료로 이용하시는 분이라면 무료 섹션을 선택하세요.

이제 에쁜 템플릿을 찾는 일을 시작합니다.

원하는 템플릿이 있다면,

미리보기 혹은 즐겨찾기 하실 수 있습니다.
검색을 통해서 템플릿을 검색할 수 있으며,
상세분류를 선택해서 보실수도 있습니다.

마음에 드는 템플릿이 있다면 다음장을 봐주세요.

템플릿을 우측 화면에 드래그 해서 넣어보세요.

우측 화면에 만약 디자인이 있다면,
템플릿의 위 혹은 아래에 넣을 수 있습니다.
디자인 요소는 템플릿 사이사이에도 넣을 수 있어요.

이제 상세하게 디자인을 수정해볼게요.

우측 화면을 우리는 캔버스라고 합니다.

캔버스에 넣은 디자인 요소들은 수정이 가능합니다.
만약 이미지의 주소를 변경하신다면, 이미지를 클릭하세요.
이미지의 주소, 객체변경, 테두리, 투명도 등 수정이 가능합니다.

이미지 외 다른 디자인 요소들도 각기 다른 에디터를 제공합니다.
HTML 태그를 알고 있으면 정말 쉽겠지만, 몰라도 괜찮아요 !!

블로그에 글 적는 수준이면 됩니다.

디자인 요소들을 클릭했을때 파란색 손잡이가 생긴다면,
해당 요소는 위치 이동이 가능한 디자인 요소라는 의미입니다.

파란색 손잡이를 잡고, 깜빡이는 파란 점선으로 이동시킬 수 있습니다.
여기서 여러분이 헷갈려 하실 수 있는 부분이 있습니다.

바로 내부 디자인 요소와 외부 디자인 요소입니다.

이미지를 선택했는데, 이미지를 위아래로 옮길 수 없다면
이 이미지는 링크 속에 있는 내부 디자인 요소이기 때문입니다.

이런 경우 이미지를 감싸고 있는 상위 요소를 선택할 때 사용하는 것이
바로 상위 디자인 요소 선택 버튼 입니다. 부모를 선택하는 기능인거죠.

이 버튼의 기능만 익히신다면 모캔버스를 90% 이해했다고 생각하세요.
정말!! 정말!! 중요한 기능입니다.

디자인을 복사하는 기능 역시 존재합니다.
디자인을 복사해서 같은 영역에 붙여 넣으면 요소를 하나 더 만들어 냅니다.
만약 여러분이 복사한 디자인을 다른 영역에 붙여 넣을 경우,
속성이 같은 요소라면 복사된 요소로 대체됩니다.

테이블의 셀 속성은 1개씩만 복사가 가능하며, 여러 곳에 붙여 넣을 수 있습니다.
복사와 붙여넣기의 기능은 여러분의 작업 속도를 크게 향상시켜줄 거예요.

이 기능은 정말 중요합니다!!!

디자인 요소들은 글자 요소가 아니라면
방향키로 손쉽게 여러 방향으로 이동할 수 있습니다.

만약 글자 디자인 요소를 수정하고 계시다면,
글자 디자인을 드래그 해서 옮기거나,
톱니바퀴를 클릭해서 위,아래로 이동할 수 있습니다.

마찬가지로 글자 요소가 아니라면
DEL 버튼을 눌러서 삭제가 가능합니다.

캔버스를 수정하시면서 다른 기기의 모습이 궁금하다면,
PC, TABLET, MOBILE 기기의 모습으로도 볼 수 있습니다.

테블릿이나 모바일의 경우 대표적인 사이즈로 제작되어 있으나,
모든 기기의 모습과 같다고 볼 순 없습니다.

가장 정확한 방법은 직접 기기에서 확인하는 것 입니다.

캔버스를 수정하시면서 이전 기록으로 돌리고 싶거나,
다름 기록으로 돌리고 싶다면 이전, 다음 기능을 쓰세요.

만약 이 캔버스를 컴퓨터를 끈 다음에도 그대로 사용하고 싶다면,
DB에 저장하기 기능을 이용하시면 서버에 저장되기 때문에
내일, 혹은 다음달에도 수정이 가능합니다.

만약 캔버스를 다시 만들고 싶다면 휴지통 기능을 써보세요.
화면을 한번에 비워내는 역할을 하게 됩니다.

폰트는 메인폰트, 서브폰트로만 사용할 수 있습니다.
폰트 데이터는 GOOGLE CDN 으로 연결되어 있습니다.

만약 여러분의 사이트가 이미 웹폰트를 사용하고 있다면,
캔버스가 여러분의 사이트에 자동으로 알맞게 들어가게 됩니다.
이 경우는 웹폰트를 사용하지 않으시는 게 좋겠죠?

만약 게시판에 글을 적거나, 혹은 개별적인 페이지가 필요하다면
이 기능으로 폰트를 예쁘게 설정해보는 것도 좋습니다.

2개 이상은 왜 안 되냐고요?
폰트도 데이터이기 때문에 속도에 영향을 미치기 때문입니다.

컬러 팔레트는 여러분의 색 감각을 높여줄 거예요.
상단에 있는 팔레트를 선택하면, 그 다음부터는 쉽습니다.

글자색을 수정하거나, 배경색을 수정하고, 또 아이콘을 수정할 때
선택된 팔레트가 연동되어 색상을 쉽게 결정할 수 있게 됩니다.

이 컬러 패턴은 ADOBE Kuler 서비스의 인기 있는 색상들입니다.
전문가들이 선택한 팔레트를 이용해서 더 멋진 캔버스를 만들어보세요.
색을 정하는 게 어렵다면, 이 컬러 패턴이 크게 도움이 될 거예요.

기본 컨텐츠는 매우 중요한 캔버스의 크기 정보입니다.
웹사이트가 좌우 꽉 찬 부분과 가운데 실제 컨텐츠가 있는데,
이중 가운데 실제 컨텐츠의 크기 부분이 기본 컨텐츠의 크기 입니다.

기본 컨텐츠가 여러분의 사이트보다 큰 건 괜찮지만, 만약 작다면
좌우가 비어 보일 수 있으니 가급적 여러분의 사이트의
기본 컨텐츠 부분의 크기를 적으시는 것이 좋습니다.

참고로 오픈마켓이나 기타 입점몰은 1000px이면 충분할거예요.
모바일은 1000px보다 작으니 반응형으로 대응됩니다.

!! 기본 폰트 크기는 중요하지만, 실제로 적용이 되진 않습니다.

모캔버스의 모든 폰트 사이즈는 REM 단위로 지정되어 있습니다.
REM 단위는 사이트의 기본 폰트를 기준으로 변형되는 단위이며,
어떤 사이트에 캔버스의 코드를 넣느냐에 따라 달라집니다.

만약 여러분의 사이트의 기본 폰트가 16px 이라면,
16px로 셋팅하면 똑같은 모습으로 디자인을 할 수 있어 편리할 거예요.

캔버스에 폰트 크기는 미리 보는 용도이지,
폰트의 크기는 사이트에 따라 달라짐을 꼭!! 참고하세요.

만약 캔버스를 꾸미다가 부족한 요소들이 있다면,
기본 요소들을 넣어서 디자인을 만들 수 있습니다.

디자인과 똑같이 캔버스에 드래그 해서 넣으실 수 있습니다.

텍스트, 이미지, 버튼, 박스, 테이블 등 다양한 요소들
적절하게 배치해서 아름다운 페이지를 만들어보세요.

블로그 글 쓰듯 넣으시면 됩니다.

만약 캔버스가 더 필요하시다면,
새로운 캔버스를 추가할 수 있습니다.

반복해서 작업하는 캔버스 용도도 있고,
수정이 빈번한 캔버스도 있을 수 있습니다.

여러분의 용도에 맞게 캔버스를 활용해보세요.

예쁜 디자인을 발견했다면, 즐겨찾기 기능을 사용해보세요.
즐겨찾기 기능은 언제든지 추가, 삭제가 가능합니다.

저라면 자주 쓰는 이미지 더미, 상품 목록, 타이틀을 넣을건데요,
여러분들도 자주 쓰는 디자인을 넣어서 관리하면 되겠죠?

디자인이 많아질수록 편리하게 쓸 수 있을거예요.

캔버스를 미리 보고 싶다면,
미리 보기 기능을 사용해보세요.

이 기능을 자주 사용하게 될 거예요.
창 크기를 줄여서 모바일 사이즈도 확인해보세요.

최대한 자주 사용하시길 권장합니다.

만약 여러분의 캔버스의 작업이 모두 끝났고,
이제 실제로 코드를 적용하기 위해 완성된 코드받기를 이용하세요.

완성된 코드받기를 클릭하시면, 수정하실 내용들을 알려줄거예요.
오류가 없다는 메세지가 나오면 코드를 복사하세요.
그리고 여러분의 사이트에 HTML 코드를 넣으시면 됩니다.

어려우신가요? 딱! 한번만 해보시면 됩니다.
정말 딱! 한번입니다.

튜토리얼이 모두 끝났습니다.
이제 캔버스를 한번 꾸며보시겠어요?

/*!
 * Mocanvas
 * @license https://www.mocanvas.com
 * @min-width : Samsung Galaxy S, Apple iPhone 5 (5c, 5s)
 */

/*!
 * Container Buildup
 */
#spStrap *:not(i) { font-family:inherit; }

[spStrap] { min-width:320px; color:#333; line-height:1.4; position:relative; overflow:hidden; }
[spStrap], [spStrap] * { -webkit-box-sizing : border-box !important; -khtml-box-sizing : border-box !important; -moz-box-sizing : border-box !important; -ms-box-sizing : border-box !important; -o-box-sizing : border-box !important; box-sizing : border-box !important; }
[spStrap] [sp-trans],
[spStrap] [sp-trans]:before,
[spStrap] [sp-trans]:after {
	-webkit-perspective : 1000; -moz-perspective : 1000; -o-perspective : 1000; perspective : 1000;
	-webkit-backface-visibility : hidden; -khtml-backface-visibility : hidden; -moz-backface-visibility : hidden; -ms-backface-visibility : hidden; -o-backface-visibility : hidden; backface-visibility : hidden;
	-webkit-transition : all 300ms ease; -khtml-transition : all 300ms ease; -moz-transition : all 300ms ease; -ms-transition : all 300ms ease; -o-transition : all 300ms ease; transition : all 300ms ease;
}

[spStrap] * { line-height:inherit; }
[spStrap] [sp-size] { width:1000px; min-width:320px; position:relative; margin-left:auto; margin-right:auto; }
[spStrap] ol, [spStrap] li, [spStrap] ul { padding:0; margin:0; list-style:none; }
/*!
 * Element Reset
 */
[spStrap] a, [spStrap] img, [spStrap] table, [spStrap] div:not([sp-overbox]), [spStrap] span, [spStrap] iframe, [spStrap] ul, [spStrap] li { max-width:100%; }
[spStrap] [sp-resize] { font-size:0; } [spStrap] [sp-resize] img { width:100%; } [spStrap] div[sp-resize] { margin:0 auto; }
[spStrap] [sp-resize] { display:inline-block; display:inline-flex; vertical-align:middle; }
[spStrap] [sp-edit] { position:relative; } [spStrap] span[sp-edit] { display:inline-block; }
[spStrap] div[sp-edit]:not([sp-line])::after { clear:both; content:' '; display:block; font-size:0; height:0; line-height:0; visibility:hidden; }
[spStrap] [sp-edit="text"] { cursor:auto; word-break:break-all; }
[spStrap] [sp-edit] > span { display:inline-block; vertical-align:middle; }
[spStrap] [sp-scroll] { overflow:auto; }
[spStrap] a[sp-edit], [spStrap] sp-link-trick { position:relative; display:inline-block; display:inline-flex; vertical-align:middle; }
[spStrap] a, [spStrap] sp-link-trick { color:inherit; text-decoration:none; }
[spStrap] [sp-clear]:after { content:' '; clear:both; display:block; font-size:0; height:0; line-height:0; visibility:hidden; }
[spStrap] [sp-inlinebox], [spStrap] [sp-edit$="_button"] { font-size:0; }
[spStrap] table, [spStrap] thead, [spStrap] tbody, [spStrap] tfoot, [spStrap] tr, [spStrap] th, [spStrap] td {
    border-collapse: inherit;
    border-spacing: 0;
    border-color: inherit;
    vertical-align: inherit;
    text-align: left;
    font-weight: inherit;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}

[spStrap] img[sp-edit] { display:inline-block; vertical-align:middle; vertical-align:super; }
[spStrap] [sp-line] { position:relative; text-indent:-9999px; line-height:0 !important; }
[spStrap] [sp-line]:before { content:'.'; }
[spStrap] [sp-line]:after { content:''; z-index:1; position:absolute; top:-5px; right:0; bottom:-5px; left:0; }
[spStrap] [sp-table-editor] { width:100%; border-collapse:collapse; border-spacing:0; margin:0 auto; }
[spStrap] [sp-table-editor] td { min-width:15px; word-break: break-all; position:relative; }

/* Video PC, Mobile Ratio Buildup */
[spStrap] [sp-videoframe] { position: relative; padding-bottom:56.25%; /* 16:9 비율인 경우 */ height:0; }
[spStrap] [sp-videoframe="4:3"] { padding-bottom:75%; }
[spStrap] [sp-videoframe] iframe { position: absolute; top:0; left:0; width:100%; height:100%; }
[spStrap] [sp-ratio] { position:relative; }
[spStrap] [sp-ratio="1:1"] { padding-bottom:100%; }
[spStrap] [sp-ratio="1:2"] { padding-bottom:200%; }
[spStrap] [sp-ratio="2:1"] { padding-bottom:50%; }

/*!
 * Set Font Attribute
 */
[spStrap] [sp-font="7"]  { font-size:0.7rem; }
[spStrap] [sp-font="8"]  { font-size:0.8rem; }
[spStrap] [sp-font="9"]  { font-size:0.9rem; }
[spStrap] [sp-font="10"] { font-size:1.0rem; }
[spStrap] [sp-font="11"] { font-size:1.1rem; }
[spStrap] [sp-font="12"] { font-size:1.2rem; }
[spStrap] [sp-font="13"] { font-size:1.3rem; }
[spStrap] [sp-font="14"] { font-size:1.4rem; }
[spStrap] [sp-font="15"] { font-size:1.5rem; }
[spStrap] [sp-font="16"] { font-size:1.6rem; }
[spStrap] [sp-font="17"] { font-size:1.7rem; }
[spStrap] [sp-font="18"] { font-size:1.8rem; }
[spStrap] [sp-font="19"] { font-size:1.9rem; }
[spStrap] [sp-font="20"] { font-size:2.0rem; }
[spStrap] [sp-font="25"] { font-size:2.5rem; }
[spStrap] [sp-font="30"] { font-size:3.0rem; }
[spStrap] [sp-font="35"] { font-size:3.5rem; }
[spStrap] [sp-font="40"] { font-size:4.0rem; }
[spStrap] [sp-font="45"] { font-size:4.5rem; }
[spStrap] [sp-font="50"] { font-size:5.0rem; }
[spStrap] [sp-font="55"] { font-size:5.5rem; }
[spStrap] [sp-font="60"] { font-size:6.0rem; }
[spStrap] [sp-less="pc"] { display:none; }
[spStrap] [sp-only="tablet"], [spStrap] [sp-only="mobile"] { display:none; }

/*!
 * Responsive Tablet, Mobile Size
 */
@media screen and ( min-width:601px ) and ( max-width:1024px ){

[spStrap] { line-height:1.3; }
	[spStrap] [sp-size]		  { width:auto; }
	[spStrap] [sp-font="7"]   { font-size:0.70rem }
	[spStrap] [sp-font="8"]   { font-size:0.80rem }
	[spStrap] [sp-font="9"]   { font-size:0.89rem }
	[spStrap] [sp-font="10"]  { font-size:0.99rem }
	[spStrap] [sp-font="11"]  { font-size:1.08rem }
	[spStrap] [sp-font="12"]  { font-size:1.17rem }
	[spStrap] [sp-font="13"]  { font-size:1.26rem }
	[spStrap] [sp-font="14"]  { font-size:1.35rem }
	[spStrap] [sp-font="15"]  { font-size:1.44rem }
	[spStrap] [sp-font="16"]  { font-size:1.53rem }
	[spStrap] [sp-font="17"]  { font-size:1.62rem }
	[spStrap] [sp-font="18"]  { font-size:1.70rem }
	[spStrap] [sp-font="19"]  { font-size:1.79rem }
	[spStrap] [sp-font="20"]  { font-size:1.87rem }
	[spStrap] [sp-font="25"]  { font-size:2.33rem }
	[spStrap] [sp-font="30"]  { font-size:2.78rem }
	[spStrap] [sp-font="35"]  { font-size:3.22rem }
	[spStrap] [sp-font="40"]  { font-size:3.66rem }
	[spStrap] [sp-font="45"]  { font-size:4.10rem }
	[spStrap] [sp-font="50"]  { font-size:4.53rem }
	[spStrap] [sp-font="55"]  { font-size:4.95rem }
	[spStrap] [sp-font="60"]  { font-size:5.37rem }
	[spStrap] [sp-tab="20"] { display:inline-block !important; width:20% !important; }
	[spStrap] [sp-tab="25"] { display:inline-block !important; width:25% !important; }
	[spStrap] [sp-tab="33"] { display:inline-block !important; width:33.333% !important; }
	[spStrap] [sp-tab="50"] { display:inline-block !important; width:50% !important; }
	[spStrap] [sp-tab="100"] { display:block !important; width:initial !important; }
	[spStrap] [sp-less="tablet"] { display:none; }
	[spStrap] [sp-only="pc"], [spStrap] [sp-only="mobile"] { display:none; }
	[spStrap] [sp-table-editor] { width:100% !important; min-width:unset !important; }

}
@media screen and ( min-width:1px ) and ( max-width:601px ){

[spStrap] { line-height:1.2; }
	[spStrap] [sp-size]		  { width:auto; }
	[spStrap] [sp-font="7"]   { font-size:0.70rem }
	[spStrap] [sp-font="8"]   { font-size:0.79rem }
	[spStrap] [sp-font="9"]   { font-size:0.88rem }
	[spStrap] [sp-font="10"]  { font-size:0.97rem }
	[spStrap] [sp-font="11"]  { font-size:1.06rem }
	[spStrap] [sp-font="12"]  { font-size:1.14rem }
	[spStrap] [sp-font="13"]  { font-size:1.22rem }
	[spStrap] [sp-font="14"]  { font-size:1.30rem }
	[spStrap] [sp-font="15"]  { font-size:1.38rem }
	[spStrap] [sp-font="16"]  { font-size:1.46rem }
	[spStrap] [sp-font="17"]  { font-size:1.53rem }
	[spStrap] [sp-font="18"]  { font-size:1.61rem }
	[spStrap] [sp-font="19"]  { font-size:1.68rem }
	[spStrap] [sp-font="20"]  { font-size:1.75rem }
	[spStrap] [sp-font="25"]  { font-size:2.16rem }
	[spStrap] [sp-font="30"]  { font-size:2.57rem }
	[spStrap] [sp-font="35"]  { font-size:2.96rem }
	[spStrap] [sp-font="40"]  { font-size:3.35rem }
	[spStrap] [sp-font="45"]  { font-size:3.73rem }
	[spStrap] [sp-font="50"]  { font-size:4.10rem }
	[spStrap] [sp-font="55"]  { font-size:4.46rem }
	[spStrap] [sp-font="60"]  { font-size:4.81rem }
	[spStrap] [sp-mob="20"] { display:inline-block !important; width:20% !important; }
	[spStrap] [sp-mob="25"] { display:inline-block !important; width:25% !important; }
	[spStrap] [sp-mob="33"] { display:inline-block !important; width:33.333% !important; }
	[spStrap] [sp-mob="50"] { display:inline-block !important; width:50% !important; }
	[spStrap] [sp-mob="100"] { display:block !important; width:initial !important; position:initial !important; }
	[spStrap] [sp-less="mobile"] { display:none; }
	[spStrap] [sp-only="pc"], [spStrap] [sp-only="tablet"] { display:none; }
	[spStrap] [sp-scale^="mob"] {
		-webkit-transform : scale(.9);
		   -moz-transform : scale(.9);
			-ms-transform : scale(.9);
			 -o-transform : scale(.9);
				transform : scale(.9);
	}
	[spStrap] [sp-scale*="-tl"] { transform-origin:top left; }
	[spStrap] [sp-scale*="-tc"] { transform-origin:top center; }
	[spStrap] [sp-scale*="-tr"] { transform-origin:top right; }
	[spStrap] [sp-scale*="-ml"] { transform-origin:center left; }
	[spStrap] [sp-scale*="-mc"] { transform-origin:center center; }
	[spStrap] [sp-scale*="-mr"] { transform-origin:center right; }
	[spStrap] [sp-scale*="-bl"] { transform-origin:bottom left; }
	[spStrap] [sp-scale*="-bc"] { transform-origin:bottom center; }
	[spStrap] [sp-scale*="-br"] { transform-origin:bottom right; }
	[spStrap] [sp-table-editor] { width:100% !important; min-width:unset !important; }

}

아이콘 사용방법 안내

인라인 이미지

인라인 이미지는 등록 후, 여러분의 이미지로 반드시 수정을 하셔야 합니다. 인라인 이미지를 클릭하고, 아이콘을 클릭해서 이미지를 변경할 수 있습니다.

😀 EMOJI 아이콘

EMOJI 아이콘은 폰트와 동일하게 사용이 가능합니다. 색상은 지원하지 않지만, 폰트 사이즈로 아이콘을 키울 수 있습니다. 다만, EMOJI 아이콘은 브라우저나 기기마다 표현하는 모습이 다를 수 있습니다.

SVG 아이콘

SVG 아이콘은 별도 url 없이 inline으로 이미지 코드가 들어가게 됩니다. 색상이나 사이즈를 수정할 수 있으며, 백터 기반이기 때문에 사이즈가 커도 해상도가 깨지지 않습니다.

캔버스 선택 / 수정

새 캔버스가 필요한가요?

아직도 회원이 아니신가요?