매뉴얼

친절한 상담, 빠른 답변

견적문의, 기능상담 등 모든 궁금증을 해결해 드립니다.

Page : Home 고객지원 매뉴얼

총 202건, 4/21 페이지

[디자인팜 1.0] [초보자용] 테마 구조 설명안내

스킨이란?! 

 

홈페이지 제작시  회사소개, 제품소개, 마이페이지등 어떤 페이지를 가더라도 윗부분(로고 및 네비게이션등...)과 아랫부분(카페라이트 및 사이트정보등...)은 대부분 디자인이 동일 합니다.

이렇게 반복되는 디자인을 각 페이지별로 매번 같은 작업을하는것이 아니라  별도 디자인 파일을 만들어서 각 페이지 마다 자동으로  로고 및 네비게이션, 카피라이트등을 불러오게 되어 있습니다.

이런 디자인 파일을 스킨 이라고 합니다.

스킨파일을 만들게 되면, 홈페이지 제작시 좀더 빠르게 제작 할 수 있고, 리뉴얼시 스킨만 수정하면 모든 페이지가 수정되기 때문에 업무 효율성 및 작업 속도면에서 많은 이점 있습니다.

 

아래 홈페이지 메인화면에서 상단(로고 및 네비게이션) 부분과, 하단(홈페이지 정보 및 카피라이트)는  모든 페이지가 동일하다는것을 알수 있습니다.

이렇게 반복되는 부분이 스킨이라고 보시면 됩니다.

샘플 홈페이지 : http://urfhome02.good-web.co.kr

 

 

 

 


 

 

 

[스킨]활용하여 홈페이지를 쉽게 리뉴얼 하는 방법

위 설명한대로 반복되는 디자인을 스킨으로 따로 저장했다면, 스킨을 수정시 모든페이지가 자동으로 수정 됩니다.

만약 스킨을 계절별로 3개의 스킨을 만들었다면 아래 샘플사이트처럼 각 계절 별로 다른 디자인으로 쉽게 변경 할수 있습니다.

 

이렇게 스킨만 변경해주면, 안에 본문 내용과는 별개로 홈페이지 전체 디자인이 변경됩니다.

 

 
 
 

 

 

 

그럼 테마란 무엇인가요?

보통 홈페이지를 만들게 되면 메인용 스킨1장, 서브용스킨 1장  이렇게 2장의 스킨을 사용하는경우가 많습니다.

만약 메인 스킨 디자인을 빨간색에서 파란색 계통으로 색상 변경했다면 당연히 서브 스킨도  수정해줘야 할것 입니다.

스킨을 수정하고 나면 메인 화면 본문 부분도 언발란스하지 않게 수정해야줘야 합니다.

이렇게 스킨 하나를 수정하게 되면 셋팅로 수정해줘야 하는 부분이 (메인스킨+서브스킨+메인화면) 이렇게 3가지가 보통 인데, 이를 테마라고 합니다.

 

디자인팜에서 테마생성시 아래와 같이  (메인스킨+서브스킨+메인화면)이 하나의 셋트로 묶여서 생성되고 관리 할 수 있도록 되어 있습니다.

 

만약 봄,여름,가을,겨울 테마등 여러개의 테마를 만들어 놓게 되면, 한번의 클릭으로 (메인스킨+서브스킨+메인화면)이 한번에 변경되기 때문에 아주쉽게 관리 할수 있습니다.

 
 
 
 

 

 

 

이젠, 스킨과 메인은 테마로 일괄생성 및 변경합니다!

 

디자인팜은 기존의 스킨 따로 만들고 메인 따로 만들어서 생성하는 방식과 다르게,

처음에 [테마]로 생성을 하면 안에 메인스킨+서브스킨+메인화면이 3개가 하나로 세트가 되서 생성이 됩니다.

 

그래서 기존처럼 메인만 따로 복사 한다 던지, 서브스킨을 여러 개를 생성하여,

각 페이지마다 스킨을 선택하는 방식이 아니라, 메인스킨+서브스킨+메인화면 함께 일괄변경이 되기 때문에 꼭 알고 넘어가야 합니다.

 

 

 

- [테마추가]로 생성시 > 기존의 관리자모드에서 확인이 가능합니다!

[태마추가]를 하시면, 하나의 이름으로 세 개의 디자인이 묶여있는 게 보이시는데요.

기존의 관리자모드 에서 추가가 된다는 점! 알고 계세요.

 

 

- 디자인팜에서 테마 추가시 아래와 같이 고급관리자모드에서 페이지가 생성 됩니다.

  [디자인관리 > 고급 디자인 관리 > 스킨 관리]에  메인스킨+서브스킨이 새롭게 2개가 추가가 됩니다.

 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인] 에서 디자인팜용 메인화면 1장이 생성 됩니다.

 

 

테마를 여러개 생성하시면, 아래와 같이 여러 메인이 생깁니다.

그래서 디자인팜에서 테마를 선택하면, 내가 선택한 A테마의 A메인으로 자동변경이 되는거죠. 

이점 만약 이해가 안된다면, 테마를 여러개를 추가해 보시면서 테스트를 해보시는게 도움이 될 겁니다.

 

이상 스킨 및 테마에 대한 개요에 대해 설명 드렸습니다.

 

 

[디자인팜 1.0] [초보자용] 디자인 수정 방법 (메인화면 및 서브 페이지 공통)

디자인팜에서 웹페이지 수정이 이렇게 쉽습니다.

디자인팜은 기본적으로 반응형웹과 하이브리드 APP을 고려하여 설계 되어 있으며, html을 모르더라도 누구나 쉽게 웹페이지를 만들수 있도록 기획 되어 있습니다.

간혹, 디자인팜은 틀이 짜여져 있어서 수정하는데 한계가 있다라고 생각하시는 분들이 계시는데, 결론부터 말씀드리면 어떠한 웹페이지라도 99% 모두 자유자제로 수정 가능하도록 고급기능까지 갖추어져 있는 솔루션 입니다.

 

이번장에서는 html 을 모르는 사용자를 위주로 설명드고자 하며, 기본내용은 아래와 같습니다.

 - 모든 컨텐츠는 클릭만으로도 본문에 추가 됩니다.

 - 모든 컨텐츠는 반응형으로 제작되어 있으므로 모바일웹에 대해서 신경쓰실 필요 없습니다.

 - 모든 컨텐츠는 상하 자유롭게 드래그해서 옮길수 있습니다.

 - 모든 컨텐츠는 HTML을 자유자재로 수정 할 수 있습니다. (고급사용자용이며, 다음 강좌에서 따로 설명 드리도록 하겠습니다.)

 - 모든 컨텐츠는 Ctrl+C(복사), Ctrl+V(붙여넣기)가 지원되므로  얼마든지 재사용이 가능합니다. (현재 계정이 아닌 다른계정이더라도 Ctrl+V를 통해 쉽게 복사 할수 있습니다.)

 - 디자인팜에서 제공되는 레이아웃은 반응형 또는 일반형으로선택해서 사용할수 있습니다.

 - 100개가 넘는 다양한 프로그램 기능을 제공 합니다.

 

 

 

 

