1단계: 프로젝트 만들기 및 폼에 테이블 추가

일치 게임을 만들 때 첫 번째 단계에서는 프로젝트를 만들고 폼에 테이블을 추가합니다. 테이블을 사용하면 4x4 모눈에 순서대로 아이콘을 정렬할 수 있습니다. 또한 게임 보드의 모양을 개선하는 몇 가지 속성을 설정할 수 있습니다.

프로젝트를 만들고 폼에 테이블을 추가하려면

  1. 메뉴 모음에서 파일, 새로 만들기, 프로젝트를 차례로 선택합니다.

  2. Visual Studio Express를 사용하고 있지 않으면 먼저 프로그래밍 언어를 선택해야 합니다. 설치된 템플릿 목록에서 Visual C# 또는 Visual Basic을 선택합니다.

  3. 프로젝트 템플릿 목록에서 Windows Forms 응용 프로그램을 선택하고 프로젝트 이름으로 MatchingGame을 지정한 다음 확인 단추를 선택합니다.

  4. 속성 창에서 다음 폼 속성을 설정합니다.

    1. 폼의 Text 속성을 Form1에서 일치 게임으로 변경합니다. 이 텍스트는 게임 창 위쪽에 표시됩니다.

    2. 이 폼의 크기를 550400픽셀로 설정합니다. 이렇게 하려면 **Size* 속성을 550, 550으로 설정하거나, IDE(통합 개발 환경)의 오른쪽 아래 모퉁이에 표시되는 크기가 원하는 크기가 될 때까지 폼의 모퉁이를 끌면 됩니다.

  5. IDE의 왼쪽에 있는 도구 상자 탭을 선택하여 도구 상자를 표시합니다.

  6. 도구 상자의 컨테이너 범주에서 TableLayoutPanel 컨트롤을 끌어와 이 컨트롤의 다음 속성을 설정합니다.

    1. BackColor 속성을 CornflowerBlue로 설정합니다. 이렇게 하려면 속성 창의 BackColor 속성 옆에 있는 드롭다운 화살표를 선택하여 BackColor 대화 상자를 엽니다. 그런 다음 BackColor 대화 상자의 탭을 선택하여 사용할 수 있는 색이름 목록을 봅니다.

      참고

      색은 알파벳 순서가 아니며 CornflowerBlue는 목록 맨 아래 가까이에 있습니다.

    2. 속성 옆에 있는 드롭다운 단추를 선택한 다음, 가운데 있는 큰 단추를 선택하여 Dock 속성을 Fill로 설정합니다. 이렇게 하면 전체 폼을 덮도록 테이블이 확장됩니다.

    3. CellBorderStyle 속성을 Inset으로 설정합니다. 이렇게 하면 보드의 각 셀 사이에 시각적 테두리가 생깁니다.

    4. TableLayoutPanel의 오른쪽 위 모퉁이에 있는 삼각형 모양의 단추를 선택하여 해당 작업 메뉴를 표시합니다.

    5. 작업 메뉴에서 행 추가를 두 번 선택하여 행을 두 개 이상 추가한 다음, 열 추가를 두 번 선택하여 열을 두 개 이상 추가합니다.

    6. 작업 메뉴에서 행 및 열 편집을 선택하여 열 및 행 스타일 창을 엽니다. 각 열을 선택하고 백분율 옵션 단추를 선택한 후 각 열의 너비를 전체 너비의 25%로 설정합니다. 그런 다음 창의 맨 위에 있는 드롭다운 상자에서 을 선택하고 각 행의 높이를 25%로 설정합니다. 완료되면 확인 단추를 선택합니다.

      이제 TableLayoutPanel이 크기가 같은 사각형 셀이 16개 포함된 4x4 모눈이 됩니다. 이러한 행과 열은 나중에 아이콘 이미지가 표시될 위치입니다.

  7. 폼 편집기에서 TableLayoutPanel이 선택되어 있어야 합니다. 이를 확인하려면 속성 창의 맨 위에 있는 tableLayoutPanel1을 확인합니다. 이 속성이 선택되어 있지 않은 경우 폼의 TableLayoutPanel을 선택하거나 속성 창 맨 위에 있는 드롭다운 컨트롤에서 이를 선택합니다.

    TableLayoutPanel이 선택된 상태에서 도구 상자를 열고 공용 컨트롤 범주에 있는 레이블 컨트롤을 TableLayoutPanel의 왼쪽 위 셀에 추가합니다. 이제 IDE에서 Label 컨트롤이 선택되어 있어야 합니다. 여기에 다음 속성을 설정합니다.

    1. 레이블의 BackColor 속성이 CornflowerBlue로 설정되어 있는지 확인합니다.

    2. AutoSize 속성을 False로 설정합니다.

    3. Dock 속성을 Fill로 설정합니다.

    4. 속성 옆에 있는 드롭다운 단추를 선택한 다음, 가운데 단추를 선택하여 TextAlign 속성을 MiddleCenter로 설정합니다. 이렇게 하면 셀의 중앙에 아이콘이 나타납니다.

    5. Font 속성을 선택합니다. 그러면 줄임표(...) 단추가 나타납니다.

    6. 줄임표 단추를 선택하고 글꼴 값을 Webdings로, 글꼴 스타일굵게, 크기72를 각각 설정합니다.

    7. 레이블의 Text 속성을 문자 c로 설정합니다.

      이제 TableLayoutPanel의 왼쪽 위 셀에는 파란색 배경의 가운데에 검은색 상자가 포함됩니다.

      참고

      Webdings 글꼴은 Windows 운영 체제에 포함된 아이콘 글꼴입니다. 일치 게임에서 플레이어는 일치하는 아이콘 쌍을 찾아야 하므로 이 글꼴을 사용하여 일치시킬 아이콘을 표시합니다. Text 속성을 c로 설정하는 대신 다른 문자를 입력하여 아이콘이 어떻게 표시되는지 확인해 보세요. 느낌표는 거미, 대문자 N은 눈 모양, 쉼표는 고추를 각각 나타냅니다.

  8. 레이블 컨트롤을 선택하고 TableLayoutPanel의 다음 셀에 이를 복사합니다. Ctrl+C 키를 선택하거나 메뉴 모음에서 편집, 복사를 선택합니다. 그런 다음 이 컨트롤을 붙여넣습니다. Ctrl+V 키를 선택하거나 메뉴 모음에서 편집, 붙여넣기를 선택합니다. TableLayoutPanel의 두 번째 셀에 첫 번째 레이블의 복사본이 나타납니다. 이 레이블을 다시 붙여넣으면 세 번째 셀에 다른 레이블이 나타납니다. 모든 셀이 채워질 때까지 Label 컨트롤 붙여넣기를 계속합니다.

    참고

    붙여넣기를 너무 많이 하면 TableLayoutPanel에 새 행이 추가되어 새 Label 컨트롤을 추가할 수 있는 위치가 생깁니다. 이를 실행 취소할 수 있습니다. 새 셀을 제거하려면 Ctrl+Z 키를 선택하거나 메뉴 모음에서 편집, 실행 취소를 선택합니다.

    이제 폼이 배치됩니다. 이 폼은 다음 그림과 같습니다.

    초기 일치 게임 폼
    초기 일치 게임 폼

계속하거나 검토하려면