MVC 레이아웃
ASP.NET MVC - 스타일링 및 레이아웃
ASP.NET MVC를 배우기 위해 인터넷 애플리케이션을 구축하겠습니다.
3부: 스타일 및 통일된 모양 추가(레이아웃)
레이아웃 추가
_Layout.cshtml 파일은 애플리케이션의 각 페이지 레이아웃을 나타냅니다. Views 폴더 내의 Shared 폴더에 있습니다.
_Layout.cshtml 파일을 열고 내용을 다음으로 바꿉니다:
<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>Copyright W3CSchool 2012. All Rights Reserved.</ p>
</section>
</body>
</html>
HTML Helper
위 코드에서 HTML 도우미는 HTML 출력을 수정하는 데 사용됩니다.
@Url.Content() - URL 콘텐츠가 여기에 삽입됩니다.
@Html.ActionLink() - HTML 링크가 여기에 삽입됩니다.
이 튜토리얼의 후반부에서 HTML 도우미에 대해 자세히 알아볼 것입니다.
Razor 구문
위 코드에서 빨간색으로 표시된 코드는 Razor 마크업을 사용하는 C#입니다.
@ViewBag.Title - 페이지 제목이 여기에 삽입됩니다.
@RenderBody() - 페이지 콘텐츠가 여기에서 렌더링됩니다.
Razor 튜토리얼에서 C# 및 VB(Visual Basic)용 Razor 마크업에 대해 알아볼 수 있습니다.
스타일 추가
응용 프로그램의 스타일시트는 Content 폴더에 있는 Site.css입니다.
Site.css 파일을 열고 내용을 다음으로 바꿉니다:
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
색상: #696969;
}
h1
{
border-bottom: 3px 단색 #cc9900;
글꼴: 조지아, 세리프;
색상: #996600;
}
#main
{
패딩: 20px;
배경색: #ffffff;
테두리 반경: 0 4px 4px 4px;
}
a
{
color: #034af3
}
/* 메뉴 스타일 ----------------------*/
ul#menu
{
padding: 0px;
position: 상대;
margin : 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
배경색: #e8eef4;
padding: 10px 20px;
텍스트 장식: 없음;
줄 높이: 2.8em;
/*CSS3 속성*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
Background-color: #ffffff;
}
/* 양식 스타일 ----------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit "]
{
padding: 4px;
}
/* 데이터 스타일 ----------------------*/
table.data
{
Background-color:#ffffff;
테두리:1px 단색 #c3c3c3;
border-collapse:collapse;
너비:100%;
}
table.data th
{
배경색:#e8eef4;
테두리:1px 단색 #c3c3c3;
패딩:3px ;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
_ViewStart 파일
Shared 폴더(Views 폴더에 있음)의 _ViewStart 파일에는 다음이 포함됩니다. 다음 내용:
이 코드는 애플리케이션에서 표시하는 모든 보기에 자동으로 추가됩니다.
이 파일을 삭제하는 경우 모든 보기에 이 코드 줄을 추가해야 합니다.
이 튜토리얼의 후반부에서 뷰에 대해 더 자세히 배울 것입니다.