이번장에서는 메인화면을 수정하는 방법에 대해서 설명하고자 합니다.

아래와 같이 메인화면을 선택해주세요.

 

1. 고급관리자 모드에서 디자인팜을 실행해주세요.

 

 

 

2. [테마 관리]를 클릭 하고 해당 테마의 [수정]을 클릭하세요.

 

 

 

 

3.  테마 정보 수정 페이지에서  메인화면을 "새로 만들기"를 선택하고 저장 하세요.

 

 

 

4. 테마정보를 수정하였다면 아래 [메인화면] 페이지를 선택하세요.

 

 

 

5. 아래와 같은 화면이 나온다면 정상적으로 메인화면이 빈페이지로 만들어 진겁니다.

 

 

 

 

[메인화면]에 컨텐츠를 추가해 봅시다!!

 

본 강좌를 보기 전에 아래 강좌를 반드시 꼭 숙지 후 보세요.

 

- 홈페이지 시작! 1단계 테마란? : http://wdev.good-web.co.kr/bbs/faq/4318

- 테마 수정하는 방법 : http://wdev.good-web.co.kr/bbs/faq/4320

디자인팜이란? 레이아웃이란? 컨텐츠란? : http://wdev.good-web.co.kr/bbs/faq/4328

 

 

 

1. 메인 화면에 슬라이드를 추가해봅시다.

홍보형 홈페이지 90%는 메인에 큰 이미자가 옆으로 흘러가는 이미지를 많이 보셨을 겁니다.

이를 슬라이드 이미지라고 하며, 이번장에서 직접 만들어 보도록 하겠습니다.

 

 

- 왼쪽 컨텐츠박스에서 이미지 > 이미지리스트[슬라이드] 를 추가합니다.

아직 이미지가 없죠? 오른쪽 세부옵션에서 [1.이미지추가]를 클릭해서 이미지를 추가해줍니다.

 

 

 

 

밑에 [이미지추가]로 개수를 늘릴 수도 있고, 링크 값을 넣을 수도 있습니다. 

 

                         

 

 

 

 

 

[적용]을 누르시면 바로 확인이 가능합니다. 슬라이드에 이미지가 잘 나오나요? 사이즈는 오른쪽에서 수치를 조정합니다.

 

 

 

 

 

여기까지 작업 하고 실제 홈페이지가서 확인해보면 빈페이지로만 나오게 되는데 실제 반영되려면 반드시  [홈페이지 적용] 버튼을 클릭해야지만 정상적으로 반영 됩니다.

 

 

 

중간 확인하기 : http://farmmanual2.good-web.co.kr/page/manual41

 

 

 


 

 

 

2. 공지사항 게시글 출력하기!

먼저 컨텐츠 박스에서 [반웅형레이아웃] > [3칸 레이아웃]을 클릭하면  페이지 가장 밑에 레이아웃이 추가됩니다.

 

 

 

 

이번에는 텍스트 타이틀을 추가 해줍니다.

컨텐츠 박스에서 [텍스트] > [타이틀텍스트] 를 클릭하면 페이지 가장 밑에 텍스트가 추가 됩니다.

 

추가된 텍스트를 클릭 해서 레이아웃 첫번째 칸으로 드래그해서 넣습니다.

 

 

그리고 텍스트를 "공지사항"이라고 바꿔줍니다.변경 방법은 해당 텍스트를 클릭 하고 우측 옵션창에서 수정 할 수 있습니다.

 

 

 

 

 

공지사항 타이틀을 추가했다면 바로 밑에 공지게시글을 불러올수 있도록 해보겠습니다.

컨텐츠 박스에서 [프로그램마법사 > 최근게시글 목록형]을 클릭합니다.

 

ps. 프로그램 마법사 탭 밑에 보면 "더보기"가 있습니다.  굿웹에이전시에서는 다양한 프로그램이 지원되고 있으니 필요에 따라 추가 설치해서 사용 하시기 바랍니다.

 

추가된 최근게시글을  공지사항 타이틀 밑으로 드래그해서 옮깁니다.

 

 

 

 

최근게시글을 옮기고 나니 타이틀하고 너무 붙어 있네요.

보기 좋게 여백을 추가해보도록 하겠습니다. 이때 여백을 추가 하고 난뒤 PC버젼, 테블릿버젼, 모바일버젼 모두 각각 확인해보시기 바랍니다.

디자인팜에서 제공되는 모든 컨텐츠는 반응형을 기본으로 제작되더 있기때문에 여백추가로 인해 컨텐츠가 깨져 보일수도 있기 때문입니다.

오른쪽 세부옵션에서 컨텐츠 정렬에 TOP에 20px를 넣어줍니다.

 

 

 

 

 [적용]을 눌러주면 공지사항과 최근게시글 사이가 20px만큼 벌어집니다. 이렇게 컨텐츠간의 여백을 조절하시면 됩니다.

 

그리고 아래  디바이스 버튼을 통해 어떻게 출력되는지 확인해보시기 바랍니다.

 

 

 

 

중간 확인하기 : http://farmmanual2.good-web.co.kr/page/manual42

 

 

 


 

 

 

3. 이미지 배너를 추가 해봅시다.

이미지 배너를 추가해 봅시다. [메인화면]에서 제일 많이 사용되는 것이 게시글 출력 다음에 배너자나요?!

 

컨텐츠박스에서  [텍스트] > [타이틀텍스트] 클릭 해서 위에서 만든 "3칸 레이아웃"의 두번째 칸에 넣습니다.

그리고 "EVENT"라고 수정 합니다.  (수정방법은 위에서 설명했으므로 생략합니다. ^^)

 

컨텐츠 박스에서 [이미지] > [이미지] 2개를 추가해 볼게요.

 

이미지 추가 후 옵션창에서 실제 이미지 사이즈를 꼭 입력하세요.

디자인팜에서 제공되는 이미지는 대부분 썸네일 기능이 적용 되어 있습니다.

ps 썸네일 이미지란? 이미지의 실제 크기를 줄이는 방식 입니다.

예를들어 요즘 스마트폰으로 사진 촬영시 해상도가 3000px*3000px이며, 용량은 약 5MB 정도 됩니다.

