2단계: 사용자 인터페이스 만들기

아티클
08/20/2008

업데이트: 2007년 11월

이제 웹 브라우저의 빌드를 시작합니다. Visual Basic Express Edition을 사용하여 컨트롤을 도구 상자에서 폼에 추가하는 방식으로 사용자 인터페이스(사용자와 상호 작용하는 가시적인 부분)를 빌드합니다.

도구 상자는 Visual Studio 왼쪽에 있으며 데이터, 구성 요소 및 모든 Windows Forms 같은 여러 개의 탭으로 구성되어 있습니다. 각 탭에는 응용 프로그램에 추가할 수 있는 컨트롤이나 구성 요소를 나타내는 항목의 집합이 들어 있습니다. 예를 들어 모든 Windows Forms 탭에는 폼으로 끌어 와 응용 프로그램에 추가할 수 있는 컨트롤을 나타내는 Textbox, Button 및 Checkbox라는 항목이 있습니다. 컨트롤의 크기에 대해서는 신경쓰지 마십시오. 다음 단원에서 응용 프로그램의 모양을 사용자 지정하는 방법을 배웁니다.

비디오에 링크 비디오 데모를 보려면 Video How to: Creating Your First Visual Basic Program을 참조하십시오.

응용 프로그램에 컨트롤을 추가하려면

도구 상자 패널을 클릭합니다.

도구 상자가 열립니다.

참고:

도구 상자 창을 열어 두면 사용하기가 더 편리합니다. 창을 열어 두려면 고정핀 모양의 자동 숨기기 아이콘을 클릭합니다.
도구 상자의 모든 Windows Forms 탭을 클릭하고 Panel 컨트롤을 폼의 왼쪽 위 모퉁이로 끌어 옵니다.

참고:

올바른 컨트롤을 찾기가 어려우면 도구 상자를 마우스 오른쪽 단추로 클릭하고 항목 사전순 정렬을 선택합니다.

참고:
도구 상자 창을 열어 두면 사용하기가 더 편리합니다. 창을 열어 두려면 고정핀 모양의 자동 숨기기 아이콘을 클릭합니다.

참고:
올바른 컨트롤을 찾기가 어려우면 도구 상자를 마우스 오른쪽 단추로 클릭하고 항목 사전순 정렬을 선택합니다.

같은 탭에서 TextBox 컨트롤을 끌어 와 Panel 위에 놓습니다.

참고:
끌어서 놓기 작업으로 컨트롤의 위치를 변경할 수도 있습니다. 또한 컨트롤의 가장자리 또는 모퉁이를 클릭하여 끌면 컨트롤의 크기를 조정할 수 있습니다.

같은 탭에서 Button 컨트롤을 끌어 와 Panel 위쪽, TextBox 컨트롤의 오른쪽에 놓습니다.

마지막으로 모든 Windows Forms 탭에서 WebBrowser 컨트롤을 선택하고 Panel 아래에 놓습니다.

참고:
WebBrowser 컨트롤이 폼 크기에 맞지 않는 경우 폼의 가장자리나 모퉁이를 끌어서 폼 크기를 조정할 수 있습니다.

참고:
도구 상자 창이 열려 있는 경우 창을 닫아 작업 공간을 추가로 확보할 수 있습니다. 창을 닫으려면 자동 숨기기 아이콘을 다시 클릭합니다.

자세히 보기

지금까지 네 개의 컨트롤을 폼에 추가했습니다. 컨트롤에는 표시되는 모양과 수행할 수 있는 작업을 정의하는 코드가 포함되어 있습니다.

Button 컨트롤을 예로 들면, 대부분의 프로그램에 "확인" 단추 또는 "끝내기" 단추가 있습니다. 화면에 단추를 그리고, 단추를 누르면 모양이 변경되도록 하고, 클릭하면 몇 가지 작업을 수행하도록 코드를 직접 작성할 수는 있지만 모든 프로그램에 대하여 이러한 작업을 수행하기란 매우 번거로운 일입니다. Button 컨트롤에는 이러한 작업을 수행하는 데 필요한 코드가 이미 포함되어 있으므로 불필요한 작업을 크게 줄일 수 있습니다.

도구 상자에는 수많은 컨트롤이 들어 있으며 각 컨트롤마다 고유한 용도가 있습니다. Panel 컨트롤은 앞에서 추가한 컨트롤 같은 다른 컨트롤을 포함하는 데 사용할 수 있습니다. Button 컨트롤은 클릭하면 프로그램 닫기와 같은 작업을 수행하는 데 일반적으로 사용합니다. TextBox 컨트롤은 키보드를 사용하여 화면에 텍스트를 입력하는 데 사용합니다. WebBrowser 컨트롤은 Internet Explorer와 유사한 기본 제공 웹 검색 기능을 제공합니다. 이러한 기능을 위한 코드를 직접 작성하기는 매우 번거롭습니다.

다음 단원에서는 이러한 컨트롤 및 다른 여러 컨트롤의 모양을 사용자 지정하는 방법과 컨트롤의 동작을 정의하는 코드를 작성하는 방법을 배웁니다. Toolbox 컨트롤 외에도 사용자 정의 컨트롤이라는 고유한 컨트롤을 만들 수 있습니다. 이러한 컨트롤에 대해서도 다음 단원에서 다룹니다.