Free Dual Palace Car Tent 입니다.

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'My Life > Manual' 카테고리의 다른 글

[Manual] WenQia 433.92MHz 원격 컨트롤러복사  (0) 2023.04.17

"Medcare" template을 이용한 MVC Web Application 구축, 다섯 번째 입니다. 지난 4편에서는 각 메뉴의 기본적인 뼈대인 Controller와 해당 controller 의 index ActionMethod 에 대응하는index.cshtml View 파일을 만드는 과정을 살펴봤습니다. 이제 웹사이트의 기본적인 구조를 갖추었으니, 이번 편에서는 모든 페이지에 공통으로 적용될 Layout 을 template 에서 어떻게 가져와서 _Layout.cshtml 파일을 구성하는지 살펴보겠습니다.

1. 공통 부분 :

MVC Web Application에서는 일반적으로 _Layout.cshtml이라는 파일을 사용하여 웹사이트의 공통 Layout 을 정의합니다. 이 파일은 Web page의 전체적인 구조를 담고 있으며, 각 페이지의 내용이 삽입될 영역을 지정하는 역할을 합니다. 필요에 따라서 여러 Layout page 를 만들어 놓고 각 View 마다 다르게 설정할 수도 있습니다.

  • Views 폴더 아래 Shared 폴더를 확인하거나 없다면 생성합니다.
  • Shared 폴더에 Razor View Page (_Layout.cshtml)를 확인합니다. 없으면 생성합니다.

제가 생성한 Project 에는 이미 Shared 폴더에 _Layout.cshtml 파일이 있으므로 더블클릭으로 파일을 엽니다.

Source 가 길어 복잡해 보이지만 Editor 화면의 Line Number 우측의 화살표를 클릭하면 축소되어 내용을 감출 수가 있습니다. 그럼 아래와 같이 간략하게 보기 쉽게 됩니다.

크게 head tag 와 body tag 로 나뉘고, 다시 body tag 내에는 header, div, footer 이렇게 세부분으로 나뉩니다. 이 부분이 핵심입니다.

잘 기억해 두세요.

이 번에는 "Medcare" 의 HTML Source 를 살펴보겠습니다.

Source 를 편하게 보기 위해서 Visual Studio Code 로 열어서 보겠습니다. Download 받아 압축을 푼 폴더를 마우스 오른쪽 클릭을 하면 나타나는 Context menu 에서 "Code(으)로 열기" 메뉴를 클릭합니다.

아래와 같이 VS Code 가 열리고 해당 폴더 내의 파일 구조가 표시됩니다.

index.html  이 첫 페이지지만 너무 길어서 보기가 어려울 수 있으니 about-us.html 파일을 열어보겠습니다. menu 의 about 에 해당하는 페이지 입니다.

페이지 내용은 아래와 같습니다.

보기 편하도록  Visual Studio 2022 에서와 같이 Line Number 오론쪽의 화살표를 클릭하여 내용을 축소해 봅니다.

어떻습니까? 구조가 익숙하죠?

다시 Visual Studio 2022 의 모습을 보죠.

Header 와 Footer 그리고 그 사이에 내용이 배치되어 유사한 구조라는 걸 알 수 있습니다. 다른 메뉴의 화면들은 어떤지 살펴볼까요?

Department.html

Docters.html

Contact.html

모두 같은 구조를 가지고 있습니다.

사각형의 내의 Source 내용을 제외한 부분들이 거의 대부분 동일하다는 말은 WebSite 에서 공통적으로 사용할 _Layout.cshtml 에 넣으면 모든 Page 에서 재 사용할 수 있다는 의미입니다. 그리고 Source 적용 후에 header 와 footer 를 별도의 코드로 분리하여 관리할 수 있습니다.

2. 각 화면의 영역 :

이제 공통 부분을 찾았으니 차이가 나는 각 화면의 부분을 어떻게 적용하는지에 대해서 살펴보겠습니다.

html source 에서 사각형의 내용들을 어떻게 처리하느냐를 이야기하는 건데요. Rendering  된다라고 이야기합니다.

_Layout.cshtml 파일에서 각 페이지의 내용이 Rendering될 위치를 지정해야 합니다. 이는 @RenderBody() 라는 Helper Method를 사용하여 간단하게 처리할 수 있습니다. 이 Method는 각 View page의 HTML 콘텐츠를 해당 위치에 삽입해 줍니다.

