연습: Visual Web Developer에서 기본 웹 페이지 만들기

업데이트: 2007년 11월

이 연습에서는 Microsoft Visual Web Developer에 대해 소개합니다. Visual Web Developer를 사용하여 간단한 페이지를 만드는 과정을 안내하며 새 페이지를 만들고, 컨트롤을 추가하고, 코드를 작성하는 기본 기술을 설명합니다.

이 연습에서 수행할 작업은 다음과 같습니다.

  • 파일 시스템 웹 사이트 만들기

  • Visual Web Developer 익히기

  • Visual Web Developer에서 단일 파일 ASP.NET 페이지 만들기

  • 컨트롤 추가

  • 이벤트 처리기 추가

  • Visual Web Developer의 웹 서버를 사용하여 페이지 실행

사전 요구 사항

이 연습을 따라 하려면 다음과 같은 요건을 갖추어야 합니다.

  • Visual Web Developer

  • .NET Framework

웹 사이트 및 페이지 만들기

이 연습 부분에서는 웹 사이트를 만들고 여기에 새 페이지를 추가합니다. 또한 HTML 텍스트를 추가하고 웹 브라우저에서 페이지를 실행합니다.

이 연습에서는 Microsoft IIS(인터넷 정보 서비스)를 사용할 필요가 없는 파일 시스템 웹 사이트를 만듭니다. 대신 로컬 파일 시스템에서 페이지를 만들고 실행합니다.

파일 시스템 웹 사이트는 페이지와 기타 파일을 로컬 컴퓨터에서 선택하는 폴더에 저장하는 사이트입니다. 다른 웹 사이트 옵션으로는 파일을 로컬 IIS 루트(일반적으로 \Inetpub\Wwwroot\)에 저장하는 로컬 IIS 웹 사이트가 있습니다. FTP 사이트는 FTP(파일 전송 프로토콜)를 사용하여 인터넷을 통해 액세스하는 원격 서버에 파일을 저장합니다. 원격 사이트는 로컬 네트워크를 통해 액세스할 수 있는 원격 서버에 파일을 저장합니다. 자세한 내용은 연습: Visual Web Developer에서 FTP를 사용하여 웹 사이트 편집을 참조하십시오. 또한 웹 사이트 파일을 Visual SourceSafe와 같은 소스 컨트롤 시스템에 저장할 수 있습니다. 자세한 내용은 소스 제어 소개를 참조하십시오.

파일 시스템 웹 사이트를 만들려면

  1. Visual Web Developer를 엽니다.

  2. 파일 메뉴에서 새 웹 사이트를 클릭합니다.

    다음 스크린 샷과 같은 새 웹 사이트 대화 상자가 나타납니다.

    새 웹 사이트 대화 상자

  3. Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

    웹 사이트를 만드는 경우 템플릿을 지정합니다. 템플릿에 따라 서로 다른 파일과 폴더가 포함된 웹 응용 프로그램이 만들어집니다. 이 연습에서는 몇 개의 폴더와 기본 파일을 만드는 ASP.NET 웹 사이트 템플릿을 기반으로 웹 사이트를 만듭니다.

  4. 위치 상자에서 파일 시스템을 선택한 다음 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

    예를 들어, 폴더 이름 C:\BasicWebSite를 입력합니다.

  5. 언어 목록에서 Visual Basic 또는 **Visual C#**을 선택합니다.

    선택한 프로그래밍 언어는 웹 사이트의 기본 언어가 됩니다. 하지만 동일한 웹 응용 프로그램에서 서로 다른 프로그래밍 언어로 페이지와 구성 요소를 만들어 여러 언어를 사용할 수 있습니다.

  6. 확인을 클릭합니다.

    Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다. 새 페이지가 만들어지면 Visual Web Developer에서는 기본적으로 이 페이지가 페이지의 HTML 요소를 볼 수 있는 소스 뷰에 표시됩니다. 다음 스크린 샷에서는 기본 웹 페이지의 소스 뷰를 보여 줍니다.

    기본 페이지의 소스 뷰

Visual Web Developer 둘러보기

페이지 작업을 계속하기 전에 Visual Web Developer 개발 환경에 익숙해지면 도움이 됩니다. 다음 그림에서는 Visual Web Developer에서 사용할 수 있는 창과 도구를 보여 줍니다.

Visual Web Developer 환경 다이어그램

