더북(TheBook)

2. 우선 Views 폴더의 Shared 폴더에 있는 _Layout.cshtml 파일을 연다. 처음 생성할 때의 _Layout.cshtml 파일을 바탕으로 다음 코드와 같이 내용을 수정한다. 편의상 전체 코드는 모두 다음 코드로 작성하는 걸 기준으로 하겠다. <environment /> 태그 헬퍼를 사용해 제이쿼리 등의 스크립트를 읽어 오는 코드는 <body> 태그 하단에 위치했는데 이를 <head> 태그 영역으로 옮긴 것 외에는 몇몇 자바스크립트 코드와 CSS 코드를 추가한 것이다.

▼  /Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
  <meta charset=“utf-8” />
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
  <title>@ViewData[“Title”] - 닷넷노트</title>
  
  <environment names=“Development”>
      <link rel=“stylesheet” href=“~/lib/bootstrap/dist/css/bootstrap.css” />
      <link rel=“stylesheet” href=“~/css/site.css” />
  </environment>
  <environment names=“Staging,Production”>
      <link rel=“stylesheet” href=
      https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
          asp-fallback-href=“~/lib/bootstrap/dist/css/bootstrap.min.css”
          asp-fallback-test-class=“sr-only”
          asp-fallback-test-property=“position”
          asp-fallback-test-value=“absolute” />
      <link rel=“stylesheet” href=“~/css/site.min.css”
              asp-append-version=“true” />
  </environment>
  
  <link href=“~/lib/font-awesome/css/font-awesome.min.css” rel=“stylesheet” />
  
  <script src=“~/lib/moment/min/moment-with-locales.js”></script>
  <script>
      moment.locale(‘ko’);
  </script>
  
  <!-- 기본 JavaScript 라이브러리 참조 시작 -->
  <environment names=“Development”>
      <script src=“~/lib/jquery/dist/jquery.js”></script>
      <script src=“~/lib/bootstrap/dist/js/bootstrap.js”></script>
      <script src=“~/js/site.js” asp-append-version=“true”></script>
  </environment>
  <environment names=“Staging,Production”>
      <script src=https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
              asp-fallback-src=“~/lib/jquery/dist/jquery.min.js”
              asp-fallback-test=“window.jQuery”>
      </script>
      <script
          src=
              https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
          asp-fallback-src=“~/lib/bootstrap/dist/js/bootstrap.min.js”
          asp-fallback-test=
              “window.jQuery && window.jQuery.fn && window.jQuery.fn.modal”>
      </script>
      <script src=“~/js/site.min.js” asp-append-version=“true”></script>
  </environment>
  <!-- 기본 JavaScript 라이브러리 참조 종료 -->
  
  <script src=“~/lib/angular/angular.js”></script>
</head>
<body>
  <div class=“navbar navbar-inverse navbar-fixed-top”>
      <div class=“container”>
          <div class=“navbar-header”>
              <button type=“button” class=“navbar-toggle”
                      data-toggle=“collapse” data-target=”.navbar-collapse”>
                  <span class=“sr-only”>Toggle navigation</span>
                  <span class=“icon-bar”></span>
                  <span class=“icon-bar”></span>
                  <span class=“icon-bar”></span>
              </button>
              <a asp-area=”” asp-controller=“Home”
                  asp-action=“Index” class=“navbar-brand”>닷넷노트</a>
          </div>
          <div class=“navbar-collapse collapse”>
              <ul class=“nav navbar-nav”>
                  <li><a asp-area=”” asp-controller=“Home”
                          asp-action=“Index”>Home</a></li>
                  <li><a asp-area=”” asp-controller=“DotNetNote”
                          asp-action=“Index”>게시판</a></li>
                  <li><a asp-area=”” asp-controller=“WebCamp”
                          asp-action=“Index”>웹캠프</a></li>
                  <li><a asp-area=”” asp-controller=“CommunityCamp”
                          asp-action=“Index”>커뮤니티캠프</a></li>
                  <li><a asp-area=”” asp-controller=“Home”
                          asp-action=“About”>정보</a></li>
                  <li><a asp-area=”” asp-controller=“Home”
                          asp-action=“Contact”>연락처</a></li>
                  <li class=“dropdown”>
                      <a href=”#” class=“dropdown-toggle”
                          data-toggle=“dropdown”>예제 <b class=“caret”></b></a>
                      <ul class=“dropdown-menu”>
                          <li>
                              <a asp-controller=“RouteDemo”
                                  asp-action=“Index”>어트리뷰트 라우팅</a>
                          </li>
                          <li class=“divider”></li>
                          <li>
                              <a href=“~/Maxim/Default.html”>
                                  명언 서비스
                              </a>
                          </li>
                      </ul>
                  </li>
              </ul>
              @await Html.PartialAsync(”_LoginPartial”)
          </div>
      </div>
  </div>
  <div class=“container body-content”>
      @RenderBody()
      <hr />
      <footer>
          <p>&copy; @DateTime.Now.Year - DotNetNote</p>
      </footer>
  </div>
  
  @RenderSection(“scripts”, required: false)
</body>
</html>

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.