logo
border border
              
border border
border border
  Post Subject :: #81. VS 2008을 이용한 블로그 프로그래밍 - Part2     [ASP.NET]
border border
border border
     
이 포스트는 월간 마이크로소프트웨어에 기고한 원고를 재편집한 포스트입니다. 그러므로, 본의 아니게 반말로 진행되고 있습니다. 원래 싸가지가 없어서 그런 것이 아니니 무한 용서를... ^^;;
또한, .NET Framework 3.5 SP1이 적용되기 이전의 소스이므로, 현재의 개발 환경과 다를 수 있습니다. 마소에 제출한 블로그 소스는 블로그 소스 다운로드에서 다운로드하실 수있습니다.

블로그 웹 사이트 구성

블로그에 적용할 디자인을 선택하였으므로, 이제부터 실제적으로 블로그를 만들어 보도록 하겠다. Visual Studio 2008을 실행시킨 후, 새 웹사이트 생성 메뉴를 이용하여 <화면 3>과 같이 “BlogProgramming"라는 이름의 새로운 웹 사이트를 만든다.


<화면 3> 새로운 웹 사이트의 생성

새로운 웹 사이트를 생성하였으면, 블로그에 사용할 스타일시트 파일 및 이미지 파일을 웹 사이트로 추가하여야 한다. 우선, "Img"라는 이름의 폴더를 새로 웹 사이트에 추가 후, 웹 사이트 이름에서 우측 마우스를 클릭하여 "기존 항목 추가(Add Existing Item...)" 메뉴를 선택하여, 이전에 다운로드 받은 블로그 디자인에 사용되는 Shades of Gray 폴더의 Img 폴더 아래에 위치한 이미지 파일들을 웹 사이트로 추가한다. 또한, 같은 방법으로 Shades of Gray 폴더의 default.css 스타일시트 파일을 웹 사이트로 추가한다. 그 후 default.css 스타일 시트 파일명을 “BlogStyleSheet.css”로 변경한다. <화면 4>는 현재까지 작업한 “BlogProgramming" 웹 사이트의 구조이다.


<화면 4> “BlogProgramming" 웹 사이트의 구조

<그림 1>에서 설명한 것과 같이 필자가 만드려고 하는 블로그는 4단 분류를 채택하고 있다. 이 중, <그림 2>와 같이 ① 상단 메뉴 영역, ② 우측 메뉴 영역, 그리고 ④ 하단 컨텐츠 영역은 모든 페이지에 공통적으로 적용되는 부분이므로, 마스터 페이지(MasterPage)를 이용하는 것이 블로그를 만드는데에 있어 효과적이라고 할 수 있겠다. 웹 사이트 이름에서 우측 마우스를 클릭하여 “새 항목 추가(Add New Item...)" 메뉴를 선택하여, 블로그에서 사용할 ”BlogMasterPage.master“라는 이름의 마스터 페이지를 생성하도록 한다.


<그림 2> 마스터 페이지의 적용 영역

생성된 ”BlogMasterPage.master“ 마스터 페이지에 블로그 디자인에 사용되는 Shades of Gray 폴더에 포함되어 있는 Index.html 파일의 소스 중 필요한 부분을 복사하도록 한다. <리스트 1>은 ”BlogMasterPage.master“ 마스터 페이지의 전체 소스이다.

<%@ Master Language="C#" AutoEventWireup="true" 
CodeFile="BlogMasterPage.master.cs" Inherits="BlogMasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="BlogStyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body style="margin: 0 12%">
    <form id="form1" runat="server">
    <div class="container">
        <div class="header">
            <a href="Default.aspx"><span>Neostyx's Blog</span></a>
        </div>
        <div class="stripes"><span></span></div>
        <div class="nav">
            <a href="Default.aspx">HOME</a>
            <a href="About.aspx">ABOUT</a>
            <a href="Tag.aspx">TAG</a>
            <a href="Rss.aspx">RSS</a>
            <a href="Search.aspx">SEARCH</a>
            <a href="GuestBook.aspx">GUESTBOOK</a>
            <a href="Login.aspx">LOGIN</a>
            <a href="Admin.aspx">ADMIN</a>
            <div class="clearer"><span></span></div>
        </div>
        <div class="stripes"><span></span></div>
        <div class="main">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <div class="right">
                <div class="subnav">
                    <h1>Notices</h1>
                    <ul>
                        <li><a href="#">공지</a></li>
                    </ul>
                    <h1>Categories</h1>
                    <ul>
                        <li><a href="#">카테고리</a></li>
                    </ul>
                    <h1>Archives</h1>
                    <ul>
                        <li><a href="#">2008-02</a></li>
                    </ul>
                    <h1>Licently Posts</h1>
                    <ul>
                        <li><a href="#">최근포스트</a></li>
                    </ul>
                    <h1>Licently Comments</h1>
                    <ul>
                        <li><a href="#">최근댓글</a></li>
                    </ul>
                    <h1>Favorite Links</h1>
                    <ul>
                        <li><a href="#">즐겨찾기</a></li>
                    </ul>
                </div>
            </div>
        <div class="clearer"><span></span></div>
        </div>
        <div class="footer">
            <div class="bottom">
                <span class="left">&copy; 2008 <a href
                 ="http://www.neostyx.net">Neostyx.net</a>.</span>
               <span class="right">Template design by 
                    <a href="http://templates.arcsin.se">Arcsin</a></span>
                <div class="clearer"><span></span></div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

