다음을 통해 공유

연습: Visual Web Developer에서의 HTML 표 편집

  • 아티클

업데이트: 2007년 11월

표는 페이지 레이아웃을 만들 때 사용되므로 표 편집은 여러 웹 페이지에서 중요한 부분입니다. 이 연습에서는 Microsoft Visual Studio에 있는 HTML 편집기의 표 편집 기능을 설명합니다. 페이지에서 표를 사용하여 간단한 입력 폼에 대한 레이아웃을 만듭니다.

참고:

이 연습에서 설명하는 표 편집 기능은 Table 웹 서버 컨트롤(<asp:Table> 컨트롤 및 그 자식 컨트롤)이 아니라 HTML 표와 관련이 있습니다.

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

  • 표 추가

  • 표, 행 및 열 선택

  • 요소 크기 조정

  • 표 요소 추가 및 제거

  • 배경색 및 맞춤과 같은 셀 특성 설정

사전 요구 사항

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

  • Visual Web Developer 및 .NET Framework

웹 사이트 만들기

예를 들어, 연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계를 수행하여 Visual Studio에서 웹 사이트를 이미 만든 경우, 이 웹 사이트를 사용하고 다음 단원인 "표를 사용하여 페이지 레이아웃 만들기"로 건너뛸 수 있습니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

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

  1. Visual Web Developer를 엽니다.

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

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

  4. 위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

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

  5. 언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

  6. 확인을 클릭합니다.

    Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

표를 사용하여 페이지 레이아웃 만들기

먼저 페이지의 전체 레이아웃을 정의하는 표를 추가합니다.

페이지 레이아웃을 위한 표를 추가하려면

  1. 디자이너에 열려 있는 페이지가 없는 경우 웹 사이트에 페이지를 추가합니다.

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

  3. 레이아웃 메뉴에서 표 삽입을 클릭합니다.

    표 삽입 대화 상자가 나타납니다.

  4. 템플릿을 선택합니다.

    표 템플릿은 미리 정의된 표 레이아웃입니다.

  5. 템플릿 목록에서 머리글 및 측면을 선택합니다.

  6. 확인을 클릭합니다.

    두 개의 열로 구성되고 페이지의 전체 높이와 너비를 차지하는 표가 페이지에 추가됩니다. 맨 위의 두 열은 단일 셀로 병합되어 있으며 여기에 머리글을 입력할 수 있습니다. 머리글 아래 왼쪽 셀은 이동 또는 측면 정보를 표시하기 위한 것이고 오른쪽 셀은 페이지의 주 표시 영역입니다.

    참고:

    디자인 타임에 편집하는 데 도움이 되도록 표에서 셀 주변의 테두리가 기본적으로 표시됩니다. 그러나 표나 셀에 테두리가 표시되도록 명시적으로 설정하지 않는 한 브라우저에서 표가 렌더링될 때 테두리가 표시되지 않습니다.

표를 사용하여 폼 레이아웃 만들기

또한 HTML 표를 사용하여 폼에서 컨트롤을 레이아웃할 수 있습니다. 이제 첫 번째 표 안에 두 번째 표를 만듭니다. 나중에 두 번째 표를 사용하여 폼에서 일부 컨트롤의 레이아웃을 만듭니다.

폼 레이아웃을 위한 표를 추가하려면

  1. 도구 상자의 HTML 그룹에서표 요소를 오른쪽의 주 셀로 끌어 옵니다.

    도구 상자에서 표를 끌어 오면 Visual Web Developer는 세 개의 행과 열로 구성된 빈 표를 만듭니다. 당장은 두 개의 열만 필요하므로 열 하나를 삭제합니다.

    참고:

    이전처럼 표 삽입 명령을 사용하거나 도구 모음에서 표 요소를 끌어와 표를 만들 수 있습니다.

  2. 마우스 포인터를 표 위로 이동시켜 이동 커서(십자형 화살표)로 바뀌게 한 다음 클릭하여 표를 선택합니다.

  3. 표의 오른쪽 가장자리를 끌어와 페이지 너비 대부분을 차지할 때까지 표를 넓힙니다.

    끄는 대로 표가 변경된 크기로 표시됩니다.

  4. 가장 왼쪽 열에서 셀 하나를 마우스 오른쪽 단추로 클릭합니다. 삭제 하위 메뉴에서 열을 클릭하여 선택된 셀의 열을 제거합니다.

    해당 열이 표에서 삭제됩니다.

    참고:

    하위 메뉴가 없는 삭제 옵션이 표시되는 경우는 포커스가 셀에 있지 않음을 나타냅니다. 왼쪽 열의 셀 안에서 마우스 오른쪽 단추를 클릭합니다.

  5. 오른쪽 맨 아래 셀을 클릭한 다음 Tab 키를 눌러 네 번째 행을 표에 추가합니다.

    이제 폼 컨트롤의 컨테이너가 될 수 있는 두 개 열과 네 개 행으로 구성된 표가 준비되었습니다.

페이지 레이아웃 표의 특성 설정

페이지 표 안에 폼 레이아웃 표를 만들었으므로 페이지 레이아웃 표를 편집하여 페이지 레이아웃 작업을 마무리할 수 있습니다.