아래 처럼 _Layout.cshtml 파일을 보면 사각형 내의 @RenderBody() 를 보실 수 있습니다.

<div> tag 내에 다시 <main> tag 가 있지만 "Medcare" Source  에는 <main> tag 가 없으므로 아래와 같이 간단히 구성하도록 하겠습니다.

<body>
    <header>
    </header>

    <div class="container">
        @RenderBody()
    </div>

    <footer>
    </footer>
</body>

3. _Layout.cshtml(공통 레이아웃) 파일:

위 내용을 바탕으로 _Layout.cshtml 파일을 수정해 보도록 하겠습니다. 여러 html page 중에서 어떤 파일을 선택해도 좋지만 제일 간단하다고 생각되는 about-us.html 파일을 가지고 진행하겠습니다.

사각형 내의 내용을 제외한 내용을 _Layout.cshtml 에 복사해 넣고 사각형 부분의 내용은 아래 코드로 대치하겠습니다.

    <div class="container">
        @RenderBody()
    </div>

그럼 아래와 같습니다.

Code Snippet
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="icon" href="img/favicon.png" type="image/png">
  8.     <title>Medcare Medical</title>
  9.     <!-- Bootstrap CSS -->
  10.     <link rel="stylesheet" href="css/bootstrap.css">
  11.     <link rel="stylesheet" href="css/themify-icons.css">
  12.     <link rel="stylesheet" href="css/flaticon.css">
  13.     <link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
  14.     <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
  15.     <link rel="stylesheet" href="vendors/animate-css/animate.css">
  16.     <!-- main css -->
  17.     <link rel="stylesheet" href="css/style.css">
  18.     <link rel="stylesheet" href="css/responsive.css">
  19. </head>
  20. <body>
  21.  
  22.     <!--================Header Menu Area =================-->
  23.     <header class="header_area">
  24.         <div class="top_menu row m0">
  25.             <div class="container">
  26.                 <div class="float-left">
  27.                     <a class="dn_btn" href="mailto:medical@example.com"><i class="ti-email"></i>medical@example.com</a>
  28.                     <span class="dn_btn"> <i class="ti-location-pin"></i>Find our Location</span>
  29.                 </div>
  30.                 <div class="float-right">
  31.                     <ul class="list header_social">
  32.                         <li><a href="#"><i class="ti-facebook"></i></a></li>
  33.                         <li><a href="#"><i class="ti-twitter-alt"></i></a></li>
  34.                         <li><a href="#"><i class="ti-linkedin"></i></a></li>
  35.                         <li><a href="#"><i class="ti-skype"></i></a></li>
  36.                         <li><a href="#"><i class="ti-vimeo-alt"></i></a></li>
  37.                     </ul>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.         <div class="main_menu">
  42.             <nav class="navbar navbar-expand-lg navbar-light">
  43.                 <div class="container">
  44.                     <!-- Brand and toggle get grouped for better mobile display -->
  45.                     <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
  46.                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  47.                         <span class="icon-bar"></span>
  48.                         <span class="icon-bar"></span>
  49.                         <span class="icon-bar"></span>
  50.                     </button>
  51.                     <!-- Collect the nav links, forms, and other content for toggling -->
  52.                     <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
  53.                         <ul class="nav navbar-nav menu_nav ml-auto">
  54.                             <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
  55.                             <li class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>
  56.                             <li class="nav-item"><a class="nav-link" href="department.html">Department</a></li>
  57.                             <li class="nav-item"><a class="nav-link" href="doctors.html">Doctors</a></li>
  58.                             <li class="nav-item submenu dropdown">
  59.                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
  60.                                 <ul class="dropdown-menu">
  61.                                     <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
  62.                                     <li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
  63.                                     <li class="nav-item"><a class="nav-link" href="element.html">element</a></li>
  64.                                 </ul>
  65.                             </li>
  66.                             <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
  67.                         </ul>
  68.                     </div>
  69.                 </div>
  70.             </nav>
  71.         </div>
  72.     </header>
  73.     <!--================Header Menu Area =================-->
  74.  
  75.  
  76.     <div class="container">
  77.         @RenderBody()
  78.     </div>
  79.  
  80.     <!-- start footer Area -->
  81.     <footer class="footer-area area-padding-top">
  82.         <div class="container">
  83.             <div class="row">
  84.                 <div class="col-lg-2 col-sm-6 single-footer-widget">
  85.                     <h4>Top Products</h4>
  86.                     <ul>
  87.                         <li><a href="#">Managed Website</a></li>
  88.                         <li><a href="#">Manage Reputation</a></li>
  89.                         <li><a href="#">Power Tools</a></li>
  90.                         <li><a href="#">Marketing Service</a></li>
  91.                     </ul>
  92.                 </div>
  93.                 <div class="col-lg-2 col-sm-6 single-footer-widget">
  94.                     <h4>Quick Links</h4>
  95.                     <ul>
  96.                         <li><a href="#">Jobs</a></li>
  97.                         <li><a href="#">Brand Assets</a></li>
  98.                         <li><a href="#">Investor Relations</a></li>
  99.                         <li><a href="#">Terms of Service</a></li>
  100.                     </ul>
  101.                 </div>
  102.                 <div class="col-lg-2 col-sm-6 single-footer-widget">
  103.                     <h4>Features</h4>
  104.                     <ul>
  105.                         <li><a href="#">Jobs</a></li>
  106.                         <li><a href="#">Brand Assets</a></li>
  107.                         <li><a href="#">Investor Relations</a></li>
  108.                         <li><a href="#">Terms of Service</a></li>
  109.                     </ul>
  110.                 </div>
  111.                 <div class="col-lg-2 col-sm-6 single-footer-widget">
  112.                     <h4>Resources</h4>
  113.                     <ul>
  114.                         <li><a href="#">Guides</a></li>
  115.                         <li><a href="#">Research</a></li>
  116.                         <li><a href="#">Experts</a></li>
  117.                         <li><a href="#">Agencies</a></li>
  118.                     </ul>
  119.                 </div>
  120.                 <div class="col-lg-4 col-md-6 single-footer-widget">
  121.                     <h4>Newsletter</h4>
  122.                     <p>You can trust us. we only send promo offers,</p>
  123.                     <div class="form-wrap" id="mc_embed_signup">
  124.                         <form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&id=92a4423d01"
  125.                               method="get" class="form-inline">
  126.                             <input class="form-control" name="EMAIL" placeholder="Your Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email Address'"
  127.                                    required="" type="email" />
  128.                             <button class="click-btn btn btn-default">
  129.                                 <i class="ti-arrow-right"></i>
  130.                             </button>
  131.                             <div style="position: absolute; left: -5000px;">
  132.                                 <input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text" />
  133.                             </div>
  134.  
  135.                             <div class="info"></div>
  136.                         </form>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.             <div class="row footer-bottom d-flex justify-content-between">
  141.                 <p class="col-lg-8 col-sm-12 footer-text m-0">
  142.                     <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  143.                     Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
  144.                     <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
  145.                 </p>
  146.                 <div class="col-lg-4 col-sm-12 footer-social">
  147.                     <a href="#"><i class="fab fa-facebook-f"></i></a>
  148.                     <a href="#"><i class="fab fa-twitter"></i></a>
  149.                     <a href="#"><i class="fab fa-dribbble"></i></a>
  150.                     <a href="#"><i class="fab fa-linkedin"></i></a>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </footer>
  155.     <!-- End footer Area -->
  156.  
  157.     <!-- Optional JavaScript -->
  158.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  159.     <script src="js/jquery-2.2.4.min.js"></script>
  160.     <script src="js/popper.js"></script>
  161.     <script src="js/bootstrap.min.js"></script>
  162.     <script src="js/stellar.js"></script>
  163.     <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
  164.     <script src="js/jquery.ajaxchimp.min.js"></script>
  165.     <script src="js/waypoints.min.js"></script>
  166.     <script src="js/mail-script.js"></script>
  167.     <script src="js/contact.js"></script>
  168.     <script src="js/jquery.form.js"></script>
  169.     <script src="js/jquery.validate.min.js"></script>
  170.     <script src="js/mail-script.js"></script>
  171.     <script src="js/theme.js"></script>
  172. </body>
  173. </html>

