ASP.NET 2.0에는 MasterPage 지원이 내장되어 있어 우리에게 매우 편리합니다. 그러나 일정 기간 사용한 후에는 MasterPage가 그다지 완벽하지 않다는 것을 발견했습니다. 중첩된 MasterPage는 디자인 타임 인터페이스를 지원할 수 없으며 콘텐츠 페이지에 CSS를 추가하는 문제는 아래에 언급됩니다.
일반적으로 2.0 이전에는 페이지에 CSS 참조를 추가하는 구문은 다음과 같습니다.
<link rel="stylesheet" href="css/test.css" />
원래는 일반적인 관행이었습니다. 그러나 MasterPage의 하위 페이지에서 매우 당황스러운 상황이 발생합니다. 위의 코드를 어디에 넣어야 할까요?
MasterPage의 특정 콘텐츠 페이지에서는 각 <asp:Content /> 태그의 콘텐츠만 정의할 수 있기 때문입니다. 일반적인 관행에 따르면 aspx에서는 페이지의 <header/> 콘텐츠를 제어할 수 없습니다. 그리고 이 <link/> 태그는 <header/> 내에 배치되어야 합니다. <asp:Content /> 내에 이 코드 줄을 추가하려고 시도했지만 오류 메시지가 표시됩니다.
동시에 향후 CSS 참조 코드를 위해 MasterPage의 <header/> 내부에 ContentPlaceHolder를 배치할 수 없습니다.
그래서 제가 한 일은 다음과 같이 도우미 클래스를 정의하는 것이었습니다:
static public class ControlHelper
{
정적 공개 무효 AddStyleSheet(페이지 페이지, 문자열 cssPath)
{
HtmlLink 링크 = 새로운 HtmlLink();
link.Href = cssPath;
link.Attributes["rel"] = "스타일시트";
link.Attributes["type"] = "텍스트/css";
page.Header.Controls.Add(링크);
}
}
이런 방식으로 특정 페이지에서 다음 코드를 통해 CSS 참조를 추가할 수 있습니다:
protected void Page_Load(object sender, EventArgs e)
{
ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");
}
또한 이 코드는 특정 콘텐츠 페이지 또는 중첩된 마스터 페이지에서의 사용을 지원합니다.
이쯤 되면 CSS를 왜 이렇게 분리해서 불러와야 하는 건지 궁금해하시는 분들도 계실 겁니다. 꼭 필요한가? 모든 페이지의 CSS를 몇 가지 공통 CSS 파일로 정의하면 좋지 않을까요?
실제로 웹 표준 HTML 제작에 익숙한 친구들이라면 비교적 완벽한 상태에서 페이지의 HTML과 프리젠테이션에 사용되는 CSS가 완전히 분리되어야 한다는 것을 알고 있을 것입니다. 웹 표준을 기반으로 한 디자인을 위해서는 일반적으로 마스터 페이지의 각 프레임 div에 대한 위치 지정 코드와 머리글 및 바닥글 부분에 대한 수정 코드를 먼저 만듭니다. 이는 모든 콘텐츠 페이지에서 사용되며 통합 CSS에 배치됩니다. 다른 특정 콘텐츠 페이지의 경우 각 페이지마다 고유한 콘텐츠 레이아웃과 수정 스타일이 있으므로 각 특정 페이지의 특정 부분을 자체 CSS에 넣습니다. 이는 마스터 페이지의 구현 수준(중첩 가능)에 따라 레이어별로 병합되는 CSS 모델을 형성합니다. 장점은 각 CSS 파일의 책임 분리를 실현하여 이해하고 유지 관리하기가 더 쉽다는 것입니다.
오랫동안 ASP.NET 2.0을 접해보지 않았기 때문에 위의 내용은 약간의 개인적인 경험일 뿐입니다. 좀 더 편리한 해결 방법이 있으면 조언 부탁드립니다.
http://rchen.cnblogs.com/archive/2006/05/23/masterpage_with_css.html