이번장은 스킨변경 및 스킨소스 수정에 대해서 말씀드리겠습니다. 

스킨이라고 함은 홈페이지의 외각디자인을 말합니다. 본문이 출력되는 부분을 제외한

상,하단부분 혹은 좌측부분까지를 말하며, 이 스킨을 간단하게 클릭만으로 다른 스타일의 레이아웃으로 변경이 가능합니다.

 

[스킨변경]

디자인팜 2.0을 실행을 한뒤 상단에 보면 스킨관리라는 버튼이 있습니다. 이 버튼을 클릭을 해서 스킨을 변경 할 수 있습니다.

스킨은 홈페이지의 유형에 맞게 출력됩니다. 현재 홈페이지 유형이 "제품소개"일 경우에 다른 유형(쇼핑몰전용스킨, 홍보용스킨등)의 전용스킨은 출력되지 않습니다.

(즉, 다른 유형의 홈페이지에 있는 스킨이 해당 홈페이지에는 없을 수도 있습니다.)

 

<스킨 선택화면>

1) 스킨 레이아웃의 유형을 선택할 수 있습니다.

- 와이드형 : 메인&서브페이지 스킨이 상하단에 배치됩니다.

- 와이드+좌측메뉴형 : 메인페이지 스킨은 상하단에 배치되고 서브페이지는 좌측에 메뉴가 추가됩니다.

- 와이드+우측메뉴형 : 메인페이지 스킨은 상하단에 배치되고 서브페이지는 우측에 메뉴가 추가됩니다.

- 좌측 메뉴형 : 메인&서브페이지 좌측에 메뉴가 생성되어 있습니다.

- 모바일웹 : 모바일 스킨을 확인하실 수 있습니다.

2) 스킨컬러로 해당 컬러를 가지고 있는 스킨을 확인할 수 있습니다. 자세한 부분은 아래에서 설명드리겠습니다.

 

 

1. 스킨 선택

1) 유형별 스킨찾기

- "스킨 관리"를 클릭하면 아래와 같이 팝업창이 나옵니다. 현재 선택되어 있는 스킨은 Skin. 796입니다. 스킨 Skin.745로 변경해보도록 하겠습니다.

- Skin. 745를 클릭합니다.

<스킨 선택 팝업창>

 

변경할 스킨을 클릭하면 아래와 같이 색상선택을 하는 팝업창이 나옵니다.

한스킨에 색상을 여러개 포함하고 있습니다. Skin. 745는 5가지의 색상을 가지고 있습니다.

메인 및 서브보기를 통해서 적용할 스킨의 설치된 디자인을 확인 하신후 원하시는 색상으로 "스킨설치"버튼을 클릭합니다.

<스킨 색상선택화면>

 

설치가 완료되면 해당 홈페이지를 확인합니다.

<브라우저 실제화면>

 

 

2) 유형별&색상별 스킨찾기

레이아웃 와이드형을 선택하고 스킨컬러에서 녹색 동그라미를 클릭합니다.

선택이 완료되면 스킨 리스트에 와이트형이고 녹색색상을 가진 스킨이 나열됩니다.

Skin. 759 스킨을 클릭하여 녹색색상 스킨을 설치해 보겠습니다.

 

<스킨 관리 - 와이드형+녹색스킨을 보유한 스킨 화면>

Skin. 759도 5가지의 색상을 가지고 있습니다. 5가지중에 Skin. 759-95 녹색스킨을 설치합니다.

 

<Skin. 759의 색상리스트>

 

설치가 완료되면 아래의 이미지처럼 실제 브라우저에서 녹색스킨의 레이아웃이 자동생성 됩니다.

<브라우저 실제화면>

 

 

3) 스킨별 옵션 확인 및 변경

스킨별로 로고변경이나 일부 디자인 변경이 가능합니다.

현재 적용된 스킨의 하단에 스킨옵션설정을 클릭을 하셔서 스킨의 옵션을 변경하시면 됩니다. 

(각 스킨마다 변경되는 내용이 다를 수 있으니 참고하시기 바랍니다.)

 

 

 

현재 적용된 스킨은 상단 팝업이미지, 팝업이미지 링크값, 상단로고, 하단로고 이렇게 변경이 가능한 스킨이네요..

해당 스킨에서 로고부분을 변경을 한다면 우측에 상단로고부분에 로고이미지를 등록을 해주시면 됩니다. 

우측의 내역을 변경을 좌측의 동일한 번호에 기재된 내역이 변경이 되니 참고하시기 바랍니다.

<스킨 옵션 설정팝업창>

1) 스크린샷의 좌측은 옵션변경시 변경되는 부분을 나타내고 있습니다.

2) 옵션 리스트입니다. 1-상단 팝업 이미지는 스크린샷 좌측 상단에 빨간박스 1번을 가리키고 있습니다.

 

- 이미지를 등록하고 실제 브라우저 화면을 확인하시면 로고가 봐뀐것을 확인할 수 있습니다.

<로고가 변경된 브라우저 실제화면>

 

 

 

 

[스킨 소스수정모드]

스킨의 경우 로고 및 간단한 문구만 변경이 가능합니다. 

만약 스킨을 일부 수정을 해야될 필요가 있으면 스킨 수정모드로 가셔서 수정을 하시면 됩니다. 

스킨 소스 수정모든는 소스기반으로 제공이 되며, html파일 및 css 파일을 직업 수정을 해서 원하시는 형태의 디자인으로 만드시면 됩니다.

 

1. [소스 수정 모드]로 변경&수정

현재 적용되어있는 스킨 하단에 보면 [소스수정모드]로 전환버튼이 있습니다. 

이 버튼을 클릭하면 소스기반으로 스킨 수정이 가능하게 됩니다.

 

[소스 수정 모드]로 변환이 되면 아래와 같이 스킨 관리 팝업창이 전환됩니다.

스킨소스는 pc쪽 스킨과 모바일쪽 스킨을 수정을 할 수 있습니다. 

수정할 스킨항목을 선택을 해서 원하시는 위치에 소스기반으로 수정을 하시면 됩니다.

<[소스 수정 모드]로 변환된 스킨관리 팝업창 화면>

  

 

css나 js파일의 경우는 각 스킨우측상단에 css소스를 클릭하면 해당 페이지에 적용되어있는 css나 js파일을 확인하실 수 있습니다.

CSS소스 버튼을 클릭을 해서 css및 js파일을 수정하시기 바랍니다.

 

 

2. [스킨 선택 모드]로 변경

소스 수정모드로 작업을 하다가 잘못작업을 하여 이상하게 출력이 된다거나 더이상 소스수정방식이 불필요한 경우 

다시 스킨선택모드로 돌아갈 수 있습니다. 

[소스 수정 모드]에서 [스킨 선택 모드]로 변경하게 되면 기존의 소스수정드에서 작업한 내역은 모두 삭제처리가 되며 이전상태로 복구가 불가능하니

신중히 작업을 해주시기 바랍니다.

 

- 변경이 완료되면 아래의 이미지와 같이 기존의 스킨 선택모드로 돌아옵니다.

 

이상 스킨변경에 대해서 설명을 드렸습니다.

스킨이라면 디자인팜2.0에서 뼈대를 이루는 구조로서 클릭몇번만으로 홈페이지 스타일을 다르게 변경을 할 수 있는 장점이 있습니다. 

지속적인 스킨형태를 추가를 해서 보다 다양한 형태의 스킨을 선택가능하도록 노력하겠습니다.

 

감사합니다