1단계: 프로젝트 만들기 및 폼에 테이블 추가Step 1: Create a Project and Add a Table to Your Form

일치 게임을 만들 때 첫 번째 단계에서는 프로젝트를 만들고 폼에 테이블을 추가합니다.The first step in creating a matching game is to create the project and add a table to your form. 테이블을 사용하면 4x4 모눈에 순서대로 아이콘을 정렬할 수 있습니다.The table helps align the icons into an orderly 4x4 grid. 또한 게임 보드의 모양을 개선하는 몇 가지 속성을 설정할 수 있습니다.You also set several properties to enhance the appearance of the game board.

프로젝트를 만들고 폼에 테이블을 추가하려면To create a project and add a table to your form

  1. 메뉴 모음에서 파일, 새로 만들기, 프로젝트를 차례로 선택합니다.On the menu bar, choose File, New, Project.

  2. Visual Studio Express를 사용하고 있지 않으면 먼저 프로그래밍 언어를 선택해야 합니다.If you're not using Visual Studio Express, you need to select a programming language first. 설치된 템플릿 목록에서 Visual C# 또는 Visual Basic을 선택합니다.From the Installed Templates list, choose either Visual C# or Visual Basic.

  3. 프로젝트 템플릿 목록에서 Windows Forms 응용 프로그램을 선택하고 프로젝트 이름으로 MatchingGame을 지정한 다음 확인 단추를 선택합니다.In the list of project templates, choose Windows Forms Application, name the project MatchingGame, and then choose the OK button.

  4. 속성 창에서 다음 폼 속성을 설정합니다.In the Properties window, set the following form properties.

    1. 폼의 Text 속성을 Form1에서 일치 게임으로 변경합니다.Change the form's Text property from Form1 to Matching Game. 이 텍스트는 게임 창 위쪽에 표시됩니다.This text appears at the top of the game window.

    2. 이 폼의 크기를 550400픽셀로 설정합니다.Set the size of the form to 550 pixels wide by 550 tall. 이렇게 하려면 **Size* 속성을 550, 550으로 설정하거나, IDE(통합 개발 환경)의 오른쪽 아래 모퉁이에 표시되는 크기가 원하는 크기가 될 때까지 폼의 모퉁이를 끌면 됩니다.You can do this either by setting the Size property to 550, 550, or by dragging the corner of the form until you see the correct size in the lower-right corner of the integrated development environment (IDE).

  5. IDE의 왼쪽에 있는 도구 상자 탭을 선택하여 도구 상자를 표시합니다.Display the toolbox by choosing the Toolbox tab on the left side of the IDE.

  6. 도구 상자의 컨테이너 범주에서 TableLayoutPanel 컨트롤을 끌어와 이 컨트롤의 다음 속성을 설정합니다.Drag a TableLayoutPanel control from the Containers category in the toolbox, and then set the following properties for it.

    1. BackColor 속성을 CornflowerBlue로 설정합니다.Set the BackColor property to CornflowerBlue. 이렇게 하려면 속성 창의 BackColor 속성 옆에 있는 드롭다운 화살표를 선택하여 BackColor 대화 상자를 엽니다.To do this, open the BackColor dialog box by choosing the drop-down arrow next to the BackColor property in the Properties window. 그런 다음 BackColor 대화 상자의 탭을 선택하여 사용할 수 있는 색이름 목록을 봅니다.Then, choose the Web tab in the BackColor dialog box to view a list of available color names.

      참고

      색은 알파벳 순서가 아니며 CornflowerBlue는 목록 맨 아래 가까이에 있습니다.The colors are not in alphabetical order, and CornflowerBlue is near the bottom of the list.

    2. 속성 옆에 있는 드롭다운 단추를 선택한 다음, 가운데 있는 큰 단추를 선택하여 Dock 속성을 Fill로 설정합니다.Set the Dock property to Fill by choosing the drop-down button next to the property and choosing the large middle button. 이렇게 하면 전체 폼을 덮도록 테이블이 확장됩니다.This spreads the table out so that it covers the entire form.

    3. CellBorderStyle 속성을 Inset으로 설정합니다.Set the CellBorderStyle property to Inset. 이렇게 하면 보드의 각 셀 사이에 시각적 테두리가 생깁니다.This provides visual borders between each cell on the board.

    4. TableLayoutPanel의 오른쪽 위 모퉁이에 있는 삼각형 모양의 단추를 선택하여 해당 작업 메뉴를 표시합니다.Choose the triangle button in the upper-right corner of the TableLayoutPanel to display its task menu.

    5. 작업 메뉴에서 행 추가를 두 번 선택하여 행을 두 개 이상 추가한 다음, 열 추가를 두 번 선택하여 열을 두 개 이상 추가합니다.On the task menu, choose Add Row twice to add two more rows, and then choose Add Column twice to add two more columns.

    6. 작업 메뉴에서 행 및 열 편집을 선택하여 열 및 행 스타일 창을 엽니다.On the task menu, choose Edit Rows and Columns to open the Column and Row Styles window. 각 열을 선택하고 백분율 옵션 단추를 선택한 후 각 열의 너비를 전체 너비의 25%로 설정합니다.Choose each of the columns, choose the Percent option button, and then set each column's width to 25 percent of the total width. 그런 다음 창의 맨 위에 있는 드롭다운 상자에서 을 선택하고 각 행의 높이를 25%로 설정합니다.Then select Rows from the drop-down box at the top of the window, and set each row's height to 25 percent. 완료되면 확인 단추를 선택합니다.When you're done, choose the OK button.

      이제 TableLayoutPanel이 크기가 같은 사각형 셀이 16개 포함된 4x4 모눈이 됩니다.Your TableLayoutPanel should now be a 4x4 grid, with sixteen equally sized square cells. 이러한 행과 열은 나중에 아이콘 이미지가 표시될 위치입니다.These rows and columns are where the icon images will appear later.

  7. 폼 편집기에서 TableLayoutPanel이 선택되어 있어야 합니다.Be certain that the TableLayoutPanel is selected in the form editor. 이를 확인하려면 속성 창의 맨 위에 있는 tableLayoutPanel1을 확인합니다.To verify this, you should see tableLayoutPanel1 at the top of the Properties window. 이 속성이 선택되어 있지 않은 경우 폼의 TableLayoutPanel을 선택하거나 속성 창 맨 위에 있는 드롭다운 컨트롤에서 이를 선택합니다.If it is not selected, choose the TableLayoutPanel on the form, or choose it in the dropdown control at the top of the Properties window.

    TableLayoutPanel이 선택된 상태에서 도구 상자를 열고 공용 컨트롤 범주에 있는 레이블 컨트롤을 TableLayoutPanel의 왼쪽 위 셀에 추가합니다.While the TableLayoutPanel is selected, open the toolbox and add a Label control (located in the Common Controls category) to the upper-left cell of the TableLayoutPanel. 이제 IDE에서 Label 컨트롤이 선택되어 있어야 합니다.The Label control should now be selected in the IDE. 여기에 다음 속성을 설정합니다.Set the following properties for it.

    1. 레이블의 BackColor 속성이 CornflowerBlue로 설정되어 있는지 확인합니다.Be sure that the label's BackColor property is set to CornflowerBlue.

    2. AutoSize 속성을 False로 설정합니다.Set the AutoSize property to False.

    3. Dock 속성을 Fill로 설정합니다.Set the Dock property to Fill.

    4. 속성 옆에 있는 드롭다운 단추를 선택한 다음, 가운데 단추를 선택하여 TextAlign 속성을 MiddleCenter로 설정합니다.Set the TextAlign property to MiddleCenter by choosing the drop-down button next to the property, and then choosing the middle button. 이렇게 하면 셀의 중앙에 아이콘이 나타납니다.This ensures the icon appears in the middle of the cell.

    5. Font 속성을 선택합니다.Choose the Font property. 그러면 줄임표(...) 단추가 나타납니다.An ellipsis (...) button should appear.

    6. 줄임표 단추를 선택하고 글꼴 값을 Webdings로, 글꼴 스타일굵게, 크기72를 각각 설정합니다.Choose the ellipsis button, and set the Font value to Webdings, the Font Style to Bold, and the Size to 72.

    7. 레이블의 Text 속성을 문자 c로 설정합니다.Set the Text property of the label to the letter c.

      이제 TableLayoutPanel의 왼쪽 위 셀에는 파란색 배경의 가운데에 검은색 상자가 포함됩니다.The upper-left cell in the TableLayoutPanel should now contain a black box centered on a blue background.

      참고

      Webdings 글꼴은 Windows 운영 체제에 포함된 아이콘 글꼴입니다.The Webdings font is a font of icons that ships with the Windows operating system. 일치 게임에서 플레이어는 일치하는 아이콘 쌍을 찾아야 하므로 이 글꼴을 사용하여 일치시킬 아이콘을 표시합니다.In your matching game, the player needs to match pairs of icons, so you use this font to display the icons to match. Text 속성을 c로 설정하는 대신 다른 문자를 입력하여 아이콘이 어떻게 표시되는지 확인해 보세요.Instead of putting c in the Text property, try entering different letters to see what icons are displayed. 느낌표는 거미, 대문자 N은 눈 모양, 쉼표는 고추를 각각 나타냅니다.An exclamation point is a spider, an uppercase N is an eye, and a comma is a chili pepper.

  8. 레이블 컨트롤을 선택하고 TableLayoutPanel의 다음 셀에 이를 복사합니다.Choose your label control and copy it to the next cell in the TableLayoutPanel. Ctrl+C 키를 선택하거나 메뉴 모음에서 편집, 복사를 선택합니다. 그런 다음 이 컨트롤을 붙여넣습니다.(Choose the Ctrl+C keys, or on the menu bar, choose Edit, Copy.) Then paste it. Ctrl+V 키를 선택하거나 메뉴 모음에서 편집, 붙여넣기를 선택합니다. TableLayoutPanel의 두 번째 셀에 첫 번째 레이블의 복사본이 나타납니다.(Choose the Ctrl+V keys, or on the menu bar, choose Edit, Paste.) A copy of the first label appears in the second cell of the TableLayoutPanel. 이 레이블을 다시 붙여넣으면 세 번째 셀에 다른 레이블이 나타납니다.Paste it again, and another label appears in the third cell. 모든 셀이 채워질 때까지 Label 컨트롤 붙여넣기를 계속합니다.Keep pasting Label controls until all of the cells are filled.

    참고

    붙여넣기를 너무 많이 하면 TableLayoutPanel에 새 행이 추가되어 새 Label 컨트롤을 추가할 수 있는 위치가 생깁니다.If you paste too many times, the IDE adds a new row to the TableLayoutPanel so that it has a place to add your new label control. 이를 실행 취소할 수 있습니다.You can undo it. 새 셀을 제거하려면 Ctrl+Z 키를 선택하거나 메뉴 모음에서 편집, 실행 취소를 선택합니다.To remove the new cell, choose the Ctrl+Z keys, or on the menu bar, choose Edit, Undo.

    이제 폼이 배치됩니다. 이 폼은 다음 그림과 같습니다.Now your form is laid out. It should look like the following picture.

    초기 일치 게임 폼Initial matching game form
    초기 일치 게임 폼Initial matching game form

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