WebCamp

시삽: 레드플러스 님 
게시판 이동:
 제목 : 1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과 트렌드 소개
글번호: 2
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2015/02/17 오후 1:31:02
조회수: 3745

1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과 트렌드 소개


[1] Visual Studio 2013 도구 레벨
 - Visual Studio 2013 실행
  작업 표시줄의 아이콘을 바로 실행하려면?
  Windows + N
 - 시작 페이지 : 시작할 때 페이지 표시 체크/언체크
 - 프로젝트 생성 : ASP.NET 4.5 Web Forms
  C:\VisualStudio2013\WebVisualStudio2013
 - 색 테마 : 광원/어둡게
  도구-옵션-환경-일반
 - 빠른 실행?
  폰트 변경
  @키 입력하면 Menus, Options, ...
  Debug 입력하면 굉장히 많이 뜨는데 @opt Debug 입력하면 필요한 부분만 출력됨


[2] HTML 에디터 영역

 - Web Essentials 2013 설치
  좀 더 향상된 에디터 기능 제공
 - 큰따옴표 자동생성
  <div id=""
 - 박스 선택 : Alt+마우스왼쪽버튼드래그, Alt+Shift+방향키
  <div id=
  <div id=
 - 시작태그와 종료태그 한번에 수정 : h1, header, footer, ...
  <span id=""></div>
 - video, audio 태그 자동 완성 기능 : 코드 스니핏 사용
  <video 탭탭
 - 특정 영역(audio  태그 영역 등)을 웹 사용자 정의 컨트롤(ascx)로 내보내기
  해당 영역을 블록을 씌운 후 Extract to UserControl
  Extract to User Control로 특정 영역을 웹 사용자 정의 컨트롤로 분리하기
  Header와 Footer영역 만들기
 - Source 뷰가 기본(디자인 뷰는 너무 느림)
 - Source 뷰에서도 GridView의 스마트태그 를 통해서 디자인 모드에서 작업하던 기능을 구현할 수 있음
 - 버튼 컨트롤에 OnClick="" 만들려면 디자인뷰에 가서 더블클릭해야 함. 이를 소스뷰에서 변경 가능, <Create New Events>
 - View Page Inspector(페이지 검사기에서 보기)로 특정 영역이 어디에서 실행되는지 확인


[3] CSS 에디터 영역 1

 - color: # 까지 타이핑하면 -> 컬러픽커 출력
 - background: # -> 컬러픽커 : 이미 사용중인 색상이 왼쪽에 먼저 보여짐
  아래 화살표 키 더 누르면 컬러픽커와 색상 선택기가 나옴
  아이드롭퍼(Eyedropper Tool)로 색상 선택 가능
 - background 타이핑 대신에 baim 만 타이핑해도 background-image 선택해 줌
 - border-radius 대신 radius만 타이핑해도 됨
 - text-decoration 대신 tede 타이핑
 - border-radius 탭 키 누르면 여러 브라우저에 특화된 속성값 제공
  transform 탭
  벤더 지향 속성 중 부모 속성을 바꾸면 자식 속성도 바뀌나, 자식 속성 하나만 변경하면 해당 속성만 변경됨
 - Ctrl+K, Ctrl+C <-> Ctrl+K, U
 - Surround With: region
  코드 감싸기 Region 기능 제공
  /*#region name */ ~ /*#endregion */
  단축키 : Ctrl+K, Ctrl+S
 - 색상값 앞에 사각형으로 해당 색상값에 해당하는 색상 표시
 - 폰트 이름에 마우스 올리면, 크기별 모양 보여줌
 - 이미지 경로에 마우스 올리면 해당 이미지 보여줌
 - 특정 스타일속성명에 마우스 올리면 어떤 웹브라우저가 지원되는지 브라우저 아이콘 보여줌
 - 색상값에 커서 두고, 스마트태그를 사용해서 rgb, hsl 등의 색상으로 변경 가능


[4] CSS 에디터 영역 2

 - 이미지 경로에 스마트태그를 사용하여 이미지 자체를 Base64로 인코딩하여 텍스트로 CSS에 직접 입력 가능
 - 특정 벤더 브라우저 관련 속성이 따로 기재되어있지 않으면 스마트태그를 통해서 자동으로 만들어 줌
 - CSS 속성에 따른 정렬해서 보여줌
 - 메시지를 통해서 변경해야 하는 부분을 알려줌
 - 특정 .클래스 뒤에 나오는 태그 또는 또 다른 스타일을 자동으로 읽어서 보여줌
 - CSS - 마우스 오른쪽 버튼 - Web Essentisal - 중복 제거 등의 명령어 수행 가능
 - linear-gradient 탭 : 기본 코드 제공
 - @media 탭 : 미디어 쿼리 기본 모양 제공
 - @font-face 탭 : 폰트 지정 관련된 기본 속성 제공
 - @font-face 탭
  폰트로 base64 DataURI로 포함 가능
 - font-family: Pick from file...로 파일 선택 woff 파일 선택하면 ttf 파일도 포함되 내용 자동 생성
 - CSS Property List : http://realworldvalidator.com/css/properties