이렇게 사이즈가 큰이미지를 단순히 사이즈만 가로200px, 세로200px로 변경해서 사용시 실제 용량이 줄어든게 아니기때문에 웹페이지 로딩하는데만 몇초가 걸릴수 있습니다. 이런 이미지가 만약 10개 정도 된다면 더더욱 느려지겠죠~~

이를 보안하기 위해 썸네일기능을 사용하게 됩니다.  만약 썸네일을 200px*200px로 설정 했다면, 실제 이미지의 사이즈를  200px*200px 으로 줄이기 때문에 용량 또한 줄어 들게 됩니다. 참고로 꼭 알고 계세요 ^^

 

필자는 이미지 사이즈를 330x76으로 설정하고 이미지를 업로드 하였습니다.

 

 

 

이미지 세부 옵션에  정렬, 여백, 링크정보등을 입력할수 있습니다.

여러분은 필요에 따라 직접 수정해보시기 바랍니다.

 

중간 확인하기 : http://farmmanual2.good-web.co.kr/page/manual43

 

 

 


 

 

 

4. 이미지리스트로 SNS공유하기 만들기!

 

컨텐츠박스에서  [텍스트] > [타이틀텍스트] 클릭 해서 위에서 만든 "3칸 레이아웃"의 마지막칸에 넣습니다.

그리고 "SNS 공유하기"라고 수정 합니다.  (수정방법은 위에서 설명했으므로 생략합니다. ^^)

 
컨텐츠 박스에서 [이미지] > [이미지리스트(타일형)]을 클릭 합니다.
 

옵션창에서 줄당 출력 수를 3개씩으로 하고 컨텐츠 가운데정렬을 해줍니다.

이미지 3개를 추가하고 제목을 입력해 줍니다. 저는 페이스북 / 트위터 / 카카오톡으로 했습니다.

필자는 임의로 SNS공유하기라고 했지만 여러분은 필요에 따라 다른 내용을 넣으셔도 됩니다. ^^

 

 

 

 

그리고 각 이미지를 클릭했을때 링크정보를 입력해주세요.

SNS 링크주소는 아래 매뉴얼 참고 바랍니다.

 

SNS연동하기 : http://manual.good-web.co.kr/page/basic1_05

중간 확인하기 : http://farmmanual2.good-web.co.kr/page/manual44

 

 

 

 


 

필자는 정말 많이 사용되는 컨텐츠기준으로 설명드렸습니다.

나머지 컨텐츠 사용방법은 모두 위와 동일하기 때문에 추가 설명은 생락 하도록 하겠습니다.

위 강좌만 재대로 따라하셨다면 누구나 쉽게 모든 컨텐츠를 사용할수 있으리라 봅니다. ^^;;;;

 

수고 많으셨습니다.

 

 

[디자인팜 1.0] [초보자용] 테마 수정 방법 안내

본 강좌를 보기전 스킨과 테마에 대해서 잘 모르신다면 아래 매뉴얼 보고 오시기 바랍니다.

- 홈페이지 시작! 1단계 테마란? : http://wdev.good-web.co.kr/bbs/faq/4318

 

 

테마 수정 하는 방법?!

스킨 및 테마를 직접 만드는것은 고급사용자(웹퍼블리셔)만 가능 하기때문에 본 강좌에서는 간편하게 수정하는 방법에 대해서 설명 하고자 합니다.

디자인팜을 실행 후 메뉴에서 [테마관리]를 클릭 합니다.

 

여러분은 아마 아래와 같이 테마가 1개 있을겁니다.

 

다시 설명드리자면 테마는 [메인스킨+서브시킨+ 메인화면] 이렇게 3장의 묶음 디자인을 말합니다.

현재 선택되어 있는 테마의 [메인스킨]을 클릭 합니다.

 

 

메인스킨을 선택하면 본문 내용을 제외한 외각 디자인만 있습니다. 

ps . 메인스킨따로 메인화면디자인을 이렇게 분리해놓은 이유는 차 후 리뉴얼 및 업데이트 관리가 용이하도록 하기 위해서 입니다.