Visual Web Developer의 웹 디자이너에 익숙해지려면

  • 앞의 그림에 있는 텍스트와 다음 목록을 비교해 봅니다. 이 목록에서는 가장 자주 사용하는 창 및 도구에 대해 설명합니다. 이 목록에는 그림에 있는 창과 도구 모두가 아니라 앞의 그림에서 표시된 것만 나열됩니다.

    • 도구 모음. 텍스트 서식 지정, 텍스트 찾기 등을 위한 명령이 있습니다. 일부 도구 모음는 디자인 뷰에서 작업하는 경우에만 사용할 수 있습니다.

    • 솔루션 탐색기. 웹 사이트에 파일과 폴더를 표시합니다.

    • 문서 창. 작업하는 문서를 탭 창에 표시합니다. 탭을 클릭하여 문서 간에 전환할 수 있습니다.

    • 속성 창. 페이지, HTML 요소, 컨트롤 및 기타 개체의 설정을 변경할 수 있습니다.

    • 뷰 탭. 같은 문서의 다른 뷰를 표시합니다. 디자인 뷰는 WYSIWYG에 가까운 편집 화면입니다. 소스 뷰는 해당 페이지의 HTML 편집기입니다. 분할 뷰에는 문서에 대한 디자인 뷰와 소스 뷰가 모두 표시됩니다. 이 연습의 뒷부분에서는 디자인 뷰와 소스 뷰를 사용합니다. 웹 페이지를 디자인 뷰에서 열려는 경우 도구 메뉴에서 옵션을 클릭하고 HTML 디자이너 노드를 선택한 다음 시작 페이지 옵션을 변경합니다.

    • 도구 상자. 페이지로 끌어 올 수 있는 컨트롤과 HTML 요소를 제공합니다. 도구 상자 요소는 공통 기능에 따라 그룹화됩니다.

    • 서버 탐색기/데이터베이스 탐색기. 데이터베이스 연결을 표시합니다. Visual Web Developer에 서버 탐색기가 표시되지 않으면 보기 메뉴에서 서버 탐색기데이터베이스 탐색기를 클릭합니다.

      참고:

      필요에 맞게 창을 다시 정렬하고 크기를 조정할 수 있습니다. 메뉴를 사용하여 추가 창을 표시할 수 있습니다.

새 Web Forms 페이지 만들기

새 웹 페이지를 만들면 Visual Web Developer에서 Default.aspx라는 ASP.NET 페이지(Web Forms 페이지)가 추가됩니다. 이 Default.aspx 페이지를 웹 사이트의 홈 페이지로 사용할 수 있습니다. 하지만 이 연습에서는 새 페이지를 만들고 이 페이지에서 작업합니다.

웹 사이트에 페이지를 추가하려면

  1. Default.aspx 페이지를 닫습니다. 이렇게 하려면 파일 이름이 있는 탭을 마우스 오른쪽 단추로 클릭한 다음 닫기를 선택합니다.

  2. 솔루션 탐색기에서 마우스 오른쪽 단추로 C:\BasicWebSite와 같은 웹 사이트를 클릭한 다음 새 항목 추가를 클릭합니다.

  3. Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다. 다음 스크린 샷에서는 새 항목 추가 대화 상자를 보여 줍니다.

    새 항목 추가 대화 상자

  4. 이름 상자에 FirstWebPage를 입력합니다.

  5. 언어 목록에서 Visual Basic, C#, J# 등의 프로그래밍 언어 중 사용할 언어를 선택합니다. 웹 사이트를 만들 때 기본 언어를 지정했지만, 웹 사이트의 새 페이지나 구성 요소를 만들 때마다 기본값의 언어를 변경할 수 있습니다. 같은 웹 사이트에서 여러 프로그래밍 언어를 사용할 수 있습니다.

  6. 다른 파일에 코드 입력 확인란의 선택을 취소합니다.

    이 연습에서는 코드와 HTML이 같은 페이지에 있는 단일 파일 페이지를 만듭니다. ASP.NET 페이지의 코드는 페이지나 별도의 클래스 파일에 있을 수 있습니다. 코드를 별도의 파일에 보관하는 방법에 대한 자세한 내용은 연습: Visual Web Developer에서 코드 분리를 사용한 기본 웹 페이지 만들기를 참조하십시오.

  7. 추가를 클릭합니다.

    Visual Web Developer에서 새 페이지를 만들어 소스 뷰에서 엽니다.

페이지에 HTML 추가

이 연습 부분에서는 페이지에 정적 텍스트를 추가합니다.

