웹탭뷰 아톰 실습
웹탭뷰는 하나의 웹페이지나 화면 영역상에 2개 이상의 뷰(View) 화면을 구성할 수 있게 해주는 디자인 요소 아톰입니다. 일반적으로 웹페이지에서 처리할 정보 항목들이 많거나, 항목들의 성격이 서로 다른 속성을 갖고 있는 경우, 유사한 항목들끼리 분류하여 탭으로 나누어서, 논리적으로 구분된 화면들을 구성할 때 사용합니다.
① 웹탭뷰 만들기
- 디자인 도구에서 웹탭뷰 아톰을 선택하고 화면에 원하는 크기만큼 웹탭뷰를 그립니다.
② 탭제목 변경하기
- 탭제목은 탭뷰버튼에 나타나는 제목을 의미합니다. 웹탭뷰 아톰을 우클릭하여 스타일속성 설정 화면을 띄웁니다.
- 탭1을 선택한 후, 탭제목란에서 ‘방명록’으로 입력합니다. 그리고 변경 버튼을 눌러서 제목을 변경합니다.
- 이미 설정되어 있는 속성을 변경하였을 때는 반드시 “변경” 버튼을 눌러야 변경 내용이 적용되 며, 새로 추가할 때에는 추가 버튼을 선택합니다.
- 탭2는 ‘공지사항’으로 탭제목을 변경합니다.
③ 탭크기와 위치 변경하기
- 웹탭뷰 아톰의 스타일속성 설정화면에서 탭뷰버튼의 너비와 높이, 위치 등을 정해줍니다.
- 위치지정에서 탭위치를 아래쪽으로 설정합니다.
- 크기지정에서 탭너비 200, 높이 40 으로 설정하면 좌측화면과 같이 탭위치와 크기가 변경됩니다.
- 탭 메뉴는 필요에 따라 글꼴 크기 및 색상 등 서식을 지정해줍니다.
이미지입력란 아톰 실습
이미지입력란은 이미지나, 사진, 그림 등을 입력하여 데이터베이스에 저장하거나 출력 할 때 사용합니다.
① 이미지입력란 그리기
- 데이터 입력도구에 있는 이미지입력란 아톰을 선택한 후, 파일첨부 항목아래에 그립니다.
② 이미지입력 스타일속성 설정하기
- 데이터속성에서 웹서버에 위치한 사진경로가 저장될 필드명을 설정합니다.
- 스타일속성의 저장폴더 입력란에는 웹서버에 저장될 사진의 폴더명을 입력합니다. (위 파일첨부에서 설정했던 경로와 같거나 사용자가 임의대로 지정하여도 무관합니다.)
- 그림효과는 크기맞춤으로 설정합니다.
댓글