연습: 새 ASP.NET 웹 사이트 만들기
업데이트: 2007년 11월
이 연습에서는 Microsoft Visual Web Developer Express Edition 및 Microsoft Visual Studio 2008의 웹 개발 기능을 소개하고 간단한 페이지를 만드는 과정을 보여 줍니다. 또한 이 연습에서는 WYSIWYG 비주얼 디자이너에 대해서도 설명합니다.
이 연습에서 수행할 작업은 다음과 같습니다.
파일 시스템 웹 사이트 만들기
Visual Web Developer 익히기
ASP.NET Development ServerVisual Web Developer의 웹 서버를 사용하여 페이지 실행
사전 요구 사항
이 연습을 완료하려면 다음이 필요합니다.
- Microsoft Visual Studio 2008 또는 Microsoft Visual Web Developer Express Edition. 다운로드 정보는 Visual Studio Development Center 웹 사이트를 참조하십시오.
웹 사이트 및 페이지 만들기
연습의 첫 번째 부분에서는 기본 페이지가 포함된 ASP.NET 웹 사이트를 만듭니다. 이 웹 사이트는 Microsoft IIS(인터넷 정보 서비스)가 필요가 없는 파일 시스템 웹 사이트가 됩니다. 이를 통해 컴퓨터의 로컬 파일 시스템에서 페이지를 만들고 실행할 수 있습니다.
파일 시스템 웹 사이트는 페이지와 기타 파일을 로컬 컴퓨터에서 선택하는 폴더에 저장하는 사이트입니다. 다른 웹 사이트 옵션으로는 파일을 로컬 IIS 루트(일반적으로 \Inetpub\wwwroot\)의 하위 폴터에 저장하는 로컬 IIS 웹 사이트가 있습니다. FTP 사이트는 FTP(파일 전송 프로토콜)를 사용하여 액세스하는 원격 서버에 파일을 저장합니다. 원격 사이트는 로컬 네트워크를 통해 액세스할 수 있는 원격 서버에 파일을 저장합니다. 자세한 내용은 연습: Visual Web Developer에서 FTP를 사용하여 웹 사이트 편집을 참조하십시오.
.gif "참고") 참고: |
|---|
또한 웹 응용 프로그램 프로젝트를 사용하여 웹 사이트를 만들 수도 있습니다. 자세한 내용은 웹 응용 프로그램 프로젝트 개요를 참조하십시오. |
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새 웹 사이트를 클릭합니다.
다음 그림과 같은 새 웹 사이트 대화 상자가 표시됩니다.
.gif)
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어 폴더 이름 C:\Tasks를 입력합니다.
언어 목록에서 Visual Basic 또는 Visual C#을 클릭하여 웹 프로젝트 전체에서 사용할 프로그래밍 언어를 선택합니다.
참고:이 연습에서는 프로그램 코드를 작성하지 않습니다.
확인을 클릭합니다.
Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지를 만듭니다. 새 페이지가 만들어지면 기본적으로 Visual Web Developer의 소스 뷰에 페이지가 표시되고 여기서 페이지의 HTML 요소를 볼 수 있습니다. 다음 그림에서는 소스 뷰의 기본 웹 페이지를 보여 줍니다.
.gif)
Visual Web Developer 둘러보기
계속하기 전에 Visual Web Developer 개발 환경에 대해 자세히 알아보는 것이 좋습니다. 다음 그림에서는 Visual Web Developer의 일부 창과 도구를 보여 줍니다.
Visual Web Developer 환경 다이어그램
.gif)
앞의 그림에 있는 텍스트와 다음 목록을 비교해 봅니다. 이 목록에서는 가장 일반적으로 사용하는 창 및 도구에 대해 설명합니다. 이 목록에는 그림에 있는 창과 도구 모두가 아니라 앞의 그림에서 표시된 것만 나열됩니다.
도구 모음. 텍스트 서식 지정, 텍스트 찾기 등을 위한 명령이 있습니다. 일부 도구 모음은 디자인 뷰에서 작업하는 경우에만 사용할 수 있습니다.
솔루션 탐색기. 웹 사이트에 파일과 폴더를 표시합니다.
문서 창. 작업하는 문서를 탭 창에 표시합니다. 탭을 클릭하여 문서 간에 전환할 수 있습니다.
뷰 탭. 같은 문서의 다른 뷰를 표시합니다. 디자인 뷰는 WYSIWYG에 가까운 편집 화면입니다. 소스 뷰는 태그가 표시되는 페이지의 편집기입니다. 분할 뷰에는 문서에 대한 디자인 뷰와 소스 뷰가 모두 표시됩니다. 이 연습의 뒷부분에서는 디자인 뷰와 소스 뷰를 사용합니다. 웹 페이지를 디자인 뷰에서 열려는 경우 도구 메뉴에서 옵션을 클릭하고 HTML 디자이너 노드를 선택한 다음 시작 페이지 옵션을 변경합니다.
속성 창. 페이지, HTML 요소, 컨트롤 및 기타 개체의 설정을 변경할 수 있습니다.
CSS 속성 창. 디자인 뷰가 활성화되어 있을 때 현재 CSS 스타일을 표시합니다.
스타일 관리 및 스타일 적용 창. 웹 사이트의 CSS 스타일을 제어하는 데 활용합니다.
도구 상자. 페이지로 끌어 올 수 있는 컨트롤과 HTML 요소를 제공합니다. 도구 상자 요소는 공통 기능에 따라 그룹화됩니다.
데이터베이스 탐색기. 데이터베이스 연결을 표시합니다. Visual Web Developer에 데이터베이스 탐색기 창이 표시되지 않으면 보기 메뉴에서 다른 창을 클릭한 다음 데이터베이스 탐색기를 클릭합니다.
참고:Visual Web Developer의 데이터베이스 탐색기 창 이름이 정식 버전의 Visual Studio에서는 서버 탐색기로 지정됩니다.
필요에 맞게 창을 다시 정렬하고 크기를 조정하고, 도킹할 수 있습니다. 보기 메뉴를 사용하여 추가 창을 표시할 수 있습니다.
개발 환경을 둘러보려면
보기 메뉴에서 도구 모음을 클릭합니다.
사용 가능한 도구 모음의 하위 메뉴가 표시됩니다. 현재 선택되어 있는 도구 모음이 나타나고 도구 모음 선택 항목 옆에 확인란이 표시됩니다.
도구 모음 목록의 맨 아래로 스크롤하고 사용자 지정을 클릭합니다.
사용자 지정 대화 상자가 표시됩니다.
사용 가능한 도구 모음을 검토합니다. 검토가 완료되면 닫기를 클릭합니다.
보기 메뉴에서 솔루션 탐색기를 클릭합니다.
솔루션 탐색기 창이 표시됩니다. 기본적으로 이 창은 Visual Web Developer 환경의 한쪽에 도킹됩니다.
솔루션 탐색기에서 사이트 목록의 최상위 항목을 마우스 오른쪽 단추로 클릭합니다.
공통 웹 사이트 작업의 바로 가기 메뉴가 표시됩니다.
Esc 키를 눌러 바로 가기 메뉴를 닫습니다.
솔루션 탐색기에서 Web.config 파일을 마우스 오른쪽 단추로 클릭한 다음 열기를 클릭하여 문서 창에서 파일을 엽니다.
Default.aspx 페이지를 두 번 클릭하여 페이지를 문서 창에서 엽니다. 파일을 두 번 클릭하는 대신 바로 가기 메뉴의 열기 명령을 사용해도 됩니다.
문서 창의 맨 위에 있는 탭에 열려 있는 각 페이지의 이름이 표시됩니다.
문서 창의 아래쪽에서 분할을 클릭하여 소스 뷰와 디자인 뷰를 동시에 표시합니다.
보기 메뉴에서 속성 창을 클릭합니다.
속성 창이 표시됩니다.
문서 창에서 개체를 선택하면 속성 창에 선택한 개체의 속성이 표시됩니다.
소스 뷰 창에서 form 요소를 선택한 다음 속성 창에서 사용 가능한 속성을 검토합니다.
보기 메뉴에서 도구 상자를 클릭합니다.
도구 상자 창이 표시됩니다.
디자인 뷰에 있는 도구 상자의 표준 탭에서 Button 컨트롤을 문서로 끌어 와 div 요소에 놓습니다.
소스 뷰가 적절한 태그로 업데이트됩니다.
보기 메뉴에서 데이터베이스 탐색기를 클릭합니다.
데이터베이스 탐색기 창이 표시됩니다.
참고:Visual Web Developer의 데이터베이스 탐색기 창 이름이 정식 버전의 Visual Studio에서는 서버 탐색기로 지정됩니다.
데이터 연결을 마우스 오른쪽 단추로 클릭하여 사용 가능한 데이터베이스 옵션을 확인합니다.
ASP.NET 웹 페이지 만들기
새 웹 사이트를 만들면 Visual Web Developer에서 Default.aspx라는 ASP.NET 웹 페이지(Web Forms 페이지)를 추가합니다. Default.aspx 페이지는 웹 사이트의 홈 페이지로 사용할 수 있습니다. 하지만 이 연습에서는 새 페이지를 만들고 이 페이지에서 작업합니다.
웹 사이트에 페이지를 추가하려면
문서 창에서 Default.aspx 페이지에 대한 탭을 마우스 오른쪽 단추로 클릭한 다음 닫기를 클릭합니다.
변경 내용을 저장할 것인지 묻는 메시지가 표시되면 아니요를 클릭합니다.
솔루션 탐색기에서 마우스 오른쪽 단추로 C:\Tasks와 같은 웹 사이트를 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 Home.aspx를 입력합니다.
언어 목록에서 Visual Basic, C# 등의 프로그래밍 언어 중 사용할 언어를 선택합니다.
다른 파일에 코드 입력 확인란의 선택을 취소합니다.
다음 그림에서는 새 항목 추가 대화 상자를 보여 줍니다.
.gif)
추가를 클릭합니다.
Visual Web Developer에서 새 페이지를 만듭니다. 기본적으로 이 페이지는 소스 뷰에 표시됩니다.
페이지에 HTML 추가
이 연습 부분에서는 페이지에 정적 텍스트를 추가합니다.
페이지에 텍스트를 추가하려면
문서 창의 아래쪽에서 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.
페이지에 To-Do List를 입력합니다.
페이지 실행
계속하기 전에 페이지를 테스트할 수 있습니다. 페이지를 실행하려면 웹 서버가 필요합니다. 프로덕션 웹 사이트에서는 IIS를 웹 서버로 사용합니다. 하지만 페이지를 테스트할 때는 로컬로 실행되며 IIS가 필요 없고 ASP.NET Development Server를 사용할 수 있습니다. 파일 시스템 웹 사이트의 경우 Visual Web Developer의 기본 웹 서버가 ASP.NET Development Server입니다.
페이지를 실행하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
Visual Web Developer에서 ASP.NET Development Server를 시작합니다. 다음 그림에서처럼 Visual Web Developer 웹 서버가 실행되고 있음을 나타내는 아이콘이 Windows 도구 모음에 표시됩니다.
.gif)
페이지가 브라우저에 표시됩니다. 만든 페이지의 확장자가 .aspx이지만 지금은 HTML 페이지처럼 실행됩니다.
참고:브라우저에 페이지를 표시할 수 없다는 오류나 502 오류가 표시되면 로컬 요청에 대해 프록시 서버를 사용하지 않도록 브라우저를 구성해야 할 수도 있습니다. 자세한 내용은 방법: 로컬 웹 요청에 대해 프록시 서버 건너뛰기를 참조하십시오.
브라우저를 닫습니다.
다음 단계
이 연습에서는 Visual Web Developer의 기본 기능에 대해 설명했습니다.
파일 제어 수준을 개선하려면 웹 사이트 파일을 Visual SourceSafe 등의 소스 제어 시스템에 저장하는 방안을 고려해 보십시오. 자세한 내용은 소스 제어 소개를 참조하십시오.