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