3일차
3.1 부트스트랩 템플릿 프로젝트 반영하기
3.2 레이아웃(마스터) 및 컨텐츠 페이지 구성하기
3.3 컨텐츠 및 입력폼 페이지 구성하기
3.4 부트스트랩 기본 사용법
3.5 로컬 웹서버 설치 및 사용법
3일차 강의를 시작하겠습니다.
3일차 강의는 이전 강의에서 Visual Studio 2015 개발툴을 이용해 만들어둔 홈페이지 솔루션 및 ASP.NET MVC5 웹프로젝트와
기 제공된 부트스트랩 테마 템플릿을 이용해 반응형 템플릿(html)소스를 실제 ASP.NET MVC 프로젝트로 이관하는 작업을 진행합니다.
사전 준비사항을 먼저 체크하겠습니다.
Step1.홈페이지 솔루션 및 ASP.NET MVC5 웹프로젝트 준비
2일차 4강 VisualStudio 2015 개발툴 사용법 강의내용을 참고하여 Visual Studio 2015를 이용해 여러분의 홈페이지 솔루션 과 ASP.NET MVC5 웹프로젝트를 만드세요.
http://mixedcode.com/Article/Index?aidx=1066
Step2. 실습용 부트스트랩 템플릿 다운로드
-아래 링크를 이용해 실습용 템플릿을 다운로드합니다.
** 해당 템플릿은 개당 10달러를 주고 구매한 템플릿으로 실습용도로만 사용하시고 절대 상용서비스를 해서는안됩니다. **
http://mixedcode.com/upload/board/html.zip
Step3. 템플릿 리소스 폴더 MVC프로젝트로 옮기기
-html 템플릿 폴더내 assets 폴더는 템플릿내 html에서 사용하는 각종 리소스(css,js,images...)이 있는 폴더이며
이폴더 구조 및 관련파일들은 ASP.NET MVC 프로젝트에서도 그대로 사용할 예정입니다.
-윈도우 탐색기에서 assets폴더를 복사한후 VisualStudio 솔루션 탐색기내에 EddyHomePage웹프로젝트를
선택하고 오른쪽 마우스 클릭 붙여넣기를 실시합니다.
-assets폴더가 EddyHomePage프로젝트에 붙여넣기가 완료되었으나 assets폴더내에 존재하는 하위폴더나 파일들까지 모두 프로젝트에 추가하려면 솔루션 탐색기 상단에 아이콘중 모든파일표시 아이콘을 클릭하여 assets폴더내에 존재하는 폴더 및 파일을 개발툴에서 먼저 볼일수있게합니다.
-솔루션 탐색기 assets 하위폴더를 선택하고 오른쪽마우스 클릭 프로젝트에 포함을 클릭하여 html에 관련된 모든 Resource 파일들을 ASP.NET MVC 프로젝트에서 사용 및 인식이 가능하도록 모두추가하여줍니다.
Step4.메인페이지 구조 파악하기
-html 템플릿 폴더내에 메인페이지인 index.html페이지를 Visual Studio로 열어 메인페이지의 구조를 확인합니다.
-비쥬얼스튜디오에서 열린 index.html 페이지의 구조를 분석하기위해 index.html페이지 탭의 좌측 태그트리노드를 닫아보면 크게 아래와 같이 주요 태그로 구성되어 있는것을 확인할수 있습니다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<div class="content-wrap"></div>
<footer></footer>
<script></script>
....
</body>
</html>
-일반적으로 하나의 웹페이지는 공통적으로 보여지는 마스터 페이지영역(상단메뉴/좌측메뉴/풋터) 과 실제 컨텐츠
내용이 보여지는 컨텐츠 영역으로 나뉘어 구성되어지며 두 영역이 하나로 합쳐진 html페이지가 사용자 브라우저에 전달됩니다.
메인 페이지의 마스터(레이아웃)화면영역과 컨텐츠(메인페이지) 페이지를 소스에서 구분하고 구분된 html소스코드중에서 공통적으로
사용되는 마스터(레이아웃) 영역 html소스를 이용하여 먼저 ASP.NET MVC의 레이아웃뷰 페이지를 만들고 실제 컨텐츠 페이지인
메인페이지소스를 이용하여 컨텐츠뷰를 만들어야합니다.
레이아웃뷰 페이지는 한번 만들면 대부분의 컨텐츠페이지에서 공통적으로 사용되기때문에 한개를 만들어 재사용하기 위한 용도로
대부분의 웹프로그램밍에서 공통적으로 지원하는 기능입니다.
Step5.ASP.NET MVC 레이아웃 페이지 기본 구성하기
-2일차 5강내용중 레이아웃 페이지 추가하기 기능을 이용하여 _TestLayoutPage.cshtml MVC5 레이아웃 페이지(Razor)를 Shared폴더에 생성합니다.
http://mixedcode.com/Article/Index?aidx=1067
-index.html소스중에 레이아웃 소스를 모두 복사하여 _TestLayoutPage.cshtml 페이지에 붙여넣습니다.
- <div class="content-wrap"></div> 메인 페이지 컨텐츠 영역을 제외한 모든 html소스가 레이아웃 영역소스입니다.
- 레이아웃 페이지내에 컨텐츠 영역이 표기될 위치에는 @RenderBody() 태그를 넣어 컨텐츠가 표기될수 있게합니다.
- <head>태그내 <title>태그안에는 "Gridus vCard | Home" 문구대신 @ViewBag.Title 태그를 넣어 페이지 제목이 표기될수 있게합니다.
- 각종 외부 참조 CSS파일 및 자바스크립트 파일의 경로를 루트상대경로로 수정해줍니다.
href="assets/..." ==> ="/assets/..." src="assets/..." ==> src="/assets/..."
Step6.메인 컨텐츠 페이지 구성하기
-2일차 5강내용중 Test컨트롤러 만들기 및 컨텐츠뷰 만들기를 이용하여 메인 컨텐츠뷰 페이지를 만듭니다.
http://mixedcode.com/Article/Index?aidx=1067
-저는 Controllers폴더에 TestController를 하나만들고 디폴트로 생성되어있는 Index 액션메소드에 오른쪽마우스클릭 뷰추가를
클릭하여 레이아웃페이지를 _TestLayoutPage로 선택한후 컨텐츠뷰를 만들었습니다.
-솔루션 탐색기내 웹프로젝트의Views폴더아래 Test폴더(컨트롤러폴더)아래 index.cshtml 메인 컨텐츠뷰가 생성된것을 확인할수 있습니다.
-index.cshtml 메인 컨텐츠뷰에 index.html페이지의 소스중 <div class="content-wrap"></div> 메인 페이지 컨텐츠 영역소스를 복사하여
붙여넣습니다.
Step7.빌드 및 디버깅하기
-지금까지 작업한 내용을 저장하고 솔루션탐색기의 솔루션명에 오른쪽 마우스 클릭 솔루션 빌드를 클릭하여 지금까지 작업한
내용을 개발산출물에 반영합니다.
-웹프로젝트의 Views폴더아래 Test폴더(컨트롤러폴더)아래 index.cshtml를 선택한 후 F5를 눌러 해당 페이지를 디버깅모드로 실행합니다.
정상적으로 /Test/Index경로로 해당 레이아웃 페이지와 함께 메인페이지가 나타나면 레이아웃 페이지뷰 및 메인 컨텐츠뷰 페이지
구성이 완료된것입니다.
Step8. ASP.NET MVC 레이아웃 페이지 상세 구성하기
-_TestLayoutPage.cshtml 레이아웃 페이지 소스중에 상단 대메뉴영역인 Main Navigation <ul>태그내 <li>태그중 home 링크태그 연결정보를 와 같이 변경합니다.
<a href="/Test/Index" class="hvr-sweep-to-bottom"><i class="flaticon-insignia"></i><span>home</span></a>
홈이미지를 클릭하면 TestController의 Index액션메소드가 호출되고 액션메소드는 결과물로 Index.cshtml 페이지와 _TestLayoutPage.cshtml레이아웃페이지가 합쳐진
결과물이 브라우저로 전달됩니다.
-레이아웃 페이지의 스타일시트 외부링크정보와 자바스크립트 링크 정보를 App_Start\BundleConfig.cs 클래스 파일을 통해 프로그래밍으로 환경설정할수 있게 변경합니다.
-먼저 홈페이지에서 사용되는 스타일시트 파일에 대한 환경설정을 BundleConfig.cs파일내에
StyleBundle 클래스를 이용해 키명을 "~/eddyhome/css" 하여 관련 스트일시트 파일의 경로정보를 세팅합니다.
bundles.Add(new StyleBundle("~/eddyhome/css").Include(
"~/assets/vendor/bootstrap/css/bootstrap.min.css",
"~/assets/vendor/fontawesome/css/font-awesome.min.css",
"~/assets/vendor/flaticons/flaticon.css",
"~/assets/vendor/hover/css/hover-min.css",
"~/assets/vendor/wow/animate.css",
"~/assets/vendor/mfp/css/magnific-popup.css",
"~/assets/custom/css/style.css"));
- 각종 홈페이지 관련 스크립트파일을 ScriptBundle클래스를 이용해 키명을 "~/eddyhome/js" 로하여 관련 스크립트
파일들의 경로정보를 세팅합니다.
bundles.Add(new ScriptBundle("~/eddyhome/js").Include(
"~/assets/vendor/jquery/js/jquery-2.2.0.min.js",
"~/assets/vendor/bootstrap/js/bootstrap.min.js",
"~/assets/vendor/imagesloaded/js/imagesloaded.pkgd.min.js",
"~/assets/vendor/isotope/js/isotope.pkgd.min.js",
"~/assets/vendor/mfp/js/jquery.magnific-popup.min.js",
"~/assets/vendor/circle-progress/circle-progress.js",
"~/assets/vendor/waypoints/waypoints.min.js",
"~/assets/vendor/anicounter/jquery.counterup.min.js",
"~/assets/vendor/wow/wow.min.js",
"~/assets/vendor/pjax/jquery.pjax.js",
"https://maps.google.com/maps/api/js",
"~/assets/custom/js/custom.js"
));
-기존에 있던 설정정보들은 모두삭제하고 홈페이지 관련 리소스정보만 기재합니다.
-BundleConfig파일에 정의된 스타일과 스크립트 정보는 레이아웃 페이지에서 아래와 같은 방법으로
프로그래밍적으로 참조를 추가할수 있습니다.
--스타일 키명으로 참조
@Styles.Render("~/eddyhome/css")
-스크립트 키명으로 참조
@Scripts.Render("~/eddyhome/js")
-레이아웃페이지에 직접 참조되어있던 모든 링크정보는 삭제하고 상기와 같이 @Styles.Render 와 @Scripts.Render코드를
이용하여 레이아웃 페이지 해당 위치에 관련 외부파일들을 참조추가합니다.
Step9. 웹 프로젝트의 시작 페이지 설정하기
-웹 사이트가 시작되는 처음 페이지를 App_Start\ RouteConfig.cs 파일을 통해 설정할수 있습니다.
-페이지를 지정하지 않고 도메인만을 입력했을때 첫페이지로 나타나는 컨트롤러의 액션메소드를 지정합니다.
-아래코드는 TestController의 Index 액션메소드를 지정하여 초기페이지를 세팅한경우입니다.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Test", action = "Index", id = UrlParameter.Optional }
);
Step10.입력폼 화면 구성하기
-이제는 사용자로부터 데이터를 입력받는 입력폼 화면을 동일한 방식으로 옮겨보겠습니다.
-해당화면을 만들어낼 TestController컨트롤러부터 솔루션탐색기에서 선택하시고 Feedback 이란 이름으로 액션메소드를 하나 추가합니다.
-Feedback 액션메소드에 오른쪽 마우스 클릭 뷰추가하면 이미 레이아웃페이지가 선택되어 있을거구요. 
-추가 버튼을 클릭하면 Views\Test\Feedback.cshtml 뷰 페이지가 생성됩니다. 
-Feedback.cshtml 뷰페이지를 열어 html소스중에 feedback.html 소스내의 컨텐츠 영역을 복사하여 붙여넣습니다.
-TestLayoutPage 레이아웃 페이지를 열어 Feedback 대메뉴의 링크정보를 "/Test/Feedback" 로 변경해주고 F5를 눌러 디버깅모드로 화면을 띠워 관련내용을 확인합니다.
여기까지 레이아웃 페이지를 구성하고 Controller의 액션메소드를 이용해 컨텐츠뷰를 구성하는 방법을 익혀보았습니다.
위 내용을 간략히 다시 정리해보면 모든 웹페이지는 하나의 HTML문서(HTML DOM)로 구성되어 있으며 하나의 HTML문서는 대부분 공통적인 영역인 마스터(레이아웃)페이지 영역과 컨텐츠페이지 영역으로 나뉘어 구성되어 있습니다.
모든 HTML문서에 공통영역을 중복하여 각각의 HTML문서를 구성하는것은 유지보수 및 관리상에 불편함이 많으므로 별도의 마스터(레이아웃)페이지로 뺴내서 구성하고
이 하나의 마스터(레이아웃)페이지 소스를 재사용하여 개발생산성 및 효율성을 높입니다.
컨텐츠 페이지를 구성할때는 컨텐츠내용만 구성하고 상단에 관련 마스터(레이아웃)페이지를 선택하여 사용자 브라우저에 제공될때는 하나의 완전한 페이지로 제공될수 있게합니다.
레이아웃 페이지는 Views\Shared 폴더에서 MVC5 레이아웃 페이지(Razor)를 이용 추가할수있고 각각의 컨텐츠 페이지는 컨트롤러의 액션메소드를 먼저 생성하고
해당 액션메소드를 이용 컨텐츠 페이지를 만듭니다. 컨텐츠 뷰는 Views폴더내 컨트롤러 관련 뷰들이 모여있는 컨트롤러 뷰폴더안에 자동생성됩니다.
각각의 뷰 페이지에 HTML소스를 붙여넣기하여 쉽게 HTML소스에서 MVC5 뷰페이지로 HTML소스를 이관할수 있었습니다.
이 작업을 반복적으로 해보면 사실 HTML,CSS,JAVASCRIPT,C#,MVC5등의 개념이 중요한게 아닌 만들어 내는 패턴만 알아도 쉽게 개발이 가능하다는것을 느끼실수 있을거라 판단됩니다.
현대적인 개발환경은 일반인 및 개발 비전문가들 에게도 개발하는 패턴만 알면 쉽게 어플리케이션을 개발할수 있게 진화하고 있습니다.
처음에는 패턴을 익혀 개발환경에 익숙해지고난 후 조금 복잡한 기능이나 자세한 개발스킬을 익히시고 싶으시면 그때부터 코딩공부를 하셔도 좋을듯합니다.
다음강의에서는 부트스트랩 프레임워크 와 템플릿을 활용하는 방법을 조금 알아보고 로컬 IIS 웹서버를 각자 설치하고 지금까지 개발한 정적컨텐츠 개발산출물을
로컬 웹서버에 배포하는것을 실습하여 실제 웹서버에서 이루어지는 개발산출물의 배포작업을 사전 연습 해보도록하겠습니다.
이번강의는 될때까지 무한 반복해보세요.
전체 커리큘럼에서 이번강의는 다음의 DB프로그램밍과 함께 핵심강의내용중에 하나입니다.
수고많으셨습니다.
adeliNB on 2/19/2022 5:33:30 AM
Осуществляя импорт, мы не только осуществляем перевозку грузов из Поднебесной, но и принимаем участие в таможенном оформлении https://ved-line.ru как юридическое лицо являющееся контрактодержателем с инопартнерами, что придает нам уверенность в безопасности цепи поставок «под ключ». Миссия нашей компании: приносить пользу, благодаря оптимизации расходов. Наш идеал: стать внешнеторговой компанией, вносящей инновации в глобальный бизнес.
BymnIR on 2/7/2022 10:40:34 AM
Таможенный декларант https://ved-line.ru
BymnIR on 1/20/2022 9:26:23 PM
Таможенное оформление из Кореи https://ved-line.ru
Apoft on 6/22/2021 1:55:50 PM
Авто, мото и спецтехника со стоянок и аукционов Японии. Отправка с портов Отару, Фусики и Ниигата, таможенное оформление физ. лиц и юр. лиц. Тел +79910690694 WhatsApp
Apoft on 6/19/2021 9:34:17 PM
Автомобили и мототехника, спец техника и водная техника со стоянок и аукционов Японии. Таможенное оформление физических лиц и юридических лиц. Тел +79910690694 WhatsApp
김철수 on 9/6/2019 10:56:34 PM
강의 너무 잘 보았습니다.
이 글을 올려 놓을 당시에 믹스드 코드를 알았다면 반드시 오프라인 강좌에 참석했을 듯 합니다.
감사합니다.
ㅇ on 10/25/2017 3:41:52 PM
ㄴ