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

이 퀴즈를 개발하는 첫 번째 단계는 프로젝트를 만들고 폼에 레이블, 단추 및 기타 컨트롤을 추가하는 것입니다.As the first steps in developing this quiz, you create the project, and you add labels, a button, and other controls to a form. 추가한 각 컨트롤의 속성도 설정합니다.You also set properties for each control that you add. 프로젝트에 폼, 컨트롤 및 코드(자습서의 뒷부분에서 만듦)가 포함됩니다.The project will contain the form, the controls, and (later in the tutorial) code. 단추로 퀴즈를 시작하고 레이블에 퀴즈 문제를 표시하며 나머지 다른 컨트롤에 퀴즈의 답과 퀴즈 완료까지 남은 시간을 표시합니다.The button starts the quiz, the labels show the quiz problems, and the other controls show the quiz answers and the time that remains to finish the quiz.

참고

이 항목은 기본 코딩 개념에 대해 설명하는 자습서 시리즈의 일부입니다.This topic is part of a tutorial series about basic coding concepts. 자습서에 대한 개요는 자습서 2: 시간이 지정된 수학 퀴즈 만들기를 참조하세요.For an overview of the tutorial, see Tutorial 2: Create a Timed Math Quiz.

프로젝트를 만들고 폼의 속성을 설정하려면To create a project and and set properties for a form

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

  2. 설치된 템플릿 목록에서 C# 또는 Visual Basic을 선택합니다.In the Installed Templates list, choose either C# or Visual Basic.

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

    선택한 프로그래밍 언어에 따라 Form1.cs 또는 Form1.vb라는 폼이 표시됩니다.A form that's named Form1.cs or Form1.vb appears, depending on the programming language that you chose.

  4. 폼을 선택한 다음 Text 속성을 수학 퀴즈로 변경합니다.Choose the form, and then change its Text property to Math Quiz.

    속성 창에는 폼 속성이 포함되어 있습니다.The Properties window contains properties for the form.

  5. 이 폼의 크기를 500*400픽셀로 변경합니다.Change the size of the form to 500 pixels wide by 400 pixels tall.

    IDE(통합 개발 환경)의 왼쪽 아래 모퉁이에 올바른 크기가 표시될 때까지 폼의 가장자리를 끌어서 크기를 조정할 수 있습니다.You can resize the form by dragging its edges until the correct size appears in the lower-left corner of the integrated development environment (IDE). 또는 Size 속성의 값을 변경해도 됩니다.As an alternative, you can change the values of the Size property.

  6. FormBorderStyle 속성의 값을 Fixed3D로 변경하고 MaximizeBox 속성을 False로 설정합니다.Change the value of the FormBorderStyle property to Fixed3D, and set the MaximizeBox property to False.

    값을 이렇게 설정하면 퀴즈를 푸는 사람이 폼 크기를 변경할 수 없습니다.These values prevent quiz takers from resizing the form.

남은 시간 상자를 만들려면To create the Time Remaining box

  1. 도구 상자에서 Label 컨트롤을 추가한 다음 (Name) 속성의 값을 timeLabel로 설정합니다.Add a Label control from the Toolbox, and then set the value of its (Name) property to timeLabel.

    이 레이블은 오른쪽 위 모퉁이에 퀴즈의 남은 시간(초)을 표시하는 상자로 나타납니다.This label will become a box in the upper-right corner that shows the number of seconds that remain in the quiz.

  2. 상자의 크기를 조정할 수 있도록 AutoSize 속성을 False로 변경합니다.Change the AutoSize property to False so that you can resize the box.

  3. BorderStyle 속성을 FixedSingle로 변경하여 상자 주위에 선을 그립니다.Change the BorderStyle property to FixedSingle to draw a line around the box.

  4. Size 속성을 200, 30으로 설정합니다.Set the Size property to 200, 30.

  5. 파란색 공백 줄이 나타나는 폼의 오른쪽 위 모퉁이로 레이블을 이동합니다.Move the label to the upper-right corner of the form, where blue spacer lines will appear.

    이 줄을 사용하면 폼의 컨트롤을 쉽게 정렬할 수 있습니다.These lines help you align controls on the form.

  6. 속성 창에서 Text 속성을 선택한 다음 백스페이스 키를 선택하여 속성 값을 지웁니다.In the Properties window, choose the Text property, and then choose the Backspace key to clear its value.

  7. Font 속성 옆의 더하기 기호(+)를 선택한 다음 Size 속성의 값을 15.75로 변경합니다.Choose the plus sign (+) next to the Font property, and then change the value of the Size property to 15.75.

    다음 그림과 같이 여러 가지 글꼴 속성을 변경할 수 있습니다.You can change several font properties, as the following picture shows.

    글꼴 크기가 표시된 속성 창Properties window showing font size
    글꼴 크기가 표시된 속성 창Properties window showing font size

  8. 도구 상자에서 다른 Label 컨트롤을 추가한 후 글꼴 크기를 15.75로 설정합니다.Add another Label control from the Toolbox, and then set its font size to 15.75.

  9. Text 속성을 Time Left로 설정합니다.Set the Text property to Time Left.

  10. 레이블을 이동하여 timeLabel 레이블 바로 왼쪽에 정렬합니다.Move the label so that it lines up just to the left of the timeLabel label.

