asp.net 마스터페이지 예제

잘 디자인된 웹 사이트의 한 가지 특성은 일관된 사이트 전체 페이지 레이아웃입니다. 예를 들어 www.asp.net 웹 사이트를 예로 들어 보겠습니다. 이 글을 쓰는 시점에서 모든 페이지에는 페이지의 위쪽과 아래쪽에 동일한 콘텐츠가 있습니다. 그림 1에서 볼 수 있듯이 각 페이지의 맨 위에는 Microsoft 커뮤니티 목록이 있는 회색 막대가 표시됩니다. 사이트 로고, 사이트가 번역된 언어 목록 및 핵심 섹션인 홈, 시작, 학습, 다운로드 등입니다. 마찬가지로 페이지 하단에는 www.asp.net 광고에 대한 정보, 저작권 명세서 및 개인 정보 보호 정책에 대한 링크가 포함되어 있습니다. 콘텐츠 페이지에서 스크립트 또는 메타 태그를 추가하려면 더 많은 작업을 수행할 수 있습니다. 다음은 리디렉션 메타 태그를 삽입하는 예입니다: 일반적으로 마스터 페이지는 HTML 헤드 태그를 포함하여 처리됩니다. HTML 헤드 태그에는 태그(페이지 제목 을 설정하기 위해), 하나 이상의 <script> 태그(JavaScript 라이브러리 포함), 하나 이상의 <meta> 태그(페이지에 대한 메타 데이터 포함)가 포함될 수 있습니다. 콘텐츠 페이지는 종종 헤드 태그의 내용을 수정하거나 보강해야 합니다. 마스터 페이지는 응용 프로그램의 각 콘텐츠 페이지에 대한 제목을 설정할 수 없기 때문에 제목 태그가 좋은 예입니다. 콘텐츠 페이지만 제목이 무엇인지 알 수 있습니다. 다행히 ASP.NET 페이지 클래스에서 공용 속성을 제공하며 @ 페이지 지시문에서 콘텐츠 페이지의 제목을 선언적으로 설정할 수 있습니다.</p> <p>그림 2는 www.asp.net 대한 마스터 페이지가 어떻게 생겼는지 보여줍니다. 마스터 페이지는 모든 페이지의 위쪽, 아래쪽 및 오른쪽의 마크업과 각 개별 웹 페이지의 고유한 콘텐츠가 있는 왼쪽 중간의 ContentPlaceHolder와 같은 공통 사이트 전체 레이아웃을 정의합니다. 잘 설계된 사이트의 또 다른 특성은 사이트의 모양을 변경할 수 있는 용이성입니다. 그림 1은 2008년 3월 현재 www.asp.net 홈페이지를 보여 주지만 현재와 이 자습서의 게시 사이에는 모양과 느낌이 변경되었을 수 있습니다. 아마도 맨 위에 있는 메뉴 항목이 MVC 프레임워크에 대한 새 섹션을 포함하도록 확장될 것입니다. 아니면 다른 색상, 글꼴 및 레이아웃을 가진 근본적으로 새로운 디자인이 공개 될 것입니다. 전체 사이트에 이러한 변경 내용을 적용 하는 것은 사이트를 구성 하는 웹 페이지의 수천을 수정 할 필요가 없는 신속 하 고 간단한 프로세스 여야 합니다. 세 번째 방법은 Title 특성과 동일한 유연성과 편리함을 제공하는 것입니다. 예를 들어 @ 페이지 지시문에서 페이지의 메타 키워드를 설정하려면 어떻게 해야 할까요? 마스터 페이지 기본 클래스(있는 경우)에서 또는 마스터 페이지 자체에서 이 이벤트를 발생시킬 수 있습니다. 이 예제에서는 마스터 페이지에서 직접 이벤트를 발생 시면 됩니다. 이 예제에서 알 수 있듯이 마스터 페이지에는 서버 쪽 웹 컨트롤, 코드 및 이벤트 처리기가 포함될 수 있습니다.</p> <p>헤더를 수정하는 데 사용할 수 있는 또 다른 방법이 있는데, 한 가지 단점이 있습니다. ContentPlaceHolder 및 콘텐츠 컨트롤은<br /> <form> 태그 외부에 ContentPlaceHolder 컨트롤을 배치하는 경우에도 병합됩니다. </p> <p></p> <div class="clear"></div> </div> <!-- //Post Content --> <!-- Post Meta --> <div class="post_meta"> <span class="post_category"><i class="icon-bookmark"></i>Uncategorized</span><span class="post_date"><i class="icon-calendar"></i><time datetime="2019-08-02T02:20:57">August 2, 2019</time></span><span class="post_author"><i class="icon-user"></i></span><span class="post_comment"><i class="icon-comments"></i><a href="http://unicommsolutions.com/asp-net-%eb%a7%88%ec%8a%a4%ed%84%b0%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%98%88%ec%a0%9c/#respond" class="comments-link" title="Comment on asp.net 마스터페이지 예제">No comments</a></span> <span class="post_permalink"><i class="icon-link"></i><a href="http://unicommsolutions.com/asp-net-%eb%a7%88%ec%8a%a4%ed%84%b0%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%98%88%ec%a0%9c/" title="Permalink asp.net 마스터페이지 예제">Permalink</a></span> </div> <!--// Post Meta --> </article><!-- .share-buttons --> <div class="share-buttons"> <!-- Facebook Like Button --> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Google+ Button --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <span class="twitter"> <a href="http://twitter.com/share?url=http://unicommsolutions.com/asp-net-%eb%a7%88%ec%8a%a4%ed%84%b0%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%98%88%ec%a0%9c/&text=asp.net 마스터페이지 예제 - http://unicommsolutions.com/asp-net-%eb%a7%88%ec%8a%a4%ed%84%b0%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%98%88%ec%a0%9c/" class="twitter-share-button" data-count="horizontal">Tweet this article</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </span> <span class="facebook"><div id="fb-root"></div><div class="fb-like" data-href="http://unicommsolutions.com/asp-net-%eb%a7%88%ec%8a%a4%ed%84%b0%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%98%88%ec%a0%9c/" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div></span> <span class="google"><div class="g-plusone" data-size="medium" data-href="http://unicommsolutions.com/asp-net-%eb%a7%88%ec%8a%a4%ed%84%b0%ed%8e%98%ec%9d%b4%ec%a7%80-%ec%98%88%ec%a0%9c/"></div></span> <span class="pinterest"> <a href="javascript:void((function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img src='http://assets.pinterest.com/images/PinExt.png'/></a> </span> </div><!-- //.share-buttons --><div class="post-author clearfix"> <h3 class="post-author_h">Written by </h3> <p class="post-author_gravatar"><img alt='' src='http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=80' class='avatar avatar-80 photo avatar-default' height='80' width='80' /></p> <div class="post-author_desc"> <div class="post-author_link"> <p>View all posts by: </p> </div> </div> </div><!--.post-author--> <!-- BEGIN Comments --> <!-- If comments are closed. --> <p class="nocomments">Comments are closed.</p> </div> <div class="span4 sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php"> <div id="search-2" class="widget"><div class="search-form"> <form id="searchform" method="get" action="http://unicommsolutions.com" accept-charset="utf-8"> <input type="text" value="" name="s" id="s" class="search-form_it"> <input type="submit" value="search" id="search-submit" class="search-form_is btn btn-primary"> </form> </div></div> <div id="recent-posts-2" class="widget"> <h3>Recent Posts</h3> <ul> <li> <a href="http://unicommsolutions.com/%ed%95%9c%eb%82%98%eb%88%94-%ed%98%95%ed%83%9c%ec%86%8c-%eb%b6%84%ec%84%9d%ea%b8%b0-%ec%98%88%ec%a0%9c/" title="한나눔 형태소 분석기 예제">한나눔 형태소 분석기 예제</a> </li> <li> <a href="http://unicommsolutions.com/%ea%b2%b0%ec%82%b0-%ec%98%88%ec%a0%9c/" title="결산 예제">결산 예제</a> </li> <li> <a href="http://unicommsolutions.com/%ed%85%8c%ec%9d%bc%eb%9f%ac%ea%b8%89%ec%88%98-%ec%98%88%ec%a0%9c/" title="테일러급수 예제">테일러급수 예제</a> </li> <li> <a href="http://unicommsolutions.com/%eb%b0%98%ec%9d%91%ed%98%95-css-%ec%98%88%ec%a0%9c/" title="반응형 css 예제">반응형 css 예제</a> </li> <li> <a href="http://unicommsolutions.com/x%ed%94%8c%eb%9e%ab%ed%8f%bc-%ec%98%88%ec%a0%9c/" title="x플랫폼 예제">x플랫폼 예제</a> </li> </ul> </div><div id="recent-comments-2" class="widget"><h3>Recent Comments</h3><ul id="recentcomments"></ul></div><div id="archives-2" class="widget"><h3>Archives</h3> <ul> <li><a href='http://unicommsolutions.com/2019/08/' title='August 2019'>August 2019</a></li> <li><a href='http://unicommsolutions.com/2019/05/' title='May 2019'>May 2019</a></li> <li><a href='http://unicommsolutions.com/2019/02/' title='February 2019'>February 2019</a></li> <li><a href='http://unicommsolutions.com/2018/12/' title='December 2018'>December 2018</a></li> <li><a href='http://unicommsolutions.com/2018/07/' title='July 2018'>July 2018</a></li> <li><a href='http://unicommsolutions.com/2018/06/' title='June 2018'>June 2018</a></li> <li><a href='http://unicommsolutions.com/2018/04/' title='April 2018'>April 2018</a></li> </ul> </div><div id="categories-2" class="widget"><h3>Categories</h3> <ul> <li>No categories</li> </ul> </div><div id="meta-2" class="widget"><h3>Meta</h3> <ul> <li><a href="http://unicommsolutions.com/wp-login.php">Log in</a></li> <li><a href="http://unicommsolutions.com/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://unicommsolutions.com/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <footer class="motopress-wrapper footer"> <div class="container"> <div class="row"> <div class="span12" data-motopress-wrapper-file="wrapper/wrapper-footer.php" data-motopress-wrapper-type="footer"> <div class="footer-widgets"> <div class="row"> <div class="span3" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="footer-sidebar-1"> <div id="social_networks-3"> <!-- BEGIN SOCIAL NETWORKS --> <ul class="social social__row clearfix icons unstyled"> </ul> <!-- END SOCIAL NETWORKS --> </div> </div> <div class="span3" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="footer-sidebar-2"> </div> <div class="span3" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="footer-sidebar-3"> </div> <div class="span3" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="footer-sidebar-4"> </div> </div> </div> <div class="copyright"> <div class="row"> <div class="span4" data-motopress-type="static" data-motopress-static-file="static/static-footer-text.php"> <div id="footer-text" class="footer-text"> <a href="http://unicommsolutions.com/" title="" class="site-name">UNICOMMSOLUTIONS</a> © 2019 | <a href="http://unicommsolutions.com/privacy-policy/" title="Privacy Policy">Privacy Policy</a> </div> </div> <div class="span8" data-motopress-type="static" data-motopress-static-file="static/static-footer-nav.php"> <nav class="nav footer-nav"> <div class="menu"></div> </nav> </div> </div> </div> </div> </div> </div> </footer> <!--End #motopress-main--> </div> <div id="back-top-wrapper" class="visible-desktop"> <p id="back-top"> <a href="#top"><span></span></a> </p> </div> <script type='text/javascript' src='http://unicommsolutions.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.23'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = {"loaderUrl":"http:\/\/unicommsolutions.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ..."}; /* ]]> */ </script> <script type='text/javascript' src='http://unicommsolutions.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.3.2'></script> <script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201937'></script> <!-- this is used by many Wordpress features and for plugins to work properly --> </body> </html>