자세한 내용은 매뉴얼 참고 바랍니다. ( http://wdev.good-web.co.kr/bbs/faq/4318 )

 

 

수정방법은 이전 강좌에서 설명드린것처럼 해당 컨텐츠를 클릭 후 우측 옵션박스에서 수정하면 됩니다.

각 컨텐츠 수정 방법 안내 :  http://wdev.good-web.co.kr/bbs/faq/4319

여러분은 직접 로고 변경, 색상변경등을 직접 수정해보시기 바랍니다.

 

이렇게 해서 메인스킨을 수정했다면 서브스킨도 위와 똑같은 방식으로 수정해주면 됩니다.

주의 할 점은 메인스킨은 메인에만 적용되지만, 서브 스킨은 메인을 제외한 모든 페이지에 일괄적용 됩니다.

ps. 서브 페이지도 경우에 따라 다른 서브 스킨을 선택 할수 있습니다. 이부분은 고급사용자용이며, 웹퍼블리셔가 아니라면 모든 서브페이지의 스킨은 동일하게 맞추시기 바랍니다.

 

테마 수정 부분은 워낙 간단해서 추가로 설명 드릴부분이 많이 없네요

궁금하신점은 아래 댓글 남겨주시면 본 매뉴얼을 보안 하도록 하겠습니다.

수고하셨습니다.

 

 

[디자인팜 1.0] [초보자용] 네비게이션에 메뉴 추가 및 수정 방법 안내
디자인팜에서 메뉴를 추가해봅시다!
 
굿웹에이전시 솔루션에서 기본적으로 제공되는 [디자인관리 > 전문가 환경설정 > 네비게이션 마법사]는 복잡하고 손이 다소 많이 가는 편이지만, 디자인팜에서는 기능은 동일하면서 아주 쉽게 사용할수 있도록 개발 되어 있습니다.
 
 
 
1. 디자인팜 안에서 [메뉴관리]를 클릭하세요.
 
템플릿을 통해 홈페이지를 만들었다면 기본적으로 아래와 같이 유사한 형태로 메뉴구성이 되어 있을겁니다.
우측 상단에 있는 [메뉴추가]를 클릭 합니다.
 
 

 

  
 
 

2. [메뉴추가] 클릭시 아래와 같이 일반디자인페이지, 게시판, 전송품, 기타페이지로 구성 되어 있습니다.

 

간혹 굿웹에이전시 솔루션에서 제공되는 많고 많은 기능들이 다 빠진거 아니냐는 의구심을 가지시는분이 계신는데 그렇지 않습니다.

위 페이지 유형은 현재 계정에 설치되어 있는 모듈에 따라 자동으로 생성되도록 되어 있습니다.

아래는 커뮤니티 사이트인경우 사용가능한 페이지 유형입니다.

 

즉 설치된 프로그램 모듈에 따라서 해당되는 페이지 유형이 생성되도록 되어 있습니다.

 

필자는 홈페이지제작시 가장 기본 페이지인 "인사말" 페이지를  직접 만들어 보도록 하겠습니다.

페이지 유형은  "일반 디자인 페이지"를 선택 하고 ,  기본 디자인은 여러분 취향에 맞게 선택해도 되고 안하셔도 됩니다. ^^

페이지 주소는 이후 변경이 안되므로 신중하게 적어주세요. (영문 10자 이하)

메뉴명은 실제 홈페이지 메뉴바에 출력되는 메뉴명을 입력하시면 됩니다. 

이렇게 정보를 입력하고 [만들기]를 클릭하면 아래와 같이 페이지가 생성되었습니다.

 

디자인 수정방법은 이전 강좌에서 설명드렸으니 참고하셔서 직접 수정해보시기 바랍니다. 

 

 

3. 메뉴 위치 이동

 

디자인팜에서 페이지를 만들게 되면 자동으로 네비게이션에도 메뉴가 추가 됩니다.

이때 추가되는 위치는 아래와 같이 가장 뒤쪽에 추가 되므로 이동 해줘야 합니다.

해당 회사 소개 메뉴를 마우스로 선택해서 원하는 위치로 드래그해서 옮기도록 합니다.

 

참고로 대메뉴도 위와 같은 방식으로 이동 할 수 있습니다.

 

이렇게 해서 디자인팜에서 메뉴 추가하는 방법에 대해서 알아보았습니다.

여러분은 위와 같은 방식으로 게시판 및 각종 전송폼등을 만들어서 추가해보시기 바랍니다.

 

[디자인팜 1.0] [초보자용] 기타페이지 사용 방법

일반 홍보형 및 쇼핑몰 제작시 네비게이션(메뉴바)에 등록되어 있지 않지만 사용되는 페이지가 많습니다.

예를들어 로그인, 회원가입, 회원정보수정,  장바구니, 결제하기등등.. 이런 메뉴는 실제 네비게이션에 추가되어 있지 않지만 꼭 필요한 페이지이죠.

이런 페이지는 관리 하려면 [기타 페이지 관리]로 가시면 됩니다.

 

1. [기타 페이지 관리]를 클릭하세요

각 탭을 클릭해보면 관련 페이지가 모두 있습니다.

 

 

2. 우선 처음 계정을 셋팅했다면 모든 페이지를 초기화 하는것이 좋습니다.

 

초기화 하지 않은 경우 각 페이지별로 일일이 다 디자인을 초기화 해줘야 하기 때문입니다.

필자는 아래와 같이 "Farm Design A"를 선택하고 [전체 변경] 버튼을 클릭 했습니다.

이제 모든 기타페이지는 FARM DESIGN A로 초기화 되었습니다.

 

 

3. 정상적으로 초기화되었는지 확인해보기 위해서 [MYPAGE > 로그인]을 선택 합니다.

 

그런데 로그인 페이지를 선택했는데 로그인 관련 화면이 나오지는 않고, "웹페이지 본문이 출력 되는곳입니다" 라고만 출력 되고 있습니다.

이유는 "기타페이지"는 일반 디자인페이지와는 달리 아주 복잡한 소스로 구성되어 있기 때문에 디자인팜 미리보기 화면에서 표현하지 않고, 실제 홈페이지에서만 확인이 가능하도록 되어 있습니다. 
예를들어 쇼핑몰 주문페이지, 회원가입페이지만 보더라도 엄청나게 많은 컨텐츠 집합과 프로그램 소스가 섞여 있는데 이런 페이지를 디자인팜 미리보기 화면으로 불러오게 되면, 오히려 더 손을 쓸수 없을 만큼 더 까다로워지기 때문입니다.

(만약 소스 수정을 원하시면 [고급사용자용] 매뉴얼을 참고 하세요.)

 

그럼 실제 홈페이지에서 어떻게 출력 되는지 [미리보기]버튼을 통해 확인해보세요.

아래와 같이 정상적으로 출력 되나요?

 

 

4.  로그인 페이지 밑부분에  배너 광고를 하나 추가해보도록 하겠습니다.

 

디자인팜 컨텐츠 박스에서 아래와 같이 이미지를 하나 추가해주세요.

 

그리고 [홈페이지 적용] 버튼을 클릭 후  [미리보기] 버튼을 클릭해서 실제 홈페이지가 어떻게 변경되었는지 확인해보세요.

 

 

디자인팜 미리보기 화면에서 "웹페이지 본문이 출력 되는곳입니다" 부분은 실제 로그인폼 부분이고 나머지 부분은 디자인팜에서 쉽게 디자인을 추가 할수 있음을 알수 있습니다.

 

 

5.  로그인 폼 부분의 색상을 변경 하고 싶다면 아래와 같이 색상을 변경하면 됩니다.

 

단, 주의 할점은 [기타 페이지] 본문에서 제공되는 옵션은 모든 기타페이지에 일괄적용 되므로 이점 숙지 바랍니다.

 

 

 

6. 단순 색상 변경이 아니라 구조를 변경한다던지, 소스를 수정해야하는경우는 HTML을 모르신다면 불가능하므로 되도록이면 이정도 선에서 사용하시는것이 바람 직합니다.

 

본 강좌는 초보자용인데 더이상 세세한 수정은 맞춤제작이라고 봐야 하기때문에 여기에 대해서는 고급자용 매뉴얼에서 자세하게 다루도록 하겠습니다.

 

 

수고하셨습니다. ^^

 

 

[디자인팜 1.0] [고급사용자용] 맞춤형 컨텐츠 및 레이아웃을 만들때 CSS 소스 처리 방법

디자인팜에서 제공되는 모든 컨텐츠는 html 및 CSS 를 수정 할 수 있도록 개발 되어 있습니다.

본 강좌는 html 및 css를 전문적으로 다룰줄아는 웹퍼블려서를 위한 강좌 이므로, html 및 CSS에 대한 전문지식이 없는상태에서 소스 수정하게 되면 페이지 전체가 다 깨지거나 복구가 안될수 있습니다.

 

디자인팜에서 html 소스 수정 방법

이해를 돕기 위해 http://wdev.good-web.co.kr/bbs/faq/4325 에서 생성한 "회사소개" 페이지를 불러 옵니다.

 

 

가운데 이미지를 선택 후  우측 옵션 박스에서 [소스수정] 버튼을 클릭 합니다.

소스를 보시면 아시겠지만 일반 html 로 구성 되어 있는것을 알수 있습니다. 여기서 원하는데로 수정 할수 있습니다.

만약 소스 수정하기 불편하다면 하단에 "FTP파일경로"가 있으므로 EditPlus 와 같은 편집 프로그램을 통해 소스 수정 하면 됩니다.

모든 컨텐츠 및 레이아웃 위와 같은 방식으로 소스 수정 할 수 있습니다.

 

 

디자인팜에서 CSS 소스 추가 방법.

html 소스 수정은 직관적으로 매우 간단하다는것을 알수 있습니다.

하지만 CSS는 조금 주의 해야 할부분이 있습니다.

 

보통 일반 html파일에서 CSS소스를 추가 할때 보통 <load>태그를 활용해서 아래와 같이 <head>~</head>사이에 아래와 같이 소스를 추가 합니다.
<load> 매뉴얼 : 
http://manual.good-web.co.kr/page/basic1_02

 

<head><link rel="stylesheet" type="text/css" href="/img_up/shop_pds/wdev/src_css/layout.css" /></head><body><load target="/img_up/shop_pds/wdev/src_css/layout.css" />안녕하세요~</body>

 

 

하지만 디자인팜에서는 아래와 같이 html 위쪽에 <in-style>방식으로 추가해줘야 합니다.

 

<style>.myfont{color:red}</style><span class='myfont'>안녕하세요~</span>

 

왜 이렇게 코딩 하는지? 또 웹표준에 어긋나는건 아닌지?  자세하게 설명드리도록 하겠습니다.

 

디자인팜은 초보자에게는 단순하고 간편성을 지향하고, 고급사용자에게는 다양성과 생산성을 동시에 추구하고 있습니다.

예를들어 <load>방식으로 통해 <head>에 css 파일을 불러오도록 만들었다면, 해당 컨텐츠는 작동하는데 전혀 문제가 없습니다.

하지만 해당 컨텐츠를 Ctrl+C (복사)해서 같은페이지에 Ctrl+V(붙여넣기) 하게 되면, 컨텐츠마다 독립성이 있어야 하기때문에 CSS파일을 다른이름으로 복사하게 됩니다.

즉, 복사한 파일은 자동으로 [디자인관리 > 고급 디자인 관리 > CSS 파일관리 ]에 쌓이게 되는거죠.

그렇다면 모든 컨텐츠가 <load>방식으로 통해 <head>에 css 파일을 불러온다면 어떻게 될까요?

아래와 같이 CSS파일이 수백개될수도 있습니다.

 

사실 이런 상황까지 오개 되면 CSS 유지보수는 불가능하다고 봐야 할것 입니다.

이런 확장성 및 생산성을 보안하기위해 <in-style>방식으로 코딩하게 된다면 CSS 파일이 하나도 생기지 않으며, 해당 html 소스에서 CSS 소스도 같이 수정 할수 있기때문에 매우 직관적입니다.

하지만 <in-style> 방식은  페이지 레이아웃을 결정하는 소스는 <head>~</head>안에 들어가야지만 정상적으로 구동 되기 때문에 페이지가 깨져보일수도 있다라는점 입니다.

디자인팜에서 이런 문제점을 개선하고자 <in-style> 방식으로 추가된 CSS를 하나의 CSS파일을 자동 생성해서 <head>~</head>안에 추가 하도록 되어 있으므로 염려하지 않으셔도 됩니다.

예를 들어 아래와 같이 소스를 수정하였다면,

 

<style>.myfont{color:red}</style><span class='myfont'>안녕하세요~</span>

 

자동으로 12347845864221.css 임시 파일이 생성되면서 아래와 같이 <head>~</head>안에 CSS파일이 선언됩니다.

 

<head><link rel="stylesheet" type="text/css" href="/img_up/shop_pds/tmp/src_css_farm/12347845864221.css" /></head><body><span class='myfont'>안녕하세요~</span></body>

 

즉 디자인팜에서는  <in-style> 방식으로 코딩하더라도 자동으로 웹표준에 맞춰서 <head>~</head>안에 CSS파일이 선언되므로 꼭 <in-style> 방식으로 코딩하세요 ^^

 

디자인팜에서 CSS 소스 추가시 주의 사항!

위에서 생성한 html 소스는 단순하게  "안녕하세요"라는 빨간색 글자를 출력하는 소스 입니다.

매우 중요한 부분이라 아래와 같이 직접 테스트 해보시기 바랍니다.

 

1. 디자인 팜에서 빈페이지를 만들어주세요.

 

2. 왼쪽 컨템츠 박스에서 "맞춤형 컨텐츠"를 추가해주세요.

 

 

3. 추가된 "맞춤형 컨텐츠"를 선택 하고 우측 상단 [소스수정]을 클릭하고 아래 소스를 붙여 넣어주세요.

 

 

4. 새로 고침 하면 정상적으로 컨텐츠가 출력 됩니다.

 

5. "안녕하세요~"를 선택하고  Ctrl+C (복사),  바로 Ctrl+V(붙여넣기) 를 합니다.

그럼 아래와 같이 컨텐츠가 복사 되었습니다.

 

 

6. 다시 첫번째 "안녕하세요~" 컨텐츠를 선택하고 아래와 같이 폰트색상을 blue로  수정 합니다.  

이렇게 수정하고 새로 고침하면 글자가 파란색으로 바뀌지 않고 빨간색으로 출력되는 버그를 볼수 있습니다.

 

 

 

7. 이번에는 두번째 "안녕하세요~"를 선택하고 글자색을 green으로 변경합니다.

이번에는 엉뚱하게도 첫번째 "안녕하세요~"까지 색상이 바뀌어 버렸습니다.

 

문제는 CSS 오버라이딩 때문입니다.

디자인팜에서는 <in-style>방식으로 CSS 추가하더라도 별도 파일로 따로 저장되는 이때 가장 마지막에 추가한 CSS가 우선이 되기 때문입니다.

이런 문제를 해결하려면 모든 클래스명뒤쪽에 __RAND__ 붙이면 간단하게 해결 됩니다.

 

 

8. 첫번째 "안녕하세요~" 컨텐츠 소스를 아래와 같이 수정해주세요.

 

<style>.myfont__RAND__ {color:red}</style><span class='myfont__RAND__'>안녕하세요~</span>

 

그리고 두번째 "안녕하세요~"는 삭제 합니다.

 

 

9. 소스 수정된 컨텐츠를 선택하고 Ctrl+C (복사),  바로 Ctrl+V(붙여넣기) 를 합니다.

그리고 복사된 컨텐츠를 선택하고 소스를 보면 아래와 같이 __RAND__가 임의의 숫자로 변경된것을 알수 있습니다.

 

생성된 두번째 컨텐츠를 다시  Ctrl+C (복사),  바로 Ctrl+V(붙여넣기) 를 해서 세번째 컨텐츠를 만듭니다.

즉, __RAND__ 사용시 자동으로 _000000_ 와 같이 변경되고 다시 복사하더라도 _00001_ 와 같이 중복되지 않는 고유의 숫자로 변경됩니다.

이렇게 __RAND__ 사용해서 코딩하게 되면  CSS 충돌을 피할수 있게 되고, 각 컨텐츠마다 독립적인 형태로 소스를 관리 할수 있게 됩니다.

위와 같이 3개의 컨텐츠를 만들고 글자색상을 빨강, 파랑, 녹색으로 변경해보았습니다.

예상 했던데로 문제 없이 정상적으로 색상이 변경 되었네요 ^^

 

 

간단한 문제를 너무 길게 설명하지 않았나 싶네요.

워낙 중요한 부분이라 나름 신경써서 설명 드렸습니다. ^^

이쯤 설명드리고 나면, 몇몇 퍼블리셔님들께서 "에잇~ 귀찮게 왜 이렇게 만들어? 기존 하던데로 하지~" 라고 생각하실수 있습니다.

 

필자는 이해를 돕기위해 "안녕하세요~"라고 초간단 html 을 예제로 보여드렸습니다.

만약 http://urfjob01.good-web.co.kr/main 에서 출력되는 모든 컨텐츠를 필자가 제시한 방법대로 만들게 되면 아래와 같은 효과를 가질수 있습니다.

위에서 원본 사이트에서 원하는 컨테츠(메인출력게시글, 메인이미지 슬라이드, 각종 배너, 각종 컨텐츠 출력 프로그램등)를 선택 후  Ctrl+C(복사)  합니다.

A 홍보형 사이트에서 원하는 위치에 Ctrl+V(붙여넣기) 

B 쇼핑몰에서 원하는 위치에 Ctrl+V(붙여넣기)

C 병원 구인구직 사이트에서 원하는 위치에 Ctrl+V(붙여넣기)

D 아르바이트 구인구직 사이트에서 원하는 위치에 Ctrl+V(붙여넣기)

이렇게 순식간에 많은 부분들이 해결되기 때문입니다.

 

시중에 나와있는 수많은 빌더들은 마치 독립형계정처럼 구동 되기 때문에, 다른계정에 있는 소스를 가져와 붙이려면 수작업으로 일일 붙여야 하는데 이때 페이지당 최소 30분이상 소요 됩니다. 그리고 다시 고객 요구 사항에 맞게 다시 커스터마이징을 해야하기 때문에 많은 시간을 소요 할수 밖에 없는 구조 입니다.

 

하지만 디자인팜은 복사, 붙여넣기는 한순간에 처리되고 커스터마이징은 해당 컨텐츠마다 옵션 설정이 가능하기때문에, 고객이 직접 수정할 수 도 있고, 아니면 html 을 전혀 모르는 담당자가 쉽게 수정 할 수 있습니다.

 

이럿듯 디자인팜은 재작업을 줄이고, 제작속도는 빠르게 하고,  고객이 쉽게 수정 할 수 있도록 하려면, 최초 컨텐츠를 제작할때 신경써서 제작하는것이 좋습니다.

 

수고하셨습니다.

 

 

[디자인팜 1.0] [고급사용자용] 컨텐츠을 원하는데로 직접 만들기

본 강좌는 HTML 및 CSS 에 대한 전문지식이 있는 독자에 맞춰져 있습니다.

HTML 및 CSS 모르는 경우 컨텐츠를 직접 만들수 없으니, 기본 제공되는 컨텐츠를 최대한 활용해서 홈페이지 제작하는것이 좋습니다.


본 강좌를 보기전 아래 강좌를 숙지 후 보시면 이해하는데 도움 됩니다.

- 템플릿팜? 컨텐츠? 레이아웃? : http://wdev.good-web.co.kr/bbs/faq/4328

- 맞춤형 컨텐츠 및 레이아웃을 만들때 CSS 소스 처리 방법 : http://wdev.good-web.co.kr/bbs/faq/4323


 

디자인팜 왼쪽 메뉴에는 많은 컨텐츠가 있으나, 그래도 내입맛에 딱 맞는 컨텐츠는 없을수 있습니다.

디자인팜은 초보자에게는 드래그앤드롭 방식으로 아주 쉬운 마법사기능을 제공하지만, 내부적으로는 모두 소스기반으로 구동 되고 있습니다.

웹퍼블리셔라면 소스 작업을 통해 원하는데로 컨텐츠를 만들수 있습니다.

 

컨텐츠를 내 손으로 만들어 봅시다!

필자는 가장 자주사용되는 "타이틀용 텍스트"를 만들어 보겠습니다.

"타이틀용 텍스트"라는게 대단한건 아니구요. 일반 글씨보다 약간 크고 두꺼운 텍스트라고 보시면 될것 같습니다. ^^

 

 

1. 먼저 컨텐츠를 왼쪽 메뉴에서 [맞춤형페이지] > [맞춤형 컨텐츠]를 클릭 합니다.

 

그럼 아래와 같이 맞춤형컨텐츠가 추가 됩니다.

오른쪽에 옵션박스 윗부분에 "고급자용 소스수정" 버튼을 클릭 합니다.

 

 

 

2. 아래와 같이 기본소스가 들어가 있는데 모두 지우세요.

 

그리고 아래 소스를 붙여 넣어주세요.

 

<style>  .title_top {  font-size:16px; color:#000000;font-weight:bold }</style><p class="title_top">타이틀 텍스트 입력</p>

 

 

페이지 새로고침하면 아래와 같이 글씨가 조금 크고 두꺼운 타이틀이 만들어 졌습니다.

 

이렇게 해서 이쁘게(?) 타이틀을 만들었는데 html을 모르는 일반 사용자가 사용하기에 무리수가 있어 보입니다.

이런 텍스트는 보통 사용자가 글자 크기, 글자 색상정도는 쉽게 바꿀수 있어야 하는데 지금은 그런 옵션이 없기 때문입니다.

고객이 필요할만한 옵션을 정리해서 직접 추가해보도록 하겠습니다.

 

 

3. 소스수정 화면 밑부분을 보면 [변수관리] 라는 버튼이 있습니다. 클릭하세요

변수가 어떤건지에 대한 설명은 뒤에 하도록 하겠습니다. ^^ 우선 따라하세요~

 

처음 실행하면 아무것도 등록 된 데이타가 없을것 입니다.

아래와 같이 각종 옵션값을 입력해주세요. 그리고 저장 하세요.

  

위와 동일하게 모든 값을 다 넣고 저장 했다면, 창닫아주세요.

 

4. 다시 소스수정화면에서 새로고침(F5)하면 아랫부분은 사용가능한 변수들이 출력 됩니다.

   

 

5. 변수 목록에서 가장 유심히 봐야 할 부분이 변수명입니다.

현재 $farm_set[size] 입력시 적용된 기본값이 16 이고, $farm_set[color] 입력시 적용된값 기본값이 #000000 입니다.

위 변수를 활용해서 html 소스를 아래와 같이 수정해주세요.

 

<style>  .title_top {  font-size:{$farm_set[size]}px; color:{$farm_set[color]};font-weight:bold }</style><p class="title_top">{$farm_set[text]}</p>

 

그리고 새로고침하고 결과를 확인해보세요.

 

위에서 보시는바와 같이 우리는  font-size 입력부분에 숫자를 넣는게 아니라  {$farm_set[size]}를 넣었는데 실제 출력될때는 16으로 변환되어서 출력되었고, 색상은 #000000, 텍스트내용은 "타이틀입니다"라고 출력 되고 있습니다.

해당 컨텐츠를 클릭 하면 우측에 옵션들이 생기는데 각 옵션을 아래와 같이 변경해보시기 바랍니다.

 

 

 

즉 변수는 해당 컨텐츠의 옵션이라고 볼수 있으며, 옵션은 html을 전혀 모르는 고객이 직접 수정할수 있도록 되어 있습니다.

그래서 컨텐츠를 만들때는 고객이 사용가능성이 높은것 위주로 변수처리를 해줘야 합니다.

그렇다고 해서 너무 많은 변수남발은 사용성이 더 떨어져 오히려 독이 될수 있으니 적절하게 변수를 사용해야 합니다.

 

필자는 쉽게 설명하기위해 아주 간단한 텍스트를 예를들어 설명했지만, 웹상 컨텐츠는 정말 다양하고 복잡한 컨텐츠가 많이 있습니다.

디자인팜에서는 복잡한 컨텐츠도 쉽게 제작할수 있도록 PHPX 문법을 사용 할수 있습니다.

예를들어 위 $farm_set[size]에 입력된 값에 따라 아이콘이 출력되게 만들수도 있습니다.

 

 

<style>  .title_top {  font-size:{$farm_set[size]}px; color:{$farm_set[color]};font-weight:bold }</style><p class="title_top"><span cond="$farm_set[size] == 12">아이콘A</span><span cond="$farm_set[size] == 16">아이콘B</span><span cond="$farm_set[size] == 20">아이콘B</span>{$farm_set[text]}</p>

 

또는

 

<style>  .title_top {  font-size:{$farm_set[size]}px; color:{$farm_set[color]};font-weight:bold }</style><p class="title_top"><!--@if($farm_set[size] == 12)-->아이콘A<!--@elseif($farm_set[size] == 16)-->아이콘B<!--@elseif($farm_set[size] == 20)-->아이콘C<!--@end-->{$farm_set[text]}</p>

 

위 소스는 고객이 폰트사이즈를 12로 설정하게 되면 "아이콘A"가 출력되고 16을 선택하게 되면 "아이콘B"가 출력되는 로직 입니다.

 

이렇게 PHPX문법 이용시 컨텐츠를 좀 더 유연하게 만들수있고 코딩량도 상당히 많이 줄어들게 됩니다.

 

PHPX문법을 잘모르시면 아래 매뉴얼 참고 바랍니다.

PHPX 관련 매뉴얼 : http://manual.good-web.co.kr/page/php1_01

 

수고 많으셨습니다.

 

[디자인팜 1.0] [고급사용자용] 레이아웃을 원하는데로 직접 만들기

본 강좌는 "맞춤형 컨텐츠 만들기"와 매우 흡사하므로 중복되는 내용은 생략 하도록하겠습니다.

"맞춤형 컨텐츠 만들기"확인 하지 않으셨다면 아래 링크를 통해 사용방법을 습득 후 본 강좌를 보시기 바랍니다.

 

디자인팜에서 기본적으로 제공되는 레이아웃은 아래와 같이 종류가 많지 않습니다. (2015.05.01 기준이며, 이후 더 추가 되어 있을수있습니다.)

 

경우에 따라서는 기본 제공되는 레이아웃으로 제작이 불가능한 경우가 있는데 이럴때  "맞춤형 레이아웃"을 통해 직접 레이아웃을 만들수 있습니다.

 

1. 디자인팜에서 빈페이지 만든 후 "맞춤형 레이아웃"을 추가해주세요.

 

2. 추가된 "맞춤레이아웃"을 선택하고  [소스수정] 버튼을 클릭 합니다.

 

그리고 아래 소스를 복사해서 붙여 넣어주세요.

 

<div>    <div>{FARM_CONTAINER}</div>    <div>{FARM_CONTAINER}</div></div>

 

필자는 위와 같이 아주 간단하게 레이아웃을 만들어 봤습니다. 반응형은 전혀 고려하지 않았으며, 단순하게  세로 2칸짜리 레이아웃으로 코딩 하였습니다.

 

 

우리는 이전 강좌에서 맞춤형 컨텐츠를 만들때 변수를 활용해서 다양한 옵션을 만들었습니다.

레이아웃도 역시 컨텐츠만들때와 똑같이 변수를 활용해서 만들수 있습니다.

(만드는 방법에 대해서는 생략 합니다. 이전 강좌에서 확인 하세요)

 

한가지 유심히 보셔야 할부분은 레이아웃에는 컨텐츠에 없던 {FARM_CONTAINER}이라는 변수가 자동으로 추가 되어 있습니다.

이변수는 사실 변수라기보다는 컨텐츠를 담을수 있는 공간이라고 보시면 됩니다.

 

필자는 {FARM_CONTAINER} 두번 사용했으므로, 미리보기 화면에서도 [FARM_CONTAINER]  구역이 2개로 나타 납니다.

 

 

이렇게 추가 된 [FARM_CONTAINER]구역안에 여러가지 컨텐츠를 밀어 넣어보시기 바랍니다.

텍스트 2개, 이미지 2개씩 각각 밀어 넣어봤습니다.

 

 

 

이렇듯, [FARM_CONTAINER] 구역에는 여러개의 컨텐츠를 드래그해서 넣을수 있으며, 순서 변경까지 가능 합니다.

 

정리하면, {FARM_CONTAINER} 변수는 사용갯수 제한 없으며, html 코딩만 가능하다면  어떠한 레이아웃이든 직접 만들수 있도록 설계 되어 있습니다.

또한 옵션값을 통해 반응형으로 작동여부까지 컨트롤 할수 있게 만들수도 있습니다.

 

마지막으로 주의 사항하나 있습니다. 

레이아웃안에는 컨텐츠만 넣을수 있으며, 레이아웃은 넣을수 없습니다.

이거 하나만 유념하시면 될것 같네요 ^^

 

수고하셨습니다.

 

 

[디자인팜 1.0] [고급사용자용] 기타 페이지 및 각종 프로그램 페이지의 작동 원리 및 소스 수정 방법

본 강좌를 보기 전에 아래 강좌 습득후 보시기 바랍니다.

[초보자용] 기타페이지 사용 방법 - http://wdev.good-web.co.kr/bbs/faq/4388


 

디자인팜에서 제공되는 [기타페이지]는 고급관리자 모드에서 제공되는 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인] 페이지와 동일하다는것을 알 수 있습니다.

 

1. [기타 페이지] 작동원리에 대해서 알아보겠습니다.

 

디자인팜에서 [기타페이지]를 일괄변경 할수 있도록 되어 있는데 제공되는 디자인은 사실 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]에서 제공되는 소스 입니다. 결국 같은 소스죠.

  