더하기 문제의 컨트롤을 추가하려면To add controls for the addition problems

  1. 도구 상자에서 Label 컨트롤을 추가한 후 Text 속성을 ?로 설정합니다.Add a Label control from the Toolbox, and then set its Text property to ? 설정합니다.(question mark).

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

  3. Size 속성을 60, 50으로 설정합니다.Set the Size property to 60, 50.

  4. 글꼴 크기를 18로 설정합니다.Set the font size to 18.

  5. TextAlign 속성을 MiddleCenter로 설정합니다.Set the TextAlign property to MiddleCenter.

  6. Location 속성을 50, 75로 설정하여 컨트롤을 폼에 배치합니다.Set the Location property to 50, 75 to position the control on the form.

  7. (Name) 속성을 plusLeftLabel로 설정합니다.Set the (Name) property to plusLeftLabel.

  8. plusLeftLabel 레이블을 선택한 다음 Ctrl+C 키를 누르거나 편집 메뉴의 복사를 선택합니다.Choose the plusLeftLabel label, and then choose either the Ctrl+C keys or Copy on the Edit menu.

  9. Ctrl+V 키를 누르거나 편집 메뉴의 붙여넣기를 선택하여 레이블을 세 번 붙여넣습니다.Paste the label three times by choosing either the Ctrl+V keys or Paste on the Edit menu.

  10. 세 레이블이 plusLeftLabel 레이블의 오른쪽에 나란히 놓이도록 정렬합니다.Arrange the three new labels so that they are in a row to the right of the plusLeftLabel label.

    공백 줄을 사용하여 세 레이블을 일정한 간격으로 정렬할 수 있습니다.You can use the spacer lines to space them out and line them up.

  11. 두 번째 레이블의 Text 속성 값을 +(더하기 기호)로 설정합니다.Set the value of the second label's Text property to + (plus sign).

  12. 세 번째 레이블의 (Name) 속성 값을 plusRightLabel로 설정합니다.Set the value of the third label's (Name) property to plusRightLabel.

  13. 네 번째 레이블의 Text 속성 값을 =(등호)로 설정합니다.Set the value of the fourth label's Text property to = (equal sign).

  14. 도구 상자에서 NumericUpDown 컨트롤을 추가한 후 글꼴 크기를 18로, 너비를 100으로 설정합니다.Add a NumericUpDown control from the Toolbox, set its font size to 18, and set its width to 100.

    이 컨트롤 종류에 대해서는 나중에 자세히 설명하도록 하겠습니다.You'll learn more about this kind of control later.

  15. 더하기 문제의 레이블 컨트롤에 맞춰 NumericUpDown 컨트롤을 정렬합니다.Line up the NumericUpDown control with the label controls for the addition problem.

  16. NumericUpDown 컨트롤의 (Name) 속성 값을 sum으로 변경합니다.Change the value of the (Name) property for the NumericUpDown control to sum.

    다음 그림과 같이 첫 번째 행이 만들어졌습니다.You've created the first row, as the following picture shows.

    수학 퀴즈의 첫 번째 행First row of math quiz
    수학 퀴즈의 첫 번째 행First row of math quiz