페이지에 텍스트를 추가하려면

  1. 문서 창의 아래쪽에서 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.

    디자인 뷰에서는 작업하고 있는 페이지가 WYSIWYG와 유사한 방식으로 표시됩니다. 지금은 페이지에 텍스트나 컨트롤이 없기 때문에 페이지가 비어 있습니다.

  2. 페이지에서 Welcome to Visual Web Developer를 입력합니다.

    다음 스크린 샷에서는 디자인 뷰에 입력한 텍스트를 보여 줍니다.

    디자인 뷰에 표시된 환영 텍스트

  3. 소스 뷰로 전환합니다.

    다음 스크린 샷과 같이 디자인 뷰에서 입력하여 만든 HTML을 볼 수 있습니다.

    소스 뷰에 표시된 환영 텍스트

페이지 실행

계속해서 페이지에 컨트롤을 추가하기 전에 페이지를 실행해 볼 수 있습니다. 페이지를 실행하려면 웹 서버가 필요합니다. 프로덕션 웹 사이트에서는 IIS를 웹 서버로 사용합니다. 하지만 페이지를 테스트할 때는 로컬로 실행되며 IIS가 필요 없고 ASP.NET Development Server를 사용할 수 있습니다. 파일 시스템 웹 사이트의 경우 Visual Web Developer의 기본 웹 서버가 ASP.NET Development Server입니다.

페이지를 실행하려면

  1. Ctrl+F5를 눌러 페이지를 실행합니다.

    Visual Web Developer에서 ASP.NET Development Server를 시작합니다. 다음 스크린 샷과 같이 Visual Web Developer Web Server가 실행되고 있음을 나타내는 아이콘이 도구 모음에 표시됩니다.

    Visual Web Developer Web Server 아이콘

    페이지가 브라우저에 표시됩니다. 만든 페이지의 확장자가 .aspx이지만 지금은 HTML 페이지처럼 실행됩니다.

    참고:

    브라우저에서 502 오류나 페이지를 표시할 수 없다는 오류가 표시되는 경우에는 브라우저에서 로컬 요청에 대해 프록시 서버를 건너뛰도록 구성해야 할 수 있습니다. 자세한 내용은 방법: 로컬 웹 요청에 대해 프록시 서버 건너뛰기를 참조하십시오.

  2. 브라우저를 닫습니다.

컨트롤 추가 및 프로그래밍

이 연습 부분에서는 페이지에 Button, TextBoxLabel 컨트롤을 추가하고 Button 컨트롤의 Click 이벤트를 처리하는 코드를 작성합니다.

이제 페이지에 서버 컨트롤을 추가할 수 있습니다. 단추, 레이블, 텍스트 상자 및 기타 친숙한 컨트롤을 포함하는 서버 컨트롤을 사용하면 ASP.NET 웹 페이지에 일반적인 폼 처리 기능을 제공할 수 있습니다. 그러나 클라이언트가 아닌 서버에서 실행되는 코드를 사용하여 컨트롤을 프로그래밍할 수도 있습니다.

페이지에 컨트롤을 추가하려면

  1. 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.

  2. Shift+Enter를 몇 번 눌러 공간을 만듭니다.

  3. 도구 상자표준 그룹에서 TextBox 컨트롤, Button 컨트롤 및 Label 컨트롤의 세 가지 컨트롤을 페이지로 끌어 옵니다.

  4. TextBox 컨트롤 위에 삽입 지점을 놓은 다음 이름 입력:을 입력합니다.

    이 정적 HTML 텍스트는 TextBox 컨트롤의 캡션입니다. 같은 페이지에서 정적 HTML과 서버 컨트롤을 함께 사용할 수 있습니다. 다음 스크린 샷에서는 세 개의 컨트롤이 디자인 뷰에서 어떻게 표시되는지 보여 줍니다.

    디자인 뷰의 컨트롤

컨트롤 속성 설정

Visual Web Developer에서는 페이지에서 컨트롤의 속성을 설정하는 여러 가지 방법을 제공합니다. 이 연습 부분에서는 디자인 뷰와 소스 뷰 모두에서 속성을 설정합니다.

