'초보 레이아웃 스킨 고치기 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 를 모르면 배우셔야겠지요~?
알려드렸는데 좀 더 나아가서 레이아웃 파일을 한 번 건드려보겠습니다.
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 를 모르면 배우셔야겠지요~?