<리스트 1> BlogMasterPage.master 마스터 페이지의 소스

블로그 디자인의 수정을 위해, 앞에서 생성한 “BlogStyleSheet.css” 스타일 시트 파일에 정의된 스타일 중 <리스트 2>에 표시된 스타일들을 수정한다.

.header {
    background: #111;
    border-bottom: 1px solid #333;
    font: normal 2em sans-serif;
    height: 70px;
}
.header a {
    color: #888;
    display: block;
    line-height: 60px;
    text-decoration: none;
    width: 100%;
}
.subnav h1 {
    padding-top: 8px;
    background: url(img/bgh1.gif) repeat-x left bottom;
    margin-bottom: 10px;
    padding: 10px 0 4px;
}
.footer {
    background: #191919;
    border-top: 1px solid #444;
    color: #999;
    padding: 3% 3% 3%;
}


<리스트 2> 스타일의 수정

마스터 페이지만으로는 별도의 디자인을 웹에서 볼 수 없으므로, 웹 사이트 생성시에 기본적으로 생성되는 “Default.aspx" 웹 페이지를 삭제 후, 웹 사이트 이름에서 우측 마우스를 클릭하여 “새 항목 추가(Add New Item...)" 메뉴를 선택하여, 새로운 웹 폼을 추가하도록 한다. 새로운 웹 폼명은 ”Default.aspx"이며, 새로운 웹 폼을 생성 시 “마스터 페이지 선택” 항목을 체크하여, <화면 5>와 같이 마스터 페이지 선택 시 “BlogMasterPage.master”를 선택하도록 한다.


<화면 5> 마스터 페이지 선택 화면

새로운 웹 폼이 생성되었으면, “BlogMasterPage.master” 마스터 페이지에 적용되어 있는 디자인을 보기 위하여, CTRL+F5키 또는 디버그 메뉴의 디버깅하지 않고 시작 메뉴를 선택한다. “BlogMasterPage.master” 마스터 페이지의 화면은 <화면 6>과 같다.


<화면 6> “BlogMasterPage.master” 마스터 페이지의 화면

이제, 각 메뉴를 클릭 시에 이동할 페이지들을 미리 생성한다, 기본 페이지인 “Default.aspx" 페이지는 이미 생성했으므로, ”Default.aspx" 페이지를 생성할 때와 마찬가지의 방법으로 “About.aspx", "Tag.aspx", "Rss.aspx", "Search.aspx", "GuestBook.aspx", "Login.aspx", "Admin.aspx" 등의 7개 웹 페이지를 생성하도록 한다. <화면 7>은 현재까지 작업한 웹 사이트의 구조를 보여준다.


<화면 7> 웹 사이트의 구조


Creative Commons License
저작물크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
border border
border border
  이전 포스트 :: #80. VS 2008을 이용한 블로그 프로그래밍 - Part1
  다음 포스트 :: #82. VS 2008을 이용한 블로그 프로그래밍 - Part3
border border
border border
  
# Commented By :: 이존관 At 2/12/2009 3:32:46 PM [M] [D]
언제 포스팅이 되나 기다리고 있었는데 좋은 정보 감사합니다.
다음 포스팅은 언제쯤 되나요?
# Commented By :: dekiriya At 2/12/2009 9:00:18 PM [D]
저도 이제나 저제나 하면서 목빼고 기다리고 있었습니다.
감사하구요.
담 연재는 언제쯤이 될까요?
이왕 재편집해서 새로 포스팅 하시는거
자세한 설명과 아울러 상세한 소스도 함께 부탁드려 봅니다.;;;

# Commented By :: 엔틱스 At 2/13/2009 10:34:03 AM [M] [D]
이존관, dekiriya :: 허접한 글을 기다려주셨다니 감사할 뿐입니다. ^^;;
화면 캡쳐 및 HTML 변환과 같은 작업 때문에 포스팅이 길어질 수도 있지만...
주당 3회씩, 3주동안이면 블로그를 작성하는 것에 대한 포스팅이 완료될 듯 합니다. ^^;;
# Commented By :: sung At 2/12/2010 4:27:39 PM [D]
안녕하세요.. 블로그 프로그래밍을 웹 사이트로 만드셨는데...
저는 지금 웹 응용 프로그램으로 구현을 하고 있거든요.. 혹시 웹 사이트와 웹 응용 프로그램의 차이를 알 수 있을까요?? 아니면 거의 같은 기능을 하는건가요??
# Commented By :: 최지훈 At 2/17/2010 10:23:10 AM [M] [D]
알고 계시겠지만...
ASP.NET 1.1 버전까지는 모든 웹 프로젝트의 형식이 웹 응용 프로그램(WAP) 형식으로 만들어졌습니다. 하지만, ASP.NET 2.0에서 새롭게 웹 사이트 프로그램(WSP) 형식이 추가되어 모든 프로젝트 형식을 WSP 형식으로 만들게 되었습니다. (추후에, .NET Framework 2.0 SP1에서 다시 WAP가 추가되었습니다. 기존 ASP.NET 1.1 버전을 사용하던 개발자들을 위해 다시 추가된 것이죠.)