그렇다면 FARM DESIGN A를 선택해서 초기화 했으니 당연히 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인] 에서도 FARM DESIGN A이 선택되어 있어야 하는데 어찌된일인지 아래와 같이 맞춤디자인으로 선택되어 있습니다.

 

작동원리는 맞춤디자인을 빈페이지를 만들어서 선택하도록 하고, 실제 FARM DESIGN A 소스는 맞춤디자인으로 들어가는게 아니라 아래 디자인팜 소스수정 화면으로 복사되기 때문입니다.

실제 디자인팜에서 "로그인"페이지를 선택하고 소스 수정을 클릭해봅시다.

 

 

아래와 같이 FARM DESIGN A 소스가 모두 들어가 있음을 알수 있습니다.

 

이렇게 소스가 디자인팜 컨텐츠쪽으로 넘어가기 때문에 실제 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인] 에는 빈페이지만 만들어놨을뿐 어떤 소스도 없는 상태 입니다.

 

사실 기타페이지만 이런 방식이 아니라 맞춤 전송폼, 맞춤게시판, 견적문의, 쿠폰북, 이벤트게시판등 모두 이와 같은 방식으로 구동 되도록 되어 있습니다.

 

다음 예제를 통해 좀 더 자세하게 알아보도록 하겠습니다.

 

