묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
위치한 페이지에 따라 top의 배경 그림을 바꾸려면
2011.08.31 11:42
안녕하세요. XE로 페이지를 구축하다가 궁금한 점이라 질문 드립니다.
예를 들어 사이트의 전체적인 메뉴 구성이 다음과 같다면...
대문
ㄴ사이트소개 (어드민에서 page로 구성)
ㄴ서비스소개 (어드민에서 page로 구성)
ㄴ구인contact (어드민에서 page로 구성)
ㄴ자유게시판 (게시판ex로 구성)
ㄴ링크및사이트맵 (어드민에서 page로 구성)
모든 페이지들에서 위쪽(top)과 옆쪽(side)메뉴와 아래쪽(footer) 내용들은 같은 내용으로 layout을 사용하게될 것입니다.
그 구성이 대략 아래와 같다면...
[ top ]
[main] [side]
[ footer ]
이중에 top, side, footer는 layout.html 파일에 박힌 (템플릿 구문으로 짜여진) 고정 소스이고,
main이 content여서 내용이 바뀌는 구조일 것입니다.
이 상황에서 질문이 있는데...
Q1. 메뉴상의 어느 위치 페이지인지에 따라 top의 배경 그림을 바꾸고 싶다면... 해결하는 방법이 무엇일까요?
아는대로 몇가지 떠오르는 방법은,
1. 레이아웃을 다 따로 둔다. -> 관리가 귀찮아서 꺼려집니다.
2. 자바스크립트로 background를 바꿔치기한다. -> 스크립트를 쓰는게 좀 꺼려집니다. 불가피하다면 최후의 방법.
3. layout.html 템플릿 구문에서 condition 분기를 한다. -> 어느 위치에 어떤 구문과 변수를 쓰는지 잘 모름.
4. ... (다른 더 좋은 바람직한 방법이 있으면 좀 알려주세요.)
그래서 여기서 두가지 질문이 더 있습니다.
Q2. 자바스크립트로 바꿔치기 한다면, 현재 방문자가 위치한 페이지가 어디인지 체크하기 위한 조건을 어떻게 알아내는 것이 가장 바람직할런지요?
그리고, 해당 자바스크립트를 삽입하기 가장 바람직한 위치는 어디인지요?
Q3. 잘은 모르지만 layout.html 템플릿 구문을 보아하니 태그에 cond로 조건분기를 하던데,
top의 div를 만들면서 cond를 걸어서 background를 지정할 수도 있을 것 같습니다.
어떤 템플릿 변수를 조건으로 걸어서 어떻게 구현해야 할런지요;;;;
고수 분들의 지혜를 나눠주세요. 굽신굽신.
읽어주셔서 감사합니다.
[답] : 아래 송동우님 답을 읽고, 다른 답도 보고, 템플릿 문법 공부하여 낸 답입니다.
<div style="background:#00f;"|cond="$mid=='welcome'"
style="background:url(../images/bg_about.gif);"|cond="$mid=='about'"
style="background:url(../images/bg_service.gif);"|cond="$mid=='service'"
style="background:#0f0;"|cond="$mid=='bbs'"
style="background:#aaa;"|cond="$mid!='bbs'">
배경을 갈아치우고 싶은 블록에 대해 이런식으로 작성하면 각 조건에 맞는 배경색 또는 배경 이미지가 탑재됩니다.
마지막 행은 무엇도 아닌 경우 기본 탑재되는 배경입니다.
예를 들어 사이트의 전체적인 메뉴 구성이 다음과 같다면...
대문
ㄴ사이트소개 (어드민에서 page로 구성)
ㄴ서비스소개 (어드민에서 page로 구성)
ㄴ구인contact (어드민에서 page로 구성)
ㄴ자유게시판 (게시판ex로 구성)
ㄴ링크및사이트맵 (어드민에서 page로 구성)
모든 페이지들에서 위쪽(top)과 옆쪽(side)메뉴와 아래쪽(footer) 내용들은 같은 내용으로 layout을 사용하게될 것입니다.
그 구성이 대략 아래와 같다면...
[ top ]
[main] [side]
[ footer ]
이중에 top, side, footer는 layout.html 파일에 박힌 (템플릿 구문으로 짜여진) 고정 소스이고,
main이 content여서 내용이 바뀌는 구조일 것입니다.
이 상황에서 질문이 있는데...
Q1. 메뉴상의 어느 위치 페이지인지에 따라 top의 배경 그림을 바꾸고 싶다면... 해결하는 방법이 무엇일까요?
아는대로 몇가지 떠오르는 방법은,
1. 레이아웃을 다 따로 둔다. -> 관리가 귀찮아서 꺼려집니다.
2. 자바스크립트로 background를 바꿔치기한다. -> 스크립트를 쓰는게 좀 꺼려집니다. 불가피하다면 최후의 방법.
3. layout.html 템플릿 구문에서 condition 분기를 한다. -> 어느 위치에 어떤 구문과 변수를 쓰는지 잘 모름.
4. ... (다른 더 좋은 바람직한 방법이 있으면 좀 알려주세요.)
그래서 여기서 두가지 질문이 더 있습니다.
Q2. 자바스크립트로 바꿔치기 한다면, 현재 방문자가 위치한 페이지가 어디인지 체크하기 위한 조건을 어떻게 알아내는 것이 가장 바람직할런지요?
그리고, 해당 자바스크립트를 삽입하기 가장 바람직한 위치는 어디인지요?
Q3. 잘은 모르지만 layout.html 템플릿 구문을 보아하니 태그에 cond로 조건분기를 하던데,
top의 div를 만들면서 cond를 걸어서 background를 지정할 수도 있을 것 같습니다.
어떤 템플릿 변수를 조건으로 걸어서 어떻게 구현해야 할런지요;;;;
고수 분들의 지혜를 나눠주세요. 굽신굽신.
읽어주셔서 감사합니다.
[답] : 아래 송동우님 답을 읽고, 다른 답도 보고, 템플릿 문법 공부하여 낸 답입니다.
<div style="background:#00f;"|cond="$mid=='welcome'"
style="background:url(../images/bg_about.gif);"|cond="$mid=='about'"
style="background:url(../images/bg_service.gif);"|cond="$mid=='service'"
style="background:#0f0;"|cond="$mid=='bbs'"
style="background:#aaa;"|cond="$mid!='bbs'">
배경을 갈아치우고 싶은 블록에 대해 이런식으로 작성하면 각 조건에 맞는 배경색 또는 배경 이미지가 탑재됩니다.
마지막 행은 무엇도 아닌 경우 기본 탑재되는 배경입니다.
태그 연관 글
- [2014/04/07] 묻고답하기 html 백그라운드 이미지 적용되지 않네요?? *2
- [2014/03/31] 묻고답하기 브라우저에 따라 이미지 깨지는 증상 *1
- [2011/05/17] 웹마스터 팁 XE core 1.4.5.7 코드 오류,(상자 위젯 배경 안될때) *2
- [2011/03/18] 묻고답하기 BGM플레이어 중복 현상 *1
- [2008/04/08] 웹마스터 팁 레이아웃수정시 참고할 zbXe레이아웃스킨의 css와 layout 상관관계(1.0.0 기본스킨) *21
원하는 이미지를 준비해서 원하는 곳에 업로드 시켜놓고
top 부분은 아마
<div class="header"> 일겁니다.
이것이 시작되기 전에 $mid로 구분해서
변수에 이미지 링크를 넣고
top 부분에 백그라운드로 적용시키면 될 것 같습니다.