반응형
'ASP.NET & Core를 다루는 기술'이라는 책을 통해서 ASP.NET 공부를 하기 시작했다. 아직 많이 읽어보질 못해 평가하기는 좀 그렇지만 예제랑 설명이 적절하게 섞여서 나온 책인 것 같다. 위의 책을 바탕으로 공부한 내용을 글로 쓰려한다.
ASP.NET 템플릿
ASP.NET에서 특별히 사용하는 폴더
- App_Code : 웹 사이트에서 사용할 클래스 파일이 저장된다. 프로젝트 형식이 아닌 웹 사이트 형식으로 생성된 프로젝트에서만 사용된다.
- App_GlobalResources : 웹 사이트 전체에서 사용되는 리소스 파일이 저장된다.
- App_LocalResources : 웹 페이지 각각에서 사용되는 리소스 파일이 저장된다.
- App_Data : 데이터베이스 및 XML 같은 데이터 파일이 저장된다.
- App_Browsers : 각 브라우저와 관련된 정보를 저장한다. 현재는 거의 사용되지 않는다.
- 테마(Themes) : ASP.NET 서버 컨트롤에 대한 스타일을 정의하는 파일이 저장된다. 테마 폴더도 최근에는 부트스트랩 같은 UI 전용 라이브러리를 사용함에 따라서 거의 사용되지 않는다.
실습 ( 웹 폼 사용자 정의 컨트롤을 사용한 웹 사이트 뼈대 만들기 )
- 부분 페이지 : 웹 사이트에서 공통으로 사용하는 페이지 내용을 웹 폼 사용자 정의 컨트롤로 따로 구분 지어서 한 번에 여러 페이지에 적용시키는 개념이다.
Bootstrap 관련 리소스 추가
위의 경로에서 다음 캡쳐 화면처럼 명령어를 입력하고 엔터키를 누르면 된다.
위의 코드가 실행되면 프로젝트에 부트스트랩 관련 스타일시트, 스크립트, 이미지, 폰트 등이 추가된다.
실습에 필요한 웹 폼, 웹 폼 사용자 정의 컨트롤 만들기
다음과 같이 웹 폼 1개, 웹 폼 사용자 정의 컨트롤 4개를 만들어 준다.
NavigatorUserControl.ascx
웹 페이지의 상단 메뉴 영역을 담당할 부분 페이지다. 코드는 다음과 같이 입력한다.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CopyrightUserControl.ascx.cs" Inherits="ASP_Practice.Day0122.UserControlPractice.CopyrightUserControl" %>
<h3>네비게이터 들어오는 곳</h3>CategoryUserControl.ascx
웹 페이지의 왼쪽 메뉴 영역을 담당할 부분 페이지다. 코드는 다음과 같이 입력한다.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CategoryUserControl.ascx.cs" Inherits="ASP_Practice.Day0122.UserControlPractice.CategoryUserControl" %>
카테고리 들어오는 곳CatalogUserControl.ascx
웹 페이지의 내용 영역을 담당할 부분 페이지다. 코드는 다음과 같이 입력한다.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CatalogUserControl.ascx.cs" Inherits="ASP_Practice.Day0122.UserControlPractice.CatalogUserControl" %>
카탈로그(Content) 들어오는 곳CopyrightUserControl.ascx
웹 페이지의 하단 메뉴 영역을 담당할 부분 페이지다. 코드는 다음과 같이 입력한다.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CopyrightUserControl.ascx.cs" Inherits="ASP_Practice.Day0122.UserControlPractice.CopyrightUserControl" %>
<div class="text-center">
Copyright 들어오는 곳
</div>FrmUserControl.aspx
위의 네 개의 페이지를 조립해서 페이지 하나로 실행할 메인 페이지다. 코드는 다음과 같이 입력한다.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FrmUserControl.aspx.cs" Inherits="ASP_Practice.Day0122.UserControlPractice.FrmUserControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>웹 사이트 뼈대 만들기</title>
<link href="../../Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-md-12">
네비게이터 들어오는 곳
</div>
</div>
<div class="row" style="height:200px;">
<div class="col-md-3">
카테고리 들어오는 곳
</div>
<div class="col-md-9">
카탈로그(Content) 들어오는 곳
</div>
</div>
<div class="row">
<div class="col-md-12">
Copyright 들어오는 곳
</div>
</div>
</div>
</form>
</body>
</html>네 개의 웹 폼 사용자 정의 컨트롤 등록하기
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FrmUserControl.aspx.cs" Inherits="ASP_Practice.Day0122.UserControlPractice.FrmUserControl" %>
<!-- 네 개의 웹 폼 사용자 정의 컨트롤 등록 -->
<%@ Register Src="~/Day0122/UserControlPractice/NavigatorUserControl.ascx" TagPrefix="uc1" TagName="NavigatorUserControl" %>
<%@ Register Src="~/Day0122/UserControlPractice/CategoryUserControl.ascx" TagPrefix="uc2" TagName="CategoryUserControl" %>
<%@ Register Src="~/Day0122/UserControlPractice/CatalogUserControl.ascx" TagPrefix="uc3" TagName="CatalogUserControl" %>
<%@ Register Src="~/Day0122/UserControlPractice/CopyrightUserControl.ascx" TagPrefix="uc4" TagName="CopyrightUserControl" %>
<!DOCTYPE html>
... 생략 ...... 생략 ...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>웹 사이트 뼈대 만들기</title>
<link href="../../Content/bootstrap.css" rel="stylesheet" />
<style>
div {
border: 1px solid red;
padding: 10px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-md-12">
<uc1:NavigatorUserControl runat="server" ID="NavigatorUserControl" />
</div>
</div>
<div class="row" style="height:200px;">
<div class="col-md-3">
<uc2:CategoryUserControl runat="server" ID="CategoryUserControl" />
</div>
<div class="col-md-9">
<uc3:CatalogUserControl runat="server" ID="CatalogUserControl" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<uc4:CopyrightUserControl runat="server" ID="CopyrightUserControl" />
</div>
</div>
</div>
</form>
</body>
</html>
ASP.NET 마스터 페이지
마스터 페이지란?
마스터 페이지(Master Page)는 웹 폼 사용자 정의 컨트롤처럼 전체에 공통적으로 사용되는 뼈대를 구성할 때 사용한다. 즉, 마스터 페이지는 반복적으로 사용되는 UI에 대한 템플릿을 제공하는 형태다.
실습 ( 마스터 페이지를 사용한 웹 사이트 골격 구성 )
실습에 필요한 마스터 페이지, 스타일 시트 만들기
위와 같이 마스터 페이지 1개, 스타일 시트 1개를 만들었다.
Site.css
'Site.css' 파일에 코드를 다음과 같이 입력한다.
body {
padding-top: 50px;
padding-bottom: 20px;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ASP_Practice.Day0122.MasterPagePractice.Site" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="../../Content/bootstrap.css" rel="stylesheet" />
<link href="Site.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="navbar navbar-dark navbar-expand-lg">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">마스터 페이지</a>
</div>
<div class="navbar-collapse">
<ul class="nav nav-item">
<li><a runat="server" href="Default.aspx">홈</a></li>
<li><a runat="server" href="About.aspx">정보</a></li>
<li><a runat="server" href="Contact.aspx">연락처</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">등록</a></li>
<li><a runat="server" href="~/Account/Login">로그인</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - ASP.NET 웹 프로젝트</p>
</footer>
</div>
<script src="../../Scripts/jquery-3.0.0.js"></script>
<script src="../../Scripts/bootstrap.js"></script>
<asp:ContentPlaceHolder ID="FooterContent" runat="server"></asp:ContentPlaceHolder>
</form>
</body>
</html>- 책에서의 환경과 본인 컴퓨터의 환경이 다르기 때문에 js와 css를 불러올 때 경로를 잘 잡아줘야 한다.
- 책에서 사용한 부트스트랩 버전과 현재 최신버전 사이의 버전 차이가 나기 때문에 마스터 페이지에서 사용하는 class명이 부트스트랩에 없는 경우가 있다.
마스터 페이지가 있는 웹 폼 만들기
위의 마스터 페이지에서 만들어 놓은 목록창 코드다. 해당 코드의 파일들을 만들어 주고 마스터 페이지를 적용시킬 예정이다.
추가 -> 새 항목 버튼을 클릭하고 '마스터 페이지가 있는 웹 폼'으로 위의 이름들과 일치하게 만들어 준다.
Default.aspx
'홈'에 해당된 페이지다. 코드는 다음과 같이 입력한다.
... 생략 ...
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="jumbotron">
<h1>ASP.NET 마스터 페이지</h1>
<p>
마스터 페이지, 레이아웃 페이지 등의 표현 방법은
웹 사이트 공통 레이아웃을 정의하는 기능입니다.
</p>
</div>
</asp:Content>
... 생략 ...About.aspx
'정보'에 해당된 페이지다. 코드는 다음과 같이 입력한다.
... 생략 ...
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>정보 페이지</h2>
</asp:Content>
... 생략 ...Contact.aspx
'연락처'에 해당된 페이지다. 코드는 다음과 같이 입력한다.
... 생략 ...
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>연락처 페이지</h2>
</asp:Content>
... 생략 ...실행화면
반응형