간단하게 이야기하자면, WAP는 코드의 수정 후 빌드가 필요하며, 빌드된 어셈블리가 프로젝트당 하나의 어셈블리로 생성됩니다. 또한, WAP 형식끼리는 기존의 방식처럼 웹 응용 프로그램간의 참조를 사용할 수 있기 때문에, 여러 개의 웹 프로젝트로 사이트가 분리되는 경우(중-대 규모의 웹 프로젝트인 경우)에 유리하다고 볼 수 있습니다. 반면에 WSP는 수정 후에 빌드가 필요 없으며, 빌드 옵션에 따라 하나의 어셈블리 또는 페이지별 어셈블리가 생성됩니다. 제가 예제로 쓴 블로그 프로그래밍과 같이 단일 웹 프로젝트인 경우(소규모 프로젝트)에 유리하다고 볼 수 있습니다.

좀 더 자세한 차이점은 다음의 링크를 참조하시기 바랍니다.

http://maordavid.blogspot.com/2007/06/aspnet-20-web-site-vs-web-application.html
  NAME ::   PASSWORD ::
  MAIL ::   HOMEPAGE ::
  COMMENT ::
border border
border border
COPYLEFT NX Blogs.   opml

LogIn ]  [ Join NX Blog's ]
border border
border border
mvp
border border
border border
  border
   Personal Thought
   ASP.NET
   ASP.NET AJAX
   ASP.NET MVC Framework
   Dev Story(Etc.)
   Reading the Articles
   About Microsoft / MSDN
   Certification Talk
   Useful Dev Tools
border border
border border
  border
   2010 년 09 월 (2)
   2010 년 06 월 (1)
   2010 년 05 월 (1)
   2010 년 04 월 (1)
   2010 년 03 월 (1)
   2010 년 02 월 (5)
   2010 년 01 월 (1)
   2009 년 04 월 (2)
   2009 년 03 월 (3)
   2009 년 02 월 (6)
   2009 년 01 월 (1)
   2008 년 10 월 (1)
   2008 년 06 월 (8)
   2008 년 05 월 (10)
   2008 년 04 월 (13)
   2008 년 03 월 (9)
   2008 년 02 월 (17)
   2008 년 01 월 (5)
   2007 년 12 월 (8)
   2007 년 11 월 (15)
   2007 년 10 월 (36)
   2007 년 09 월 (33)
   2007 년 08 월 (17)
   2007 년 07 월 (23)
   2007 년 06 월 (4)
   2007 년 05 월 (16)
   2007 년 04 월 (26)
   2007 년 03 월 (14)
   2007 년 02 월 (25)
   2007 년 01 월 (41)
   2006 년 12 월 (38)
   2006 년 11 월 (0)
   2006 년 10 월 (0)
   2006 년 09 월 (1)
   2006 년 08 월 (9)
   2006 년 07 월 (1)
border border
border border
  border
   #129. 無題(2)
    By 최지훈 At 9/6/2010
   #128. 無題
    By 최지훈 At 9/3/2010
   127. [예약구매] 실전. jQ...
    By 최지훈 At 6/13/2010
   #126. 무제
    By 최지훈 At 5/23/2010
   #125. 요즘 근황?
    By 최지훈 At 4/15/2010
   #124. ASP.NET 4 책을...
    By 최지훈 At 3/12/2010
   #97. ASP.NET 4 New...
    By 최지훈 At 2/12/2010
   #96. ASP.NET 4 New...
    By 최지훈 At 2/10/2010
   #95. ASP.NET 4 New...
    By 최지훈 At 2/9/2010
   #94. ASP.NET 4 New...
    By 최지훈 At 2/2/2010
border border
border border
  border
   태풍의 끝자락이 대지를 쓸고 지나...
    By 조재문 At 9/7/2010
   배는숨겨야지 에서 나도 모르게 빵...
    By ㅋㅋ At 8/17/2010
   Sorry. I don't hav...
    By 최지훈 At 8/16/2010
   내 생애 번역서는 이걸루 끝이다....
    By 최지훈 At 8/16/2010
   네..^^;; 저도 감사합니다.
    By 최지훈 At 8/16/2010
   IIS 버전이 업그레이드되면서 해...
    By 최지훈 At 8/16/2010
   나중에 비슷한 차로 태워는 줄께~...
    By 최지훈 At 8/16/2010
   나도 사주세요 저 차
    By ㅋㅋ At 8/12/2010
   저도 URL Rewriting 이...
    By 초보 At 8/7/2010
   감사드립니다^^
    By 이한철 At 7/28/2010
border border