_Layout.cshtml 파일을 수정했지만 WebSite 에서 사용하는 javascript, StyleSheet, Image 파일들을 복사하고 경로를 잡아주는 과정이 진행되어야 합니다.

4. Image, Javascript, StyleSheet :

"Medcare" Template Source 에서 아래 그림과 같이 "css, fonts, img, js, vendors" 폴더를 복사합니다.

그리고 Visual Studio 2022 의 Solution Explorer (솔루션 탐색기)에서 wwwroot를  오른쪽 click  하여  "Open  Folder  in  File  Explorer(파일탐색기에서  폴더열기)" 를 cliek  합니다.

File Explorer (파일탐색기)가 열리면  wwwroot 폴더에 복사한 파일을 붙여 넣습니다.

결과는 다음과 같습니다.

5. 실행 :

지금까지 작업이 잘 되었는지 확인해 보겠습니다. 

Debugging Button 을 Click 하거나 F5 Button 을 눌러 실행시켜 봅니다.

잘 실행되십니까? index page 도 잘 표시되고 favicon 도 표시되네요. 메뉴를 Click 하시고 싶겠지만 메뉴의 link 를 수정하지 않아 표시할 수 없다는 오류가 나올겁니다. 지난 시간에 확인했던 것 처럼 주소창에 "https://localhost:7154/About" 를 입력하시면 해당 메뉴로 이동할 겁니다.