컨트롤 속성을 설정하려면

  1. Button 컨트롤을 선택한 후 아래의 스크린 샷과 같이 속성 창에서 Text를 표시 이름으로 설정합니다.

    변경된 Button 컨트롤 텍스트

  2. 소스 뷰로 전환합니다.

    소스 뷰에는 페이지의 HTML이 표시되며, 여기에는 Visual Web Developer에서 서버 컨트롤에 대해 만든 요소도 포함됩니다. 태그에 asp: 접두사가 사용되고 특성이 포함된다는 점을 제외하고는 HTML과 유사한 구문을 사용하여 컨트롤을 선언합니다.

    컨트롤 속성은 특성으로 선언됩니다. 예를 들어, 1단계에서 Button 컨트롤의 Text 속성을 설정할 때 실제로는 컨트롤 태그의 Text 특성을 설정했습니다.

    모든 컨트롤이 특성도 있는 <form> 요소 안에 있습니다. 컨트롤 태그의 특성과 asp: 접두사는 컨트롤이 페이지가 실행될 때 서버의 ASP.NET에 의해 처리되도록 컨트롤을 표시합니다. 여는 태그에 특성이 포함되어 있는 요소 안에 ASP.NET 코드가 있어야 하기 때문에 <form > 및 <script > 요소 밖에 있는 코드는 클라이언트 태그 또는 코드로 브라우저로 보내집니다.

  3. <asp:label> 태그 안의 공간에 삽입 지점을 놓은 다음 스페이스바를 누릅니다.

    Label 컨트롤에 설정할 수 있는 속성 목록이 드롭다운 목록에 표시됩니다. IntelliSense라고도 하는 이 기능을 사용하면 소스 뷰에서 페이지의 서버 컨트롤 구문, HTML 요소 및 기타 항목을 사용할 수 있습니다. 다음 스크린 샷에서는 Label 컨트롤의 IntelliSense 드롭다운 목록을 보여 줍니다.

    Label 컨트롤의 IntelliSense

  4. ForeColor를 선택한 다음 등호(=)를 입력합니다. IntelliSense에 색 목록이 표시됩니다.

    참고:

    언제든지 Ctrl+J를 눌러 IntelliSense 드롭다운 목록을 표시할 수 있습니다.

  5. Label 컨트롤 텍스트의 색을 선택합니다.

    ForeColor 특성이 선택한 색으로 완료됩니다.

Button 컨트롤 프로그래밍

이 연습에서는 사용자가 텍스트 상자에 입력하는 이름을 읽은 다음 Label 컨트롤에 이 이름을 표시하는 코드를 작성합니다.

기본 단추 이벤트 처리기를 추가하려면

  1. 디자인 뷰로 전환합니다.

  2. Button 컨트롤을 두 번 클릭합니다.

    Visual Web Developer에서 소스 뷰로 전환되고 Button 컨트롤의 기본 이벤트인 Click 이벤트에 대한 기초 이벤트 처리기가 만들어집니다.

    참고:

    디자인 뷰에서 컨트롤을 두 번 클릭하는 것 외에도 이벤트 처리기를 만드는 여러 다른 방법이 있습니다.

  3. 처리기 내에 다음을 입력합니다.

    Label1

    다음 스크린 샷과 같이 Visual Web Developer에서 Label 컨트롤에 사용할 수 있는 멤버의 목록이 표시됩니다.

    사용 가능한 Label 컨트롤 멤버

  4. 다음 코드 예제와 같이 표시되도록 단추의 Click 이벤트 처리기를 완성합니다.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
    End Sub
    
    protected void Button1_Click(object sender, System.EventArgs e)
    {    
        Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
    }
    
  5. <asp:Button> 요소가 나올 때까지 아래로 스크롤합니다. <asp:Button> 요소에는 이제 OnClick="Button1_Click" 특성이 있습니다. 이 특성은 단추의 Click 이벤트를 4단계에서 코딩한 처리기 메서드에 바인딩합니다.

    이벤트 처리기 메서드에는 아무 이름이나 지정할 수 있습니다. 여기에 표시된 이름은 Visual Web Developer에서 만든 기본 이름입니다. 중요한 점은 OnClick 특성에 사용되는 이름과 페이지의 메서드 이름이 일치해야 한다는 것입니다.

    참고:

    Visual Basic에서 코드 분리를 사용하는 경우 Visual Web Developer에서는 OnClick 특성을 명시적으로 추가하지 않습니다. 대신, 처리기 선언 자체에서 Handles 키워드를 사용하여 이벤트가 처리기 메서드에 바인딩됩니다.

페이지 실행

이제 페이지의 서버 컨트롤을 테스트할 수 있습니다.