2. "로그인" 페이지를 선택 후 하단에 이미지 하나 추가해보도록 합시다.

 

"웹페이지 본문이 출력되는 곳입니다"를 선택후 소스 수정화면으로 이동 합니다.

필자는 여러분의 이해를 돕기 위해 아래와 같이 "디자인팜에서 소스 수정 할 수 있습니다 ^^" 를 추가해봤습니다.

여러분 취향에 따라 자유롭게 수정해보시기 바랍니다.

 

저장 후 [홈페이지 적용] 클릭 후 미리보기를 클릭 합니다.

 

실제 홈페이지에서 확인 해보면 아래와 같이 수정한것들이 반영되어 있는것을 알수 있습니다.

 

 

3. 홈페이지 제작하다보면 불가피하게 디자인팜을 사용하지않고 순수 일반 HTML로 작업해야 하는경우가 있습니다. 

이런경우 현재까지 디자인팜으로 작업 해놓은 페이지를 일반 HTML로 전환 할 수 있습니다.

고급관리자 모드에서 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]으로 이동 후 "로그인" 페이지를 선택해 봅시다.

그럼 아래와 같이 경고 문구와 함께 디자인팜 해지버튼이 있습니다.

[디자인팜 사용해지]를 클릭 해 보도록 하겠습니다.

 