마무리

이번 편에서는 "Medcare" template 기반의 MVC Web Application에 공통 Layout인 _Layout.cshtml 파일을 수정하여 Layout 을 적용하는 과정을 살펴봤습니다. 깊이 살펴보아야 할 기본 내용은 많습니만 진행과정을 단순하게 하여 WebSite 제작에 쉽게 접근하도록 구성해 봤습니다. 내용이 길어 Header와 Footer를 적용하고, CSS와 JavaScript 파일을 분리하는 과정은 다음 편에서 살펴보겠습니다. 

Happy GoSu ~

WooGong ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

반응형
저작자표시 비영리 변경금지 (새창열림)

'Web > ASP.NET Core' 카테고리의 다른 글

[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #4: View와 Controller 구성  (0) 2025.05.12
[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #3: HTML 구조 분석과 MVC 디자인 준비  (0) 2025.05.07
[ASP.NET Core] .NET 8 ASP.NET Core MVC 시작점, Program.cs 완벽 해부: 서비스 등록부터 요청 파이프라인 구성까지!  (0) 2025.05.05
[ASP.NET Core] .NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기 (1편)  (0) 2025.04.30
[ASP.NET Core] ViewComponent 사용과 TagHelper  (0) 2020.12.25

무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #4: View와 Controller 구성

1. Controller 와 View 생성

지난 3편에서 Medcare Template의 HTML 구조와 메뉴를 간략하게 살펴보았습니다. 이제 본격적으로 MVC Web Application의 View를 구성하기 위해 다운로드 받은 HTML 소스 파일들을 프로젝트의 View 폴더 내에 각 메뉴에 해당하는 하위 폴더 (Home, About, Department, Doctors, Blog, Contact)를 생성하여 옮겨줍니다. 각 폴더 안에는 해당 메뉴의 내용을 담을 index.cshtml 파일을 생성할 예정입니다. 수동으로 생성하는 것이 아닌 Visual Studio 2022 에서 몇 번의 마우스 클릭과 몇 번의 Typing 만으로 메뉴의 빈 화면들을 구성할 수 있습니다.

Home 메뉴는 추가되어 있으니 About, Department, Doctors, Contact 메뉴를 추가해 보겠습니다. 먼저 About 메뉴부터 추가해 보죠. Capture 된 화면을 차례대로 따라하며 About 메뉴를 추가해 보시기 바랍니다.

먼저 아래 그림과 같이 Solution Explorer 에서 Controller 폴더를 오른쪽 Click 하여 나타나는 Context menu 를 따라가 클릭합니다.

Controller > Add > Controller ...

메뉴 클릭시 나타나는 화면에서 MVC Controller - Empty 를 선택하고  Add  버튼을  click 합니다.

나타나는 화면에서 MVC Controller - Empty 를 선택하고 하단 Name 칸의 내용을 지우고 ..

"AboutController" 를 입력합니다.

아래 그림처럼 AboutController 가 추가된 모습을 보실 수 있습니다.

AboutController 가 추가되면서 오른쪽에는 생성된 소스가 표시되는데요. 이번에는 View 를 추가해 보도록 하겠습니다. 

생성된 Source를  보면  자동으로 Index()  method가  생성된  것을  확인할  수 있습니다.  사용자의 request를 받아 처리하고, business logic을 수행하며, 다양한 형태의 응답을 생성하는 역할을 하는  Method 를 ActionMethod 라고 하는데 index method 는 해당 Controller  를 실행시킬  때 기본적으로  실행되는  method  라고  생각하시면 됩니다.  http://localhost/About  를 Browser 주소창에  입력하시면  기본적으로  About Controller 의 index method  가 실행됩니다.

Source 상에서 Index() 를 오른쪽 click 하여 나타난 Context menu 에서 Add View ... 를 클릭합니다.

나타난 화면에서 Razor View- Empty 를 선택할 수도 있지만 일단 Razor View 를 click 하겠습니다.

나타난 화면에서 Use a layout page Checkbox 를 클릭하여 사용할 Layout 을 선택하겠습니다.

Checkbox 를 click 하고 ... 버튼을 클릭하면 화면이 나타납니다. 나타난 화면에서 Views 폴더를 선택한 후  Shared 폴더를 선택합니다. 오른쪽 Contents of folder 칸에서 _Layout.cshtml 을 선택하고 OK 버튼을 클릭합니다. _Layout.cshtml 파일은 만들 페이지들이 갖는 공통의  틀이라고  생각하시면 됩니다.

아래와 같이 선택한 _Layout.cshtml 파일의 Layout Page 의 경로가 채워졌습니다.  Add 버튼을  click  합니다.

그 결과 Views 폴더에 About 폴더가 생성되고 그 내부에 index.cshtml 파일이 생성됩니다. 오른쪽에 생성된 파일의 내용도 함께 표시됩니다. 

처음 생성된 Source 에서 "index" 라고 적힌 부분을 "About" 로 수정해 줍니다.

Layout 이 화면에서 설정한 Layout 페이지의 경로가 보입니다. _ViewStart.cshtml 에 기본 Layout 을 설정하는 부분이 있어 이 코드는 추가할 필요없지만 필요에 따라 해당페이지에서 별도의 Layout 을 설정하려한다면 아래 코드와 같이 추가해서 설정해 줄 수 있습니다.

이렇게 About menu 를 추가해 보았습니다.

위 과정을 반복하여 Department, Docters, Contact 메뉴를 추가해 보시기 바랍니다.

추가한 결과는 아래와 같습니다.

5개의 Controller 와 Views Folder 에 5개의 View 가 추가된 모습을 보실 수 있습니다.

추가를 마쳤으니 어떻게 보이는지 실행을 시켜보겠습니다.

두 화살표 버튼 모두 클릭하면 실행이 되지만 왼쪽 버튼은 debugging 을 수행하는 버튼으로  왼쪽 버튼을 클릭합니다.

아래와 같이 실행 화면이 나타납니다. 아직 Menu 를 표시하는 Source 를 추가하지 않았기 때문에 수동으로 주소를 입력해서 이동해 보겠습니다.

주소창에 About 를 추가한 후 Enter 를 눌러보십시오.

Department, Docters, Contact 를 About 대신 입력하여 테스트 해보시기 바랍니다.

마무리

이번 4편에서는 다운로드 받은 Medcare 템플릿의 HTML 소스를 MVC 웹 애플리케이션의 기본적인 View와 Controller 구조로 변환하기 위해 Menu 를 Controller 와 View 로 생성하는 과정을 살펴보았습니다. 다음은 Header 와 Footer 를 추출하면서 Layout 을 구성하는 방법을 살펴보겠습니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'Web > ASP.NET Core' 카테고리의 다른 글

[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #5: Layout  (0) 2025.05.13
[ASP.NET CORE] 무료 템플릿으로 만드는 ASP.NET Core MVC WebSite #3: HTML 구조 분석과 MVC 디자인 준비  (0) 2025.05.07
[ASP.NET Core] .NET 8 ASP.NET Core MVC 시작점, Program.cs 완벽 해부: 서비스 등록부터 요청 파이프라인 구성까지!  (0) 2025.05.05
[ASP.NET Core] .NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기 (1편)  (0) 2025.04.30
[ASP.NET Core] ViewComponent 사용과 TagHelper  (0) 2020.12.25

+ Recent posts

티스토리툴바