빼기, 곱하기 및 나누기 문제의 컨트롤을 추가하려면To add controls for the subtraction, multiplication, and division problems

  1. 더하기 문제의 컨트롤 다섯 개(Label 컨트롤 네 개와 NumericUpDown 컨트롤 한 개)를 모두 복사한 다음 붙여 넣습니다.Copy all five controls for the addition problem (the four Label controls and the NumericUpDown control), and then paste them.

    폼에 선택된 상태의 새 컨트롤 다섯 개가 포함되어 있습니다.The form contains five new controls, which are still selected.

  2. 다섯 개의 컨트롤을 모두 이동하여 더하기 컨트롤 아래에 배치합니다.Move all of the controls into place so that they line up below the addition controls.

    공백 줄을 사용하여 두 행 사이에 충분한 간격을 둘 수 있습니다.You can use the spacer lines to give enough distance between the two rows.

  3. 두 번째 레이블의 Text 속성 값을 -(빼기 기호)로 변경합니다.Change the value of the Text property for the second label to - (minus sign).

  4. 첫 번째 물음표 레이블의 이름을 minusLeftLabel로 지정합니다.Name the first question-mark label minusLeftLabel.

  5. 두 번째 물음표 레이블의 이름을 minusRightLabel로 지정합니다.Name the second question-mark label minusRightLabel.

  6. NumericUpDown 컨트롤의 이름을 difference로 지정합니다.Name the NumericUpDown control difference.

  7. 다섯 개의 컨트롤을 두 번 더 붙여 넣습니다.Paste the five controls two more times.

  8. 세 번째 행의 경우 첫 번째 레이블의 이름을 timesLeftLabel로 지정하고, 두 번째 레이블의 Text 속성을 ×(곱하기 기호)로 변경하고, 세 번째 레이블의 이름을 timesRightLabel로 지정하고, NumericUpDown 컨트롤의 이름을 product로 지정합니다.For the third row, name the first label timesLeftLabel, change the second label's Text property to × (multiplication sign), name the third label timesRightLabel, and name the NumericUpDown control product.

  9. 네 번째 행의 경우 첫 번째 레이블의 이름을 dividedLeftLabel로 지정하고, 두 번째 레이블의 Text 속성을 ÷(나누기 기호)로 변경하고, 세 번째 레이블의 이름을 dividedRightLabel로 지정하고, NumericUpDown 컨트롤의 이름을 quotient로 지정합니다.For the fourth row, name the first label dividedLeftLabel, change the second label's Text property to ÷ (division sign), name the third label dividedRightLabel, and name the NumericUpDown control quotient.

    참고

    이 자습서에서 곱하기 기호 ×와 나누기 기호 ÷를 복사하여 폼에 붙여 넣을 수 있습니다.You can copy the multiplication sign × and the division sign ÷ from this tutorial and paste them onto the form.

시작 단추를 추가하고 탭 인덱스 순서를 설정하려면To add a start button and set the tab-index order

  1. 도구 상자에서 Button 컨트롤을 추가한 후 (Name) 속성을 startButton으로 설정합니다.Add a Button control from the Toolbox, and then set its (Name) property to startButton.

  2. Text 속성을 퀴즈 시작으로 설정합니다.Set the Text property to Start the quiz.

  3. 글꼴 크기를 14로 설정합니다.Set the font size to 14.

  4. 단추의 크기가 텍스트에 맞게 자동으로 조정되도록 AutoSize 속성을 True로 설정합니다.Set the AutoSize property to True, which causes the button to automatically resize to fit the text.

  5. 단추를 폼의 아래쪽 가운데에 배치합니다.Center the button near the bottom of the form.

  6. startButton 컨트롤의 TabIndex 속성 값을 1로 설정합니다.Set the value of the TabIndex property for the startButton control to 1.

    참고

    TabIndex 속성은 퀴즈를 푸는 사람이 Tab 키를 선택할 때 컨트롤의 순서를 설정합니다.The TabIndex property sets the order of the controls when the quiz taker chooses the Tab key. 작동 방식을 보려면 메뉴 모음에서 파일, 열기를 선택하는 등의 작업을 수행하여 아무 대화 상자나 열고 Tab 키를 여러 번 눌러 봅니다.To see how it works, open any dialog box (for example, on the menu bar, choose File, Open), and then choose the Tab key a few times. Tab 키를 선택할 때마다 커서가 컨트롤 사이에서 어떻게 이동하는지 살펴봅니다.Watch how your cursor moves from control to control each time that you choose the Tab key. 이러한 순서는 폼이 만들어질 때 프로그래머에 의해 설정됩니다.A programmer decided the order when creating that form.

  7. NumericUpDown sum 컨트롤의 TabIndex 속성 값을 2, difference 컨트롤의 경우 3, product 컨트롤의 경우 4, quotient 컨트롤의 경우 5로 설정합니다.Set the value of the TabIndex property for the NumericUpDown sum control to 2, for the difference control to 3, for the product control to 4, and for the quotient control to 5.

    그러면 폼이 다음 그림과 같이 표시됩니다.The form should look like the following illustration.

    초기 수학 퀴즈 폼Initial math quiz form
    초기 수학 퀴즈 폼Initial math quiz form

  8. TabIndex 속성이 예상대로 작동하는지 확인하려면 프로그램을 저장한 후 F5 키를 선택하거나 메뉴 모음에서 디버그, 디버깅 시작을 선택하여 프로그램을 실행한 다음 Tab 키를 여러 번 누릅니다.To verify whether the TabIndex property works as you expect, save and run your program by choosing the F5 key, or by choosing Debug, Start Debugging on the menu bar, and then choose the Tab key a few times.

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