중요) 기본 명칭 및 사용법 알아 보기

이전 단계 설명에서는 메인 및 서브페이지에서 구성된 각각의 모듈 위치에 대해서 알아 보았습니다.

이번에는 모듈 적용을 위한 html 적용 방법에 대해서 알아 보도록 하겠습니다.

 

 

 

 

기본적인 html 작성 방법

홈페이지 수정은 일반적으로 html 을 이용하여 수정을 하게 됩니다.

간단한 사용방법을 익히셔야 홈페이지를 내 마음대로 수정할 수 있습니다.

html 수정에 있어서, 다양한 솔루션 별로 약간씩 차이가 있지만, 근본적인 수정 방법은 동일합니다.

 

 

각각의 html 페이지를 수정하기 위한 화면이며, 3개의 분할 화면으로 구성되어 있습니다.

페이지 (디렉토리)

html 소스 (에디터)

모듈정보 (모듈)

 

- 페이지 (디렉토리) : 내컴퓨터의 탐색기(C드라이브) 구조와 비슷하다고 생각하시면 됩니다.

- html 소스 (에디터) : 메모장, 한글, 워드와 비슷하다고 생각하시면 됩니다.

- 모듈정보 (모듈) : 저장된 모듈을 찾아 옵니다. (탐색기와 비슷하다고 생각하시면 됩니다.)

 

 

모듈이란?

html 의 압축 소스라고 생각하시면 됩니다.

소스코드가 복잡하고 양이 많을 때 하나의 모듈(변수)로 만들어서 사용 하시면 됩니다.

(모듈과 변수의 의미는 사전적으로는 다를 수 있지만... 같은 의미의 설명으로 이해 하시고 사용하시면 됩니다.)

 

 

■  기본적인 수정 순서는 아래와 같습니다.

1. 수정하고자 하는 페이지를 오픈 합니다.

2. html 소스를 작성/수정 합니다.

3. 필요한 모듈을 우측의 모듈정보에서 불러와서 적용합니다.

 

 

■  참고

수정된 디자인페이지를 보시려면...

"html소스(에디터)" 란에서

위쪽에 보시면 "링크주소 : {{$template}}/mp1/mp1_s1.php" 를 클릭 해서 확인할 수 있습니다.

 

 

 

 

 

 

 

모듈 적용 방법 살펴보기

모듈 리스트 팝업 예시

 

우측에 버튼 "전체모듈리스트"를 클릭하면,

"모듈 리스트" 새창이 열립니다.

여기에서 사용하고자 하는 모듈을 추가하시면 됩니다.

모듈이 추가되면 우측 화면에서 해당 모듈이 표시 됩니다.

 

 

 

모듈(변수)을 html에서 적용하기 위해서는

화면 우측에서 보이듯이 "모듈정보"란에 해당 모듈(변수)이 추가 되어 있어야 합니다.

반대로 이야기 하면...

html 소스를 입력 하셨더라도, 모듈정보란에 모듈이 없으면.

해당 소스는 적용되지 않습니다.

 

 

 

■  사용되는 모듈의 종류

{{$head}}

{{$ms01}}

{{$de01}}

{{$cafe_board_1}}

{{$cafe_formmail_1}}

{{$template}}

.

.

.

등

 

 

 

 

■ 참고

모듈 사용을 위한 html 작성시 모듈을 감싸고 있는 소스도 함께 작성해 주세요.

 

- 예시1

{{$de01}}

 

- 예시1
<div class="de_module">
    {{$de01}}
</div>

 

 

위 예시 처럼

디자인모듈01번을 사용할 때에는...

예시1번 처럼 {{$de01}} 만 작성 하셔도 되지만,

예시2번 처럼 해당 모듈을 감싸고 있는 소스까지 함께 작성해 주시면 해당 모듈을 더욱 더 편리하게 관리할 수 있습니다.

 

 

 

 

 

 

 

각각의 모듈 종류의 사용 예제

디자인과 적용에 있어서, 사용 용도에 따른 모듈의 적용 방법 입니다.

 

 

<!-- 디자인모듈 -->

<div class="de_module">
    {{$de20}}

</div>

 

 

 

<!-- 게시판모듈_텍스트형 -->
<div class="n_board_txt">
    {{$cafe_board_1}}
</div>

 

 

 

<!-- 게시판모듈_갤러리형 -->
<div class="n_board_gallery">

    {{$cafe_board_11}}
</div>

 

 

 

<!-- 게시판모듈_웹진형 -->
<div class="n_board_webzine">
    {{$cafe_board_21}}
</div>

 

 

 

<!-- 폼메일모듈 -->
<div class="np_form">
    {{$cafe_formmail_1}}
</div>

 

 

등...