[5] JavaScrpt 에디터 영역

 - 타입에 대한 인텔리센스
  function sum(x, y) {
   /// <param name="x" type="Number">숫자</param>
   var s.
   var s = (x + y). <- 점 찍으면 숫자형 관련 인텔리센스 제공받음

   $("div"). <- jQuery 인텔리센스 제공
   $().html()<- 커서 두고 마우스 오른쪽 버튼에 [정의로 이동] 기능 사용 가능
  }
  sum( : 인텔리센스 제공
 - 배열에 대한 인텔리센스
  var arr = [1, "string", new Date()];
  for (var i = 0; i < arr.length: i++) {
   a[i]. -> Number;
    a[0], a[1], a[2]에 따라 달리 표시
  }
 - jQuery 인텔리센스
  $( -> 오버로드
  $("button").인텔리센스().인텔리센스()...
 - HTML 5 개체 제공
  new FileReader().
 - Paste JSON As classes
  JSON을 클래스로 변환 가능

 

 


 

추가적인 HOL은 WebCamps Training Kit 설치 후 아래 경로의 문서를 참고하시기 바립니다.

C:\WebCampsTK\HOL\VSWebTooling\HOL.htm

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 2. 최신 ASP.NET 기술로 웹 응용프로그램 만들기(One ASP.NET) - Administrator 2015-02-17 3425
현재글 1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과... - Administrator 2015-02-17 3745
  01._Web 개발자들을 위한 Visual Studio 2015 확장 및 업데이트 기... - Administrator 2015-03-13 3169
  Visual Studio로 웹 개발시 도움이 되는 Web Essentials 확장 기... - Administrator 2015-04-20 3453
  Visual Studio 2013 확장 기능 jQuery Code Snippets 소... - Administrator 2015-04-20 2897
  02_WebCamp 웹 프로젝트 생성 및 기본 페이지 작성 그리고 Test 및 Dat... - Administrator 2015-03-13 3114
  - Microsoft SQL Server Data Tools 2013 설치(데이터베이... - Administrator 2015-04-08 3064
  03_Nuget을 사용하여 프로젝트에 jQuery, Bootstrap, Angular... - Administrator 2015-03-13 3090
  (영어) NuGet 사용에 대한 좋은 소개 동영상 - Administrator 2015-04-08 3111
  발표자료: 1-Visual Studio 2013.pdf 1-Visual Studio 2013.pdf(1.00 MB) Administrator 2015-04-02 2962
다음글 0. WebCamp 2015 소개 MicrosoftWebCamp.jpg(51 KB) Administrator 2015-02-17 3623
관련 페이지 리스트
titlenamedateview
0. WebCamp 2015 소개 Administrator 2015-02-17 3623
0-Web Camp 2015 Keynote.pdf Administrator 2015-04-02 3074
Visual Studio Community 2013 소개 및 다운로드 그리고 설치 설... Administrator 2015-04-20 3143
Microsoft Azure - Azure Pass를 통한 Microsoft Azur... Administrator 2015-04-20 2954
WebCamp - 강의시 사용한 소스: DevCamp란 이름으로 Administrator 2015-08-12 2865
1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과... Administrator 2015-02-17 3745
01._Web 개발자들을 위한 Visual Studio 2015 확장 및 업데이트 기... Administrator 2015-03-13 3169
Visual Studio로 웹 개발시 도움이 되는 Web Essentials 확장 기... Administrator 2015-04-20 3453
Visual Studio 2013 확장 기능 jQuery Code Snippets 소... Administrator 2015-04-20 2897
02_WebCamp 웹 프로젝트 생성 및 기본 페이지 작성 그리고 Test 및 Dat... Administrator 2015-03-13 3114
- Microsoft SQL Server Data Tools 2013 설치(데이터베이... Administrator 2015-04-08 3064
03_Nuget을 사용하여 프로젝트에 jQuery, Bootstrap, Angular... Administrator 2015-03-13 3090
(영어) NuGet 사용에 대한 좋은 소개 동영상 Administrator 2015-04-08 3111
발표자료: 1-Visual Studio 2013.pdf Administrator 2015-04-02 2962
2. 최신 ASP.NET 기술로 웹 응용프로그램 만들기(One ASP.NET) Administrator 2015-02-17 3425
04. EF Scaffolding 기능을 사용하여 CRUD 기능 구현하기 Administrator 2015-03-15 2947
05. Micro ORM인 Dapper를 사용하여 데이터 조회하는 페이지 구현 Administrator 2015-03-15 3675
2-One ASP.NET.pdf Administrator 2015-04-02 2870
3. jQuery, AngularJS, Bootstrap 등을 활용한 모던 웹 클라이... Administrator 2015-02-17 3657
3-Modern Web Client Dev.pdf Administrator 2015-04-02 2747
4. REST와 Ajax를 위한 ASP.NET Web API Administrator 2015-02-17 3382
4-ASP.NET Web API.pdf Administrator 2015-04-02 3005
동영상 - Visual Studio 2015를 사용하여 초간단 Web API 만들고 ... Administrator 2015-04-10 2893
5. ASP.NET SignalR을 이용한 실시간 양방향 커뮤니케이션 구현 Administrator 2015-02-17 3347
실습: ASP.NET SignalR 초간단 채팅 만들기 Administrator 2015-03-08 3613
5-ASP.NET SignalR.pdf Administrator 2015-04-02 2867
6. Microsoft Azure Website에 웹 프로젝트 배포 및 관리 Administrator 2015-02-17 2967
6-Azure Website.pdf Administrator 2015-04-02 2841
(동영상) ASP.NET 웹 프로젝트 생성 후 Microsoft Azure 웹 앱에 ... Administrator 2015-04-21 2984
Azure WebApp 01: Microsoft 무료 Visual Studio Onl... Administrator 2015-05-14 3151
Azure WebApp 02: Azure에 웹앱 만들고 Visual Studio 20... Administrator 2015-05-14 3176
Azure WebApp 03: VSO와 Azure Web App을 함께 사용하기웹앱에... Administrator 2015-05-14 3026
Azure Web App 04: Azure Web App에 대한 환경 설정 소개하기 Administrator 2015-05-14 3082
Azure Web App 05: SQL Azure 데이터베이스 기반 Azure Web... Administrator 2015-05-14 3030
Azure 웹 앱 01: 01 Azure 웹 앱 처음으로 만들어 보기 Administrator 2016-01-13 3047
Azure 웹앱 02: 02 Azure 웹 앱을 오픈소스인 DNN Platform을 ... Administrator 2016-01-13 3231
7. 미니 프로젝트: Build, Deploy, Scale Administrator 2015-02-17 2833
7-Conclusion.pdf Administrator 2015-04-02 2989
1. 클래스 설계 : Maxim Administrator 2015-04-14 3016
2. EF Code First Administrator 2015-04-14 2831
3. MaximServiceRepository.cs Administrator 2015-04-14 2857
4. MaximServiceController.cs Administrator 2015-04-14 2781
5. ASP.NET Web API + jQuery: MaximCrudWithJavaS... Administrator 2015-04-14 3303
6. ASP.NET Web API + AngularJS + Bootstrap: Max... Administrator 2015-04-14 2979
8. 데모 소스 다운로드 링크 Administrator 2015-03-19 3228
데모 소스 실행 순서 Administrator 2015-06-03 2906
추천 경로 Administrator 2015-11-25 2834
ASP.NET 5 MVC 6 Administrator 2016-01-12 3024
ASP.NET 5 MVC6에서 제공하는 빈 템플릿을 사용하여 웹 사이트 만들고 실행하... Administrator 2016-01-12 2866
ASP.NET 5 MVC 6 빠르게 살펴보기 Administrator 2016-01-12 3682
SQL Server 데이터베이스 프로젝트 샘플: DotNetNote.Database Administrator 2016-01-20 3071
ASP.NET Core 1.0(ASP.NET 5) 게시판 및 데모 샘플 프로젝트: D... Administrator 2016-01-20 3306
Azure Camp 2018-08-24 Administrator 2018-08-20 2834
Azure HOL 2018-08-24 Administrator 2018-08-20 2627
Azure HOL Administrator 2018-10-08 2606
Azure Camp Slide Administrator 2018-10-08 2544
Azure Camp 20181211.pdf Administrator 2018-12-07 2644
Azure HOL 20181207.pdf Administrator 2018-12-07 2587
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home