이 섹션에서는 ASP.NET MVC 응용 프로그램의 각 페이지 레이아웃과 스타일 설정 방법을 소개합니다.
ASP.NET MVC를 배우기 위해 인터넷 애플리케이션을 구축해 보겠습니다.
3부: 스타일과 통일된 모양(레이아웃)을 추가합니다.
_Layout.cshtml 파일은 애플리케이션의 각 페이지 레이아웃을 나타냅니다. Views 폴더의 Shared 폴더에 있습니다.
_Layout.cshtml 파일을 열고 내용을 다음으로 바꿉니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title </title> <link href="@Url.Content("~/Content/Site.css") " rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js") "></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js") "></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("홈", "색인", "홈") </li> <li>@Html.ActionLink("영화", "색인", "영화") </li> <li>@Html.ActionLink("정보", "정보", "홈") </li> </ul> <section id="main"> @RenderBody() <p>저작권 W3Cchool 2012. 모든 권리 보유.</p> </section> </body> </html>위 코드에서 HTML 도우미는 HTML 출력을 수정하는 데 사용됩니다.
@Url.Content() - URL 콘텐츠가 여기에 삽입됩니다.
@Html.ActionLink() - HTML 링크가 여기에 삽입됩니다.
이 튜토리얼의 후반부 장에서 HTML 도우미에 대해 자세히 배우게 됩니다.
위 코드에서 빨간색으로 표시된 코드는 Razor 태그를 사용한 C#입니다.
@ViewBag.Title - 페이지 제목이 여기에 삽입됩니다.
@RenderBody() - 페이지 콘텐츠가 여기에서 렌더링됩니다.
Razor 자습서에서 C# 및 VB(Visual Basic)용 Razor 마크업에 대해 알아볼 수 있습니다.
애플리케이션의 스타일시트는 Content 폴더에 있는 Site.css입니다.
Site.css 파일을 열고 내용을 다음으로 바꿉니다.
body { 글꼴: "Trebuchet MS", Verdana, sans-serif; 색상: #696969; } h1 { 테두리 하단: 3px solid #cc9900; 글꼴: Georgia, serif; } #main { 패딩: 20px; 배경색: #ffffff; 4px 4px 4px; } a { color: #034af3 } /* 메뉴 스타일 --------------------------------- -*/ ul #menu { 패딩: 0px; 위치: 상대; 여백: 0; } ul#menu li { 디스플레이: 인라인; } ul#menu li a { 배경색: #e8eef4; 텍스트 장식: 없음; 줄 높이: 2.8em; /*CSS3 속성*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff } /* ----------------*/ fieldset { padding-left: 12px } fieldset label { 디스플레이: 블록: 4px; ; input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px } /* 데이터 스타일 --------- ------*/ table.data { 배경색:#ffffff; 테두리:1px 솔리드 #c3c3c3; 테두리 축소:폭:100 %; } table.data th { 배경색:#e8eef4; 테두리:1px 솔리드 #c3c3c3; 패딩:3px; } table.data td { 테두리:1px 솔리드 #c3c3c3;공유 폴더(Views 폴더 내에 있음)의 _ViewStart 파일에는 다음 내용이 포함되어 있습니다.
@{Layout = "~/Views/Shared/_Layout.cshtml";}이 코드는 애플리케이션이 표시하는 모든 보기에 자동으로 추가됩니다.
이 파일을 삭제하는 경우 모든 보기에 이 코드 줄을 추가해야 합니다.
이 튜토리얼의 후반부 장에서 뷰에 대해 자세히 알아봅니다.
ViewStart 보기는 일반적으로 보기 보기 바로 아래에 존재합니다. 물론, 다른 폴더 아래에 ViewStart 보기 페이지가 있을 수도 있습니다(이 폴더가 Views 폴더 아래에 있는 경우).