WebCamp

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

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 2165
현재글 1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과... - Administrator 2015-02-17 2422
  01._Web 개발자들을 위한 Visual Studio 2015 확장 및 업데이트 기... - Administrator 2015-03-13 1929
  Visual Studio로 웹 개발시 도움이 되는 Web Essentials 확장 기... - Administrator 2015-04-20 2216
  Visual Studio 2013 확장 기능 jQuery Code Snippets 소... - Administrator 2015-04-20 1685
  02_WebCamp 웹 프로젝트 생성 및 기본 페이지 작성 그리고 Test 및 Dat... - Administrator 2015-03-13 1856
  - Microsoft SQL Server Data Tools 2013 설치(데이터베이... - Administrator 2015-04-08 1853
  03_Nuget을 사용하여 프로젝트에 jQuery, Bootstrap, Angular... - Administrator 2015-03-13 1841
  (영어) NuGet 사용에 대한 좋은 소개 동영상 - Administrator 2015-04-08 1886
  발표자료: 1-Visual Studio 2013.pdf 1-Visual Studio 2013.pdf(1.00 MB) Administrator 2015-04-02 1756
다음글 0. WebCamp 2015 소개 MicrosoftWebCamp.jpg(51 KB) Administrator 2015-02-17 2322
관련 페이지 리스트
titlenamedateview
0. WebCamp 2015 소개 Administrator 2015-02-17 2322
0-Web Camp 2015 Keynote.pdf Administrator 2015-04-02 1902
Visual Studio Community 2013 소개 및 다운로드 그리고 설치 설... Administrator 2015-04-20 1888
Microsoft Azure - Azure Pass를 통한 Microsoft Azur... Administrator 2015-04-20 1735
WebCamp - 강의시 사용한 소스: DevCamp란 이름으로 Administrator 2015-08-12 1658
1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과... Administrator 2015-02-17 2422
01._Web 개발자들을 위한 Visual Studio 2015 확장 및 업데이트 기... Administrator 2015-03-13 1929
Visual Studio로 웹 개발시 도움이 되는 Web Essentials 확장 기... Administrator 2015-04-20 2216
Visual Studio 2013 확장 기능 jQuery Code Snippets 소... Administrator 2015-04-20 1685
02_WebCamp 웹 프로젝트 생성 및 기본 페이지 작성 그리고 Test 및 Dat... Administrator 2015-03-13 1856
- Microsoft SQL Server Data Tools 2013 설치(데이터베이... Administrator 2015-04-08 1853
03_Nuget을 사용하여 프로젝트에 jQuery, Bootstrap, Angular... Administrator 2015-03-13 1841
(영어) NuGet 사용에 대한 좋은 소개 동영상 Administrator 2015-04-08 1886
발표자료: 1-Visual Studio 2013.pdf Administrator 2015-04-02 1756
2. 최신 ASP.NET 기술로 웹 응용프로그램 만들기(One ASP.NET) Administrator 2015-02-17 2165
04. EF Scaffolding 기능을 사용하여 CRUD 기능 구현하기 Administrator 2015-03-15 1734
05. Micro ORM인 Dapper를 사용하여 데이터 조회하는 페이지 구현 Administrator 2015-03-15 2330
2-One ASP.NET.pdf Administrator 2015-04-02 1703
3. jQuery, AngularJS, Bootstrap 등을 활용한 모던 웹 클라이... Administrator 2015-02-17 2396
3-Modern Web Client Dev.pdf Administrator 2015-04-02 1569
4. REST와 Ajax를 위한 ASP.NET Web API Administrator 2015-02-17 2102
4-ASP.NET Web API.pdf Administrator 2015-04-02 1834
동영상 - Visual Studio 2015를 사용하여 초간단 Web API 만들고 ... Administrator 2015-04-10 1726
5. ASP.NET SignalR을 이용한 실시간 양방향 커뮤니케이션 구현 Administrator 2015-02-17 2072
실습: ASP.NET SignalR 초간단 채팅 만들기 Administrator 2015-03-08 2329
5-ASP.NET SignalR.pdf Administrator 2015-04-02 1671
6. Microsoft Azure Website에 웹 프로젝트 배포 및 관리 Administrator 2015-02-17 1732
6-Azure Website.pdf Administrator 2015-04-02 1653
(동영상) ASP.NET 웹 프로젝트 생성 후 Microsoft Azure 웹 앱에 ... Administrator 2015-04-21 1714
Azure WebApp 01: Microsoft 무료 Visual Studio Onl... Administrator 2015-05-14 1832
Azure WebApp 02: Azure에 웹앱 만들고 Visual Studio 20... Administrator 2015-05-14 1881
Azure WebApp 03: VSO와 Azure Web App을 함께 사용하기웹앱에... Administrator 2015-05-14 1816
Azure Web App 04: Azure Web App에 대한 환경 설정 소개하기 Administrator 2015-05-14 1812
Azure Web App 05: SQL Azure 데이터베이스 기반 Azure Web... Administrator 2015-05-14 1799
Azure 웹 앱 01: 01 Azure 웹 앱 처음으로 만들어 보기 Administrator 2016-01-13 1812
Azure 웹앱 02: 02 Azure 웹 앱을 오픈소스인 DNN Platform을 ... Administrator 2016-01-13 1925
7. 미니 프로젝트: Build, Deploy, Scale Administrator 2015-02-17 1642
7-Conclusion.pdf Administrator 2015-04-02 1801
1. 클래스 설계 : Maxim Administrator 2015-04-14 1824
2. EF Code First Administrator 2015-04-14 1616
3. MaximServiceRepository.cs Administrator 2015-04-14 1645
4. MaximServiceController.cs Administrator 2015-04-14 1610
5. ASP.NET Web API + jQuery: MaximCrudWithJavaS... Administrator 2015-04-14 1899
6. ASP.NET Web API + AngularJS + Bootstrap: Max... Administrator 2015-04-14 1741
8. 데모 소스 다운로드 링크 Administrator 2015-03-19 1958
데모 소스 실행 순서 Administrator 2015-06-03 1713
추천 경로 Administrator 2015-11-25 1677
ASP.NET 5 MVC 6 Administrator 2016-01-12 1798
ASP.NET 5 MVC6에서 제공하는 빈 템플릿을 사용하여 웹 사이트 만들고 실행하... Administrator 2016-01-12 1642
ASP.NET 5 MVC 6 빠르게 살펴보기 Administrator 2016-01-12 2372
SQL Server 데이터베이스 프로젝트 샘플: DotNetNote.Database Administrator 2016-01-20 1833
ASP.NET Core 1.0(ASP.NET 5) 게시판 및 데모 샘플 프로젝트: D... Administrator 2016-01-20 1923
Azure Camp 2018-08-24 Administrator 2018-08-20 1636
Azure HOL 2018-08-24 Administrator 2018-08-20 1436
Azure HOL Administrator 2018-10-08 1457
Azure Camp Slide Administrator 2018-10-08 1358
Azure Camp 20181211.pdf Administrator 2018-12-07 1461
Azure HOL 20181207.pdf Administrator 2018-12-07 1416
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home