CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

Contents Management System

'초보 레이아웃 스킨 고치기 1 - CSS 편'에서는 CSS 파일을 이용하여 간단히 위치며 스타일, 감추기 등을
알려드렸는데 좀 더 나아가서 레이아웃 파일을 한 번 건드려보겠습니다.

zb4 마이그레이션 작업 후에 디자인 작업을 하려고 했더니 카테고리 하나씩 글을 옮겨와야되고 DQ갤러리 스킨에서의
마이그레이션 작업이 도저히 엄두가 나지 않아서 나중에 제로님 다음 주 휴가 끝나고 오시면 뭔가 방법을 내놓으실 것 같다는
기대만을 안고 우선 레이아웃부터 손봅니다.

설명 번호는 이전글에 이어서  나가겠습니다.


7. 레이아웃 수정하기

7-1. 똑띠님의 레이아웃 만들기 메뉴얼

우선 똑띠님의 글을 먼저 읽고 7-2 번을 읽을 때 참조하세요.
http://zbxe.springnote.com/pages/396868

아래 제 설명을 보충하는 것인데, 7-1을 먼저 읽고 왜 제가 아래와 같이 했는 것인지 이해가 갈 겁니다.

7-2 레이아웃 편집은 관리자화면에서

레이아웃은 CSS 파일과는 달리 에디터로 수정 후 FTP로 업로드하면 안됩니다. 이미 수정을 한 번 했다면 말이죠.
(이에 대한 설명은 7-1에서..)
초반 레이아웃 모듈 만들 때야 이미 만들어놓고 모듈을 만들면 수정한 레이아웃이 모듈이 되버리는 것인데
이미 레이아웃 모듈까지 만든 상태라면 관리자 화면에서 수정작업을 해야합니다.

레이아웃 디렉토리가
/home/xynex/public_html/zbxe/layouts/xe_official/
여기라고 해서
이 아래있는 layouts.html 파일을 수정해서는 이미 만들어진 모듈을 사용하고 있는 레이아웃에서는
수정한 작업이 나타나지 않는다는 말입니다.

그러므로 이미 만들어진 모듈은 에디터로 다시 수정하는 것이 아니라
관리 > 레이아웃 > 레이아웃 편집 에서 해야합니다.

물론, 모듈이 만들어지기 전의 레이아웃은 아는 방법대로 에디터로 수정 후 업로드하면 됩니다.
그럼 본격적으로 설명 들어갑니다.

이전 설명 보면 아시다시피 내용은 별 것 아니지만 조금이나마 삽질을 줄이고 아직 메뉴얼이 완성되지 않았기 때문에
메뉴얼이 완성되기 전까지는 이렇게나마 사용자끼리 정보를 주고 받았으면 좋겠네요.



8. 메뉴 보여지는 형식 수정하기
메뉴는 이미지, url 등으로 표시할 수 있습니다.

아래 링크는 '메뉴 관리에서 이미지 버튼은 어떻게 삽입하나요? ' 라는 게시물입니다.
http://www.zeroboard.com/3999303

관리자화면 메뉴 모듈을 통해서도 메뉴를 단순히 텍스트 뿐만 아니라 이미지로도 표시할 수 있다는 것을 알 겁니다.

윗글 코멘트에서 제로님이 메뉴를 이미지버튼으로 대체하여 쓸 수 있는 방법에 대해서 적어놨는데
레이아웃 제작 입장에서 어떻게 해야지 그 것이 적용되는지에 대해서는 자세히 알려주지 않아서 저도 모르겠습니다만
아래의 위치에서 명령어를 달리 넣으면 될 것 같기에 우선 참고식으로 적어놓겠습니다.

위에서 말했다시피 관리 > 레이아웃 모듈 > 레이아웃 편집 메뉴로 들어갑니다.

#GNB 클래스를 찾습니다. Ctrl + F 눌러서 #gnb 로 검색하면 됩니다.
참고로, 이 레이아웃 편집에서는 한 번 수정하면 띄어쓰기가 다 무시되어버리더군요..난감하게시리

    <!--GNB-->
<ul id="gnb">
            <!-- main_menu 1차 시작 -->
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
                <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                <!--@end-->

               <li<!--@if($val['selected'])-->class="on"<!--@end-->><ahref="{$val['href']}"<!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);returnfalse;"<!--@end-->>{$val['text']}</a></li>

            <!--@end--><!--@end-->
            <!-- main_menu 1차 끝 -->
        </ul>
        <!--//GNB-->