페이지 레이아웃 표의 특성을 설정하려면

  1. 페이지 레이아웃 표에서 맨 위 셀을 클릭합니다.

    셀을 선택하면 내용 편집 모드로 전환되면서 셀 테두리가 두껍게 표시됩니다.

  2. 속성 창에서 스타일 상자의 단추를 클릭합니다.

    스타일 작성기 대화 상자가 나타납니다.

  3. 텍스트 탭의 가로 목록에서 가운데 맞춤을 클릭합니다.

  4. 배경 탭의 색 목록에서 원하는 색을 선택합니다. 또한 색 상자 옆의 단추를 클릭하면 색 선택 대화 상자를 표시하고 추가할 색을 선택할 수 있습니다.

    선택한 설정에 따라 레이아웃 표의 맨 위에 있는 셀의 스타일이 설정됩니다.

  5. 머리글로 Contoso 웹 사이트를 입력합니다.

  6. 텍스트를 선택하고 서식 지정 도구 모음의 블록 서식 목록에서 **제목 1 <H1>**을 클릭합니다.

  7. 표에서 가장 왼쪽의 셀에 대해 1 ~ 6단계를 반복하고 다음과 같이 변경합니다.

    • 텍스트를 이 사이트는 Contoso, Incorporated사가 유지 관리합니다.로 변경합니다.

    • 텍스트의 서식을 제목 1로 지정하지 마십시오.

    • 스타일 작성기 대화 상자 텍스트 탭의 세로 목록에서 아래쪽을 클릭합니다.

    프로덕션 웹 페이지에서는 측면 셀이 링크 메뉴나 다른 콘텐츠로 채워질 수 있습니다. 그러나 이 연습에서는 셀에 어떤 콘텐츠가 포함되느냐는 중요하지 않습니다.

폼 빌드

이제 폼을 빌드할 수 있습니다.

폼 레이아웃 표에 텍스트와 컨트롤을 추가하려면

  1. 페이지 레이아웃 표 안에 있는 표인 폼 레이아웃 표에서 왼쪽 맨 위 셀을 클릭한 다음 이름:을 입력합니다.

  2. 두 번째 행의 왼쪽 셀을 클릭하고 출생 연도:를 입력합니다.

  3. 도구 상자의 표준 그룹에서 TextBox 컨트롤을 오른쪽 맨 위 셀로 끌어 옵니다.

  4. TextBox 컨트롤의 ID 속성을 textName으로 설정합니다.

  5. 다른 TextBox를 두 번째 행의 오른쪽 셀로 끌어 오고 ID 속성을 textBirthYear로 설정합니다.

  6. Button 컨트롤을 오른쪽의 세 번째 셀로 끌어 오고 Text 속성을 전송으로 설정합니다.

  7. Label 컨트롤을 오른쪽 맨 아래 셀로 끌어 오고 ID 속성을 labelDisplay로 설정한 다음 Text 속성을 지웁니다.

  8. 마우스 커서를 왼쪽 열 위에 놓고 열의 위쪽에 선택 기호(작은 사각형)가 표시되면 이 기호를 클릭합니다.

    왼쪽 열이 선택됩니다.

  9. 속성 창에서는 스타일 상자의 단추를 클릭하여 스타일 작성기 대화 상자를 표시합니다.

  10. 텍스트 탭의 가로 목록에서 오른쪽을 클릭합니다.

    폼의 텍스트 캡션을 오른쪽에 맞춥니다.

  11. 확인을 클릭하여 스타일 작성기를 닫습니다.

  12. 왼쪽 열을 다시 선택한 다음 오른쪽 가장자리를 끌어 캡션 텍스트에 적당한 너비가 될 때까지 열을 축소합니다.

  13. 폼 레이아웃 표의 외부에 있는 레이아웃 표 셀을 마우스 오른쪽 단추로 클릭한 다음 스타일을 클릭합니다.

    바로 가기 메뉴를 사용하여 스타일 작성기 대화 상자를 표시할 수도 있습니다.

  14. 텍스트 탭의 세로 목록에서 위쪽을 클릭합니다.

    폼 레이아웃 표를 셀의 맨 위에 맞춥니다.

폼 컨트롤 프로그래밍

이제 폼 컨트롤을 프로그래밍할 수 있습니다. 이 폼에서는 사용자의 올해 나이를 표시합니다.

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

  1. 폼에서 Button 컨트롤을 두 번 클릭합니다.

    편집기에서는 Click 이벤트 처리기를 만듭니다.

  2. 다음 강조 표시된 코드를 추가합니다.

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) _
    Handles Button1.Click 
    Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
End Sub

    protected void Button1_Click(Object sender, EventArgs e)
{
    int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplay.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
}

페이지 테스트

이제 페이지를 테스트할 수 있습니다.

페이지를 테스트하려면

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

    페이지가 브라우저에 표시되면 레이아웃이 만들어진 대로 표시되는지 확인합니다. 표 테두리를 명시적으로 지정하지 않았기 때문에 폼에 선이 표시되지 않습니다.

  2. 이름 상자에 이름을 입력합니다.

  3. 출생 연도 상자에 태어난 해를 입력하고 전송 단추를 클릭합니다.

    폼 표로 만든 위치의 폼에 나이 계산 결과가 표시됩니다.

다음 단계

이 연습에서는 디자인 뷰에서 비주얼 표 편집기의 몇 가지 기능을 수행했습니다. 두 가지 방법으로 표를 추가한 다음 표 크기 변경, 행 추가, 열 삭제 및 셀 스타일 설정을 수행하고 셀 내용으로 텍스트와 컨트롤을 추가했습니다. 다음과 같은 제안을 따르는 것이 좋습니다.

참고 항목

작업

연습: Visual Web Developer에서 ASP.NET 마스터 페이지 생성 및 사용

개념

Visual Web Developer에서 HTML 편집기 태그 탐색

Visual Web Developer의 HTML 편집기에서 요소의 서식 지정