페이지를 실행하려면

  1. Ctrl+F5를 눌러 브라우저에서 페이지를 실행합니다.

    ASP.NET Development Server를 사용하여 페이지가 다시 실행됩니다.

  2. 텍스트 상자에 이름을 입력하고 단추를 클릭합니다.

    입력한 이름이 Label 컨트롤에 표시됩니다. 단추를 클릭하면 페이지가 웹 서버에 게시됩니다. 그런 다음 ASP.NET에서 페이지를 다시 만들고, 코드(이 경우, Button 컨트롤의 Click 이벤트 처리기)를 실행한 후 새 페이지를 브라우저에 보냅니다. 브라우저에서 상태 표시줄을 보면 단추를 클릭할 때마다 페이지에서 웹 서버로 라운드트립이 수행되고 있음을 확인할 수 있습니다.

  3. 브라우저에서 실행되고 있는 페이지의 소스를 봅니다.

    페이지 소스 코드에는 일반적인 HTML만 표시되고 소스 뷰에서 작업한 <asp:> 요소는 표시되지 않습니다. 페이지가 실행될 때 ASP.NET에서는 서버 컨트롤을 처리하고 컨트롤을 나타내는 기능을 수행하는 HTML 요소를 페이지에 렌더링합니다. 예를 들어, <asp:Button> 컨트롤은 HTML 요소 <input type="submit">으로 렌더링됩니다.

  4. 브라우저를 닫습니다.

추가 컨트롤 작업

이 연습 부분에서는 한 번에 한 달씩 날짜를 표시하는 Calendar 컨트롤을 사용합니다. Calendar 컨트롤은 지금까지 작업한 단추, 텍스트 상자, 레이블보다 복잡한 컨트롤이며 서버 컨트롤 추가 기능을 설명합니다.

이 단원에서는 페이지에 Calendar 컨트롤을 추가하고 서식을 지정합니다.

Calendar 컨트롤을 추가하려면

  1. Visual Web Developer에서 디자인 뷰로 전환합니다.

  2. 도구 상자표준 섹션에서 Calendar 컨트롤을 페이지로 끌어 옵니다.

    달력의 스마트 태그 패널이 표시됩니다. 패널에 표시되는 명령을 사용하면 선택한 컨트롤에 대한 일반적인 작업을 쉽게 수행할 수 있습니다. 다음 스크린 샷에서는 디자인 뷰에 렌더링된 Calendar 컨트롤을 보여 줍니다.

    디자인 뷰의 Calendar 컨트롤

  3. 스마트 태그 패널에서 자동 서식을 선택합니다.

    달력의 서식 구성표를 선택할 수 있는 자동 서식 대화 상자가 표시됩니다. 다음 스크린 샷에서는 Calendar 컨트롤의 자동 서식 대화 상자를 보여 줍니다.

    Calendar 컨트롤의 자동 서식 대화 상자

  4. 구성표 선택 목록에서 단순을 선택한 다음 확인을 클릭합니다.

  5. 소스 뷰로 전환합니다.

    <asp:Calendar> 요소가 표시됩니다. 이 요소는 앞서 만든 단순 컨트롤의 요소보다 훨씬 깁니다. 여기에는 다양한 서식 설정을 나타내는 <WeekEndDayStyle>과 같은 하위 요소도 포함됩니다. 다음 스크린 샷에서는 소스 뷰의 Calendar 컨트롤을 보여 줍니다.

    소스 뷰의 Calendar 컨트롤

Calendar 컨트롤 프로그래밍

이 단원에서는 현재 선택된 날짜를 표시하는 Calendar 컨트롤을 프로그래밍합니다.

Calendar 컨트롤을 프로그래밍하려면

  1. 디자인 뷰에서 Calendar 컨트롤을 두 번 클릭합니다.

    소스 뷰에서 새 이벤트 처리기가 만들어집니다.

  2. 다음의 강조 표시된 코드로 SelectionChanged 이벤트 처리기를 완성합니다.

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = Calendar1.SelectedDate.ToString()
    End Sub
    
    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
    {    
        Label1.Text = Calendar1.SelectedDate.ToString();
    }
    

페이지 실행

이제 달력을 테스트할 수 있습니다.

페이지를 실행하려면

  1. Ctrl+F5를 눌러 브라우저에서 페이지를 실행합니다.

  2. 달력에서 날짜를 클릭합니다.

    클릭한 날짜가 Label 컨트롤에 표시됩니다.

  3. 브라우저에서 페이지의 소스 코드를 봅니다.

    Calendar 컨트롤이 페이지에 테이블로 렌더링되며, 각 날짜는 <a> 요소가 포함된 <td> 요소로 표시됩니다.

  4. 브라우저를 닫습니다.

다음 단계

이 연습에서는 Visual Web Developer 페이지 디자이너의 기본 기능에 대해 설명했습니다. Visual Web Developer에서 웹 페이지를 만들고 편집하는 방법을 배웠으므로 다른 기능을 살펴 볼 수 있습니다. 예를 들어, 다음과 같은 경우입니다.

참고 항목

작업

연습: Visual Web Developer에서 로컬 IIS 웹 사이트 만들기

연습: Visual Web Developer에서 FTP를 사용하여 웹 사이트 편집

개념

ASP.NET 개요

Visual Web Developer 작업