여기서 볼드체로 처리한 부분이 메뉴를 나타내는 형식입니다.
img_btn, image, images 해봐도 별 다른 변화가 없는 것 보면 img..로는 이미지버튼이 안되는가봅니다.

해본 것이 url, href 인데 이렇게 하면 http://..로 시작되는 텍스트가 메뉴명으로 들어갑니다.

이거 뭘 넣어야지 이미지버튼이 되는 건지 아는 분은 좀 알려주세요.


9. 이미지 추가하기
어떤 레이어에 배경을 추가한다는 것은 css 파일에서 수정이 가능하지만,
레이아웃에 <img src 태그를 이용하여 이미지를 추가하기 위해서는 레이아웃 파일(레이아웃 편집)을 수정해야합니다.

그냥 http:// 로 시작하는 url 을 img src=" ..에 넣으면 안됩니다.

만약 img src="http://.. " 이렇게 넣었다 해도 보여지는 이미지의 주소는

img src="/files/attach/images/35001/530/050/6b81bed572a35b6f618ba30f76ad3625.gif"

이런 식으로 http://eond.com/zbxe/layouts/xeoffcial/ 이 뒤에 또 http:// 로 시작하는 아까 입력한 주소가 놓여지게 되는 것입니다.

[부가설명]
http://eond.com 도메인주소
/zbxe zbxe가 설치된 주소
/layouts/xeoffcial 레이아웃 폴더


그렇기 때문에 이미지를 넣을 때는 꼭! 레이아웃 폴더에 넣은 후에 링크를 해야합니다.

여기서 주의할 것이 있는데 FTP를 이용하여 이미지를 업로드할 때는 layouts/xeofficial 폴더에 넣으면 안됩니다.

아래 예제를 통하여 업로드 위치를 알려드리겠습니다.

올바른 링크 방법은 아래와 같습니다.

<img src="./images/{$layout_info->colorset}/title_tintedpixel_h.gif" style="margin-right:10;" align=absbottom>

{$layout_info->colorset} 는 무엇이냐하면 바로 업로드 위치입니다.

/home/xynex/public_html/zbxe/layouts/xeoffcial/images/eond_rosso/title_tintedpixel_h.gif

[부가설명]
/home/xynex/public_html 가 http://eond.com
/zbxe/layouts/xeoffcial 레이아웃 폴더
/images/eond_rosso 가 바로 {$layout_info->colorset} 컬러셋 폴더
/title_tintedpixel_h.gif 가 업로드하는 이미지 파일입니다.

바로 비교해서 본다면 아래와 같습니다.

/home/xynex/public_html/zbxe/layouts/xeoffcial/images/eond_rosso/title_tintedpixel_h.gif <-- 실제주소
http://eond.com/zbxe/layouts/xeoffcial/title_tintedpixel_h.gif <-- 웹에서 보여지는 주소

/images/eond_rosso 는 {$layout_info->colorset} 이므로 실제 웹에서는 표시되지 않습니다.


글로 써서 복잡한데 실제로 해보시면 별 것 아닙니다.

자, 그럼 차차 삽질하다가 도움될 내용이 있으면 정리되면 다시 추가해서 올리겠습니다.
별 내용이 없긴 하네요. 그 외에는 css와 html 수정만 할 줄 알면 되는 것이니 여기서 이만 줄입니다.


덤으로,

10. 또다른 레이아웃 편집에 대한 메뉴얼입니다.

우선 블로그 레이아웃 편집에 대해서 설명해놓은 페이지입니다.
http://zbxe.springnote.com/pages/400507

도저히 도움이 되질 않는군요. 단순히 보면 알 수 있는 내용을 메뉴얼의 전부라고 적어놓으셨는데
메뉴얼 실명제라도 도입되었으면 좋겠습니다.

아래의 메뉴얼이 완성되어지길 기대하면서도 위와 같이 저런 식의 메뉴얼 완성이라면 실망이네요.

그리고 본격적인 레이아웃 편집 메뉴얼인데 어서 완성되기를 바랍니다.
http://zbxe.springnote.com/pages/392293




자............
그래서 고친 것이
http://eond.com/zbxe/
지금 보고 있는 nzeo.com 의 레이아웃이 저렇게 바뀌었답니다.
기본레이아웃에 css로 간 보고 layouts.html 파일 살짝 <h2></h2><h3></h3> 정도 밖에 추가하지 않았는데 말이죠!
저 정도면 css 를 모르면 배우셔야겠지요~?

추천한 사람

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기