4단계: TableLayoutPanel 컨트롤을 사용하여 폼 레이아웃Step 4: Lay Out Your Form with a TableLayoutPanel Control

이 단계에서는 폼에 TableLayoutPanel 컨트롤을 추가합니다.In this step, you add a TableLayoutPanel control to your form. TableLayoutPanel을 사용하여 나중에 추가하는 폼에서 컨트롤을 적절히 맞출 수 있습니다.The TableLayoutPanel helps properly align controls in the form that you will add later.

비디오 링크이 항목의 비디오 버전을 보려면 자습서 1: Visual Basic에서 사진 뷰어 만들기 - 비디오 2 또는 자습서 1: C#에서 사진 뷰어 만들기 - 비디오 2를 참조하세요.link to videoFor a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 2 or Tutorial 1: Create a Picture Viewer in C# - Video 2. 이러한 비디오에서는 이전 버전의 Visual Studio를 사용하므로 일부 메뉴 명령과 기타 사용자 인터페이스 요소가 약간 다를 수 있습니다.These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. 그러나 개념 및 절차는 Visual Studio의 현재 버전에서 비슷하게 작동합니다.However, the concepts and procedures work similarly in the current version of Visual Studio.

TableLayoutPanel 컨트롤을 사용하여 폼을 레이아웃하려면To lay out your form with a TableLayoutPanel control

  1. Visual Studio IDE의 왼쪽에서 도구 상자 탭을 찾습니다. 도구 상자 탭을 선택하면 도구 상자가 나타납니다.On the left side of the Visual Studio IDE, locate the Toolbox tab. Choose the Toolbox tab, and the Toolbox appears. 또는 메뉴 모음에서 보기, 도구 상자를 차례로 선택합니다.(Or, on the menu bar, choose View, Toolbox.)

  2. 다음 그림에 표시된 대로 컨테이너 그룹 옆의 작은 삼각형 기호를 선택하여 해당 그룹을 엽니다.Choose the small triangle symbol next to the Containers group to open it, as shown in the following picture.

    컨테이너 그룹Containers group
    컨테이너 그룹Containers group

  3. 단추, 확인란, 레이블 등과 같은 컨트롤을 폼에 추가할 수 있습니다.You can add controls like buttons, check boxes, and labels to your form. 도구 상자에서 TableLayoutPanel 컨트롤을 두 번 클릭합니다.Double-click the TableLayoutPanel control in the Toolbox. 또는 컨트롤을 도구 상자에서 폼으로 끌어 놓을 수 있습니다. 이렇게 하면 다음 그림과 같이 IDE가 TableLayoutPanel 컨트롤을 폼에 추가합니다.(Or, you can drag the control from the toolbox onto the form.) When you do this, the IDE adds a TableLayoutPanel control to your form, as shown in the following picture.

    TableLayoutPanel 컨트롤TableLayoutPanel control
    TableLayoutPanel 컨트롤TableLayoutPanel control

    참고

    TableLayoutPanel을 추가한 후 제목이 TableLayoutPanel Tasks인 창이 폼 안에 표시되면 폼 안쪽 아무 곳이나 선택하여 폼을 닫습니다.After you add your TableLayoutPanel, if a window appears inside your form with the title TableLayoutPanel Tasks, choose anywhere inside the form to close it. 이 창에 대해서는 이 자습서의 뒷부분에서 자세히 설명합니다.You will learn more about this window later in the tutorial.

    도구 상자 탭을 선택할 때 도구 상자가 폼에 맞게 확대되는 방식과 도구 상자 바깥쪽 아무 곳이나 선택한 후 도구 상자가 닫히는 방식을 살펴봅니다.Notice how the Toolbox expands to cover your form when you choose its tab, and closes after you choose anywhere outside of it. 이 기능이 IDE 자동 숨기기 기능입니다.That's the IDE auto-hide feature. 창의 오른쪽 위 모퉁이에 있는 압정 아이콘을 선택하여 해당 창에서 자동 숨기기 기능을 사용하거나 사용하지 않도록 설정하고 창을 현재 위치에 고정할 수 있습니다.You can turn it on or off for any of the windows by choosing the pushpin icon in the upper-right corner of the window to toggle auto-hide and lock it in place. 압정 아이콘은 다음과 같습니다.The pushpin icon appears as follows.

    압정 아이콘Pushpin icon
    압정 아이콘Pushpin icon

  4. TableLayoutPanel을 선택하여 이 컨트롤이 선택된 상태가 되도록 합니다.Be sure TableLayoutPanel is selected by choosing it. 다음 그림과 같이 속성 창의 맨 위에 있는 드롭다운 목록에서 선택된 컨트롤을 확인할 수 있습니다.You can verify what control is selected by looking at the drop-down list at the top of the Properties window, as shown in the following picture.

    TableLayoutPanel 컨트롤이 표시된 속성 창Properties window showing TableLayoutPanel control
    TableLayoutPanel 컨트롤이 표시된 속성 창Properties window showing TableLayoutPanel control

  5. 속성 창의 도구 모음에서 사전순 단추를 선택합니다.Choose the Alphabetical button on the toolbar in the Properties window. 이렇게 하면 속성 창의 속성 목록이 사전순으로 표시되므로 이 자습서에서 속성을 손쉽게 찾을 수 있습니다.This causes the list of properties in the Properties window to display in alphabetical order, which will make it easier to locate properties in this tutorial.

  6. 컨트롤 선택기는 속성 창의 맨 위에 있는 드롭다운 목록입니다.The control selector is a drop-down list at the top of the Properties window. 이 예제에서는 이 드롭다운 목록에 tableLayoutPanel1이라는 컨트롤이 선택되어 있는 것을 보여 줍니다.In this example, it shows that a control called tableLayoutPanel1 is selected. Windows Forms 디자이너에서 영역을 선택하거나 컨트롤 선택기에서 선택하여 컨트롤을 선택할 수 있습니다.You can select controls either by choosing an area in Windows Forms Designer or by choosing from the control selector. 이제 TableLayoutPanel이 선택되어 있으므로 Dock 속성을 찾아서 None으로 설정해야 하는 Dock을 선택합니다.Now that TableLayoutPanel is selected, find the Dock property and choose Dock, which should be set to None. 값 옆에 드롭다운 화살표가 나타납니다.Notice that a drop-down arrow appears next to the value. 이 화살표를 선택하고 다음 그림과 같이 채우기 단추(가운데 있는 큰 단추)를 선택합니다.Choose the arrow, and then select the Fill button (the large button in the middle), as shown in the following picture.

    Fill이 선택된 속성 창Properties window with Fill selected
    Fill이 선택된 속성 창Properties window with Fill selected

    Visual Studio에서 도킹은 창이 IDE의 다른 창이나 영역에 연결되는 경우를 말합니다.Docking in Visual Studio refers to when a window is attached to another window or area in the IDE. 예를 들어 속성 창은 도킹 해제, 즉 Visual Studio 내에서 연결되지 않은 상태로 자유롭게 움직이거나 솔루션 탐색기에 대해 도킹될 수 있습니다.For example, the Properties window can be undocked - that is, unattached and free-floating within Visual Studio - or it can be docked against Solution Explorer.

  7. TableLayoutPanel Dock 속성을 Fill로 설정합니다. 그러면 패널이 전체 폼으로 채워집니다.After you set the TableLayoutPanel Dock property to Fill, the panel fills the entire form. 폼의 크기를 다시 조정하면 TableLayoutPanel은 도킹된 상태를 유지한 채 폼의 크기에 맞게 자동으로 크기가 조정됩니다.If you resize the form again, the TableLayoutPanel stays docked, and resizes itself to fit.

    참고

    TableLayoutPanel은 열과 행이 있고 개별 셀이 여러 열과 행에 걸쳐 있을 수 있다는 점에서 Microsoft Office Word의 표와 비슷합니다.A TableLayoutPanel works like a table in Microsoft Office Word: It has rows and columns, and an individual cell can span multiple rows and columns. 각 셀에는 단추, 확인란, 레이블 등과 같은 컨트롤이 하나만 있을 수 있습니다.Each cell can hold one control (like a button, a check box, or a label). TableLayoutPanel에는 전체 위쪽 행에 걸쳐 있는 하나의 PictureBox 컨트롤, 왼쪽 아래 셀에 있는 하나의 CheckBox 컨트롤 및 오른쪽 아래 셀에 있는 네 개의 Button 컨트롤이 포함되어 있습니다.Your TableLayoutPanel will have a PictureBox control spanning its entire top row, a CheckBox control in its lower-left cell, and four Button controls in its lower-right cell.

  8. 현재 TableLayoutPanel에는 크기가 같은 행과 열이 각각 두 개씩 있는데,Currently, the TableLayoutPanel has two equal-size rows and two equal-size columns. 위쪽 행과 오른쪽 열의 크기를 훨씬 더 크게 만들어야 합니다.You need to resize them so the top row and right column are both much bigger. Windows Forms 디자이너에서 TableLayoutPanel을 선택합니다.In Windows Forms Designer, select the TableLayoutPanel. 오른쪽 위 모퉁이에 다음과 같은 작은 검정색 삼각형 단추가 있습니다.In the upper-right corner, there is a small black triangle button, which appears as follows.

    삼각형 단추Triangle button
    삼각형 단추Triangle button

    이 단추는 이 컨트롤에 해당 속성을 자동으로 설정하는 데 도움이 되는 작업이 포함되어 있음을 나타냅니다.This button indicates that the control has tasks that help you set its properties automatically.

  9. 삼각형을 선택하여 다음 그림과 같이 컨트롤의 작업 목록을 표시합니다.Choose the triangle to display the control's task list, as shown in the following picture.

    TableLayoutPanel 작업TableLayoutPanel tasks
    TableLayoutPanel 작업TableLayoutPanel tasks

  10. 행 및 열 편집 작업을 선택하여 열 및 행 스타일 창을 표시합니다.Choose the Edit Rows and Columns task to display the Column and Row Styles window. Column1을 선택한 다음 백분율 단추가 선택되어 있는지 확인하고 백분율 상자에 15를 입력하여 크기를 15%로 설정합니다.Choose Column1, and set its size to 15 percent by being sure the Percent button is selected and entering 15 in the Percent box. 이 컨트롤이 이 자습서의 뒷부분에서 사용할 NumericUpDown 컨트롤입니다. Column2를 선택하고 크기를 85%로 설정합니다.(That's a NumericUpDown control, which you will use in a later tutorial.) Choose Column2 and set it to 85 percent. 창이 닫히므로 아직 확인 단추는 선택하지 않습니다.Don't choose the OK button yet, because the window will close. 실수로 창을 닫은 경우 작업 목록을 사용하여 다시 열 수 있습니다.(But if you do, you can reopen it using the task list.)

    TableLayoutPanel 열 및 행 스타일TableLayoutPanel column and row styles
    TableLayoutPanel 열 및 행 스타일TableLayoutPanel column and row styles

  11. 창의 맨 위에 있는 표시 드롭다운 목록에서 을 선택합니다.From the Show drop-down list at the top of the window, choose Rows. Row1을 90%로 설정하고 Row2를 10%로 설정합니다.Set Row1 to 90 percent and Row2 to 10 percent.

  12. 확인 단추를 선택합니다.Choose the OK button. 이제 TableLayoutPanel에는 큰 위쪽 행, 작은 아래쪽 행, 작은 왼쪽 열, 큰 오른쪽 열이 있습니다.Your TableLayoutPanel should now have a large top row, a small bottom row, a small left column, and a large right column. 폼에서 tableLayoutPanel1을 선택하고 해당 열과 행 테두리를 끌어 TableLayoutPanel의 행과 열의 크기를 조정할 수 있습니다.You can resize the rows and columns in the TableLayoutPanel by choosing tableLayoutPanel1 in the form and then dragging its row and column borders.

    크기가 조정된 TableLayoutPanel이 있는 Form1Form1 with resized TableLayoutPanel
    크기가 조정된 TableLayoutPanel이 있는 Form1Form1 with resized TableLayoutPanel

계속하거나 검토하려면To continue or review