디자인팜을 사용을 해지하게 되면 모든 소스가 일반 HTML로 자동 컨버팅됩니다.

주의하실점은 이렇게 컨버팅된 소스는 아래와 같이 디자인팜 모드로 돌아갈수 없게 됩니다. 꼭 필요할때만 사용하세요 ^^

* 디자인팜모드가 아닌경우 빨간색으로 표시 됩니다.

 

만약 다시 디자인팜모드로 돌아갈려면 초기화버튼을 클릭하거나,  [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]에서 [디자인팜추가]를 클릭하면 다시 디자인팜 모드로 돌아갈수 있으니 참고하세요.

  

 

이번 강좌는 체험을 해보는 시간이라기 보다는 원리를 공부하는 시간 같네요 ^^

웹퍼블리셔라면 반드시 꼭 알아야 하는 중요한 강좌인데 지루하지 않았나 모르겠네요.

이해안가시면 댓글 부탁드립니다. ~ ^^

 

수고하셨습니다.

 

 

[디자인팜 1.0] [200% 활용방법] Ctrl+C (복사), Ctrl+V(붙여넣기)를 활용 하세요.

디자인팜에서 제작된 모든 컨텐츠는 페이지 및 계정ID 구분없이 Ctrl+C (복사), Ctrl+V(붙여넣기) 지원 하고 있습니다.

 

