아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 B코스 [초급12단] 회원가입폼, 회원정보수정폼, 패스워드찾기폼 디자인 변경하기
2012-06-15 23:13:00
아람스쿨 조회수 2230

이전 미션을 통해 한번에 로그인폼,회원가입폼, 회원정보수정폼, 패스워드찾기폼을 만들어 봤는데

회원가입폼, 회원정보수정폼, 패스워드찾기폼 페이지들은 어디서 나왔는지 궁금하실겁니다.

사실 홈페이지 계정을 생성하는 순간 이러한 기본 페이지들은 이미 만들어져 있습니다.

로그인박스를 만들면서 단순 하이퍼링크만 걸었을 뿐이랍니다.

그럼 회원가입폼, 회원정보수정폼, 패스워드찾기폼 페이지가 어디에 있는지 찾아보고 디자인도 수정해 봅시다.

 

  

  [디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]으로 이동합니다.

 여기 처음 오시죠? 겁먹지 않아도 됩니다.^-^

 미리 간단하게 말씀드리면 솔루션에서 자주 사용되는 페이지 또는 복잡한 프로그램이 포함되어 있는 페이지들을 미리 만들어 놓은 곳이라고 생각하시면 됩니다.

우선 수정하기 전에 모든 페이지의 스킨을 메인스킨으로 수정해줍니다.

수정방법은 페이지 분류에서 "전체페이지" 옆에 있는  설정 아이콘을 클릭하면 됩니다

 

 

이렇게 모든 페이지를 "메인스킨"으로 변경하는 이유는  아무런 스킨이 선택되어 있지 않아 홈페이지 상에서 확인할때  많이 불편하고 혹시나 빠뜨린 페이지가 있더라도 메인 화면 스킨을 사용함으로써 홈페이지가 깨지는현상을 줄이고자 합니다.

 

 

이제 회원가입폼 페이지를 찾아봅니다.

페이지 분류에서 "+ MYPAGE" 를 클릭합니다. ( + 모양을 클릭하시면 됩니다.)

그 밑으로 "회원가입 약관" 메뉴가 나오셨나요?^-^

아래 그림은 "회원가입약관"을 클릭 했을때 화면 입니다.

 

 

다소 생소한 화면이지만 앞으로 자주 접할테니 금방 적응 하실겁니다. ^-^

화면을 천천히 유심히 살펴 보세요. 우측에 보시면 "나만의디자인"이라고 되어있고 [새로 만들기]버튼이 있습니다.

바로 밑에 "기본 템플릿"이 있구요.

눈치 빠르신 분은 바로 이해하실겁니다. 모르겠다면 그냥 따라오세요. ^-^

 

  우측 "기본 템플릿"에서 "[XHTML] 기본형A"를 선택합니다.

 그리고 홈페이지로 가셔서 회원가입 버튼을 클릭해봅니다.

 이번엔 "회원가입 약관 C" 를 선택합니다.

 그리고 홈페이지로 가셔서 회원가입 버튼을 클릭해봅니다.

 어떤가요? 디자인이 바뀌었죠? ^-^

 

 기본 템플릿을 통해 디자인을 쉽게 변경하는 방법에 대해서 알아보았습니다.

이번엔 기본 템플릿을 나만의 디자인으로 복사해서 수정해보도록 하겠습니다.

 (참고로 기본 템플릿은 모든 사용자가 공용으로 사용되기 때문에 수정할 수 없도록 되어 있습니다.  수정을 원하시는분은 나만의 디자인으로 복사하신 다음 수정하시기 바랍니다.)

 우측에 "회원가입약관C-실명인증" 옆에 [보기]를 클릭하면 밑쪽으로 미리보기 화면이 나오고 그 밑에 [나만의 디자인으로 복사] 버튼이 있습니다. 클릭합니다.

 

  그럼 아래 그림처럼 "나만의 디자인"에 새로운 페이지가 생성된 것을 확인할 수 있습니다. 
생성된 페이지를 클릭하면 해당 디자인으로 적용됩니다. (라디오 버튼 클릭)

 "나만의 디자인"으로 복사된 디자인을 선택 후 [수정]버튼을 클릭 해주세요.

그럼 그 밑으로 원본소스가 나타납니다.

이제 마음껏 수정 하실 수 있습니다.   html을 모르신다면.. 따로 공부하셔야합니다. ^-^;;

 

 

※ 꼭 알아두세요.

1. 세부화면 디자인페이지는 일반 html 뿐만 아니라 각종 다양한 프로그램과 연동되어 있습니다.

그래서 세부화면 디자인에서 [새로 만들기]를 통해 생성하는 것보다

샘플로 제작되어 있는 것을 [나만의 디자인으로 복사] 한 다음 수정 하는 것이 바람직합니다.

 

2. 추가 페이지와 세부화면 디자인의 차이점은 위에서 말씀드린 것처럼

세부화면 디자인은 아주 복잡한 프로그램이 연동 되어 있으며, 각 페이지마다 연결주소가 정해져 있습니다.

반면에 추가페이지는 아무런 기능(프로그램)이 없으며 단순 html 및 디자인을 출력 하는 기능만 있습니다.

 

 

 위와 같은 방식으로 회원정보수정, 패스워드 찾기 페이지도 수정하시기 바랍니다.

페이지 위치는 아래와 같습니다.

+ MYPAGE > 회원가입 약관
+ MYPAGE > 회원 가입 폼
+ MYPAGE > 회원가입완료
+ MYPAGE > 회원정보 수정 폼
+ MYPAGE > 비밀번호/ID 찾기 폼(팝업)
+ MYPAGE > 회원ID중복검사(팝업)

수정 하기 귀찮으시면 그냥 기본 템플릿을 사용하셔도 됩니다.^-^

 

ps. 위에 회원가입약관 화면에서 "이용약관", "개인정보 취급방침"에 내용이 없으신 분은 [기본정보 》이용약관 설정]에서 표준약관을 복사합니다.

[기본정보 》개인정보취급방침]에서도 [기본개인정보취급방침 복사하기]를 통해 입력하시면 됩니다.

 

 

수고하셨습니다. ^^

 이번 미션은 따로 완성된 화면이 없습니다. 

세세하게 수정하고 싶으신분들을 위한 설명위주 미션이었습니다.

꼭! 이해는 하고 넘어가셔야 다음 미션 수행이 가능해집니다.^-^

그럼 다음 미션으로  갑니다.~~-^-^

 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^

 

댓글 93개