마스터 페이지 가지고 놀기 ¶
사이트 상단에 배경 이미지가 있고, 이것이 각 섹션별로 디자인이 바뀐다고 해보자.
각 섹션별로 하위 메뉴가 있어 각각 마스터페이지를 지닌다고 하면,
최종적으로 중첩된 마스터페이지 형태의 디렉터리 구조가 될 것이다.
각 섹션별로 하위 메뉴가 있어 각각 마스터페이지를 지닌다고 하면,
최종적으로 중첩된 마스터페이지 형태의 디렉터리 구조가 될 것이다.
- Top.master
- Top.css
- Default.aspx
- Sub1/
- Sub1.master
- Sub1.css
- Sub1.aspx
- Sub1.master
- Sub2/
- Sub2.master
- SUb2.css
- Sub2.aspx
- Sub2.master
- Sub3/
- Sub3.master
- Sub3.css
- Sub3.aspx
- Sub3.master
그런데 이 이미지가 각 서브섹션별로 서로 다르다고 한다면, 이 이미지를 어떻게 변경하는 것이 좋을까?
우선 간단한 if문을 생각할 수 있다.
Top.master :
이 코드는 매우 단순하다. 각 섹션별로 CSS의 클래스를 다르게 준다. 각 CSS 클래스는 각각 다른 background-image 속성을 가진다. 이렇게 하면 각 페이지에서 배경을 다르게 줄 수 있다. 변수를 이용해도 좋을것이다.
하지만 이 코드는 매우 지저분하다. class를 변경하는 것은 코드비하인드에 위임할 수 있다. 그러나 각 섹션의 배경이미지를 지정하는 일은 각 서브 섹션의 마스터페이지 혹은 CSS에 위임하면 더 좋을 것이다.
<div class="header<%
if(link.IndexOf("/Sub1/")!=-1){
Response.Write("1");
}else if(link.IndexOf("/Sub2/")!=-1){
Response.Write("2");
}else if(link.IndexOf("/Sub3/")!=-1){
Response.Write("3");
}else{
Response.Write("0");
} %>">
하지만 이 코드는 매우 지저분하다. class를 변경하는 것은 코드비하인드에 위임할 수 있다. 그러나 각 섹션의 배경이미지를 지정하는 일은 각 서브 섹션의 마스터페이지 혹은 CSS에 위임하면 더 좋을 것이다.
Top.master :
<div id="header">
Top.css :
#header{background-repeat:no-repeat; width:1024px; height:150px;}
Sub1.css :
#header{background-image:url(../images/lifeStyle/lifestyle_header.jpg);}
header id를 갖는 요소에 대해서 각 하위 마스터페이지들은 자신만의 배경이미지를 지정한다.