예를 들어 아래와 같이 활용하면 좀 더 쉽게 페이지를 만들수 있습니다.

 

1. A계정에서 오시는 길을 선택하고 Ctrl+C (복사) 합니다.

 

 

 

2. 다른 관리자모드 B계정으로 이동 후 적당 한 위치에   Ctrl+V(붙여넣기) 를 합니다.

 

 

 

복사를 하게 되면 내부에 포함되어 있는 *.css, *.js  및  Image까지 모두 복사 되기 때문에  파일갯수 및 Image의 용량 크기에 따라 느릴수 있습니다.

예를 들어 아래와 같이 <css>, <js>, <img>를 사용한 소스가 있는 컨텐츠를 복사하게 되면.

 

<link rel="stylesheet" href="my_file.css" type="text/css"><script type="text/javascript" src="my_file.js"></script><img src="/img/my_image.gif">

 

아래와 같이 파일명이 변경되면서 복사 됩니다.

 

<link rel="stylesheet" href="my_file2.css" type="text/css"><script type="text/javascript" src="my_file2.js"></script><img src="/img/my_image2.gif">

 

 

즉, CSS파일, JS파일,  Image파일, Table 안에 입력한 각종 값등은 모두 다른이름으로 복제 해서 자동 셋팅 되는 방식 입니다.

 

유용한 기능이니 꼭 숙지하세요 ^^