[액션태그]간단한 쇼핑몰 상세페이지 만들기(기본)-part2-

전 시간에 로그인&회원가입 하는 창과 그에 따른 기본적인 구조에 대해 포스팅을 하였습니다.

이번 시간에는 나머지 부분에 대해 모조리~ 전부다 정리해 보도록 할게요~

밑에 보이는 사진 보이시죠??

이게 최종적으로 만들게 될 결과물 입니다.

자, 일단 맨 위의 WATER BOTTLE 홈페이지 라는 홈페이지 이름을 적기 위해

top.jsp 파을을 만들어 줍니다.

//여기서 전 시간 part1에서 top.jsp 파일에 대한 내용을 right.jsp 파일로 다시 수정해 주시기 바랍니다.

top.jsp 파일에 이렇게 적어줍니다.

그리고 template.jsp 파일에서 위와 같이 작성을 해준다음 RUN을 돌려보겠습니다.

분명 top.jsp 파일을 작성하고 액션태그를 사용해서 불러드렸습니다.

근데 왜 위와같이 나타나질까요??

그 이유는 바로 forward액션태그를 이용해서 그렇기 때문입니다.

forward액션태그를 include 액션태그로 변경을 해 주시면

이와 같이 아주 잘 나타나 집니다.

[해석]

이미 table태그에서 폭(넓이), 위치 를 지정을 해 주었습니다.

여기서는 

<tr>

<td height="43" align="center" colspan="2" bgcolor="ffe4b5">

<jsp:include page="top.jsp"/>

</td>

    </tr>

높이(heighh)는 43, 열(td)의 위치(align)는 center(중앙) 으로, colspan=2 는 2열을 병합한다는 뜻 입니다.

그리고 bgcolor="ffe4b5" 요것은 뺵그라운데 즉, 배경화면의 색상을 지정하는 건데요

HTML색상표는 굳이 안외우셔도 되요

그리소 2열을 병합한 이유는 이제 설명하겠습니다.

photo.jsp파일과 main.jsp을 만들어 주시기 바랍니다.

만들어 주신 다음에 template.jsp 파일로 와 주시기 바랍니다.

17줄~25줄 다시 수정을 해 주시기 바랍니다.~^^

[해석]

이건 1행 2열 이라는 뜻 입니다.

--> <tr>

<td> </td>

<td> </td>

<tr>  //1행 2열

18줄 : "여기에 있는 값들의 배치는(align) 왼쪽으로(left) 넓이(width)는 100%중 85%"

19줄 : "a태그를 사용하므로써 HOME이라는 문구를 클릭하면 main.jsp 파일로 넘어가게끔 설정"

20줄 : "a태그를 사용하므로써 PHOTO라는 문구를 클릭하면 photo.jsp 파일로 넘어가게끔 설정"

22줄 : "2열에 있는 값들의 배치는(align) 중앙에(center) 하겠다"

23줄 : "include 액션태그를 사용하므로써 right.jsp페이지를 불러들인다."

여기서 forward와 include 액션태그에 대해 다시 집고 넘어가도록 하겠습니다.

forward액션태그는 "제어권을 포워딩 되는 페이지로 완전히 넘기고 그 페이지의 처리가 끝나면 모든 응답을 종료"

시키는 방식이였습니다.

 

그런데 include액션태그는 "임시로 제어권을 include되는 페이지로 넘겼다가 그 페이지의 처리가 끝나면 처리 결과를 원래 페이지리 리턴하고 다시 원래의 페이지로 제어권을 반환"하는 방식입니다.

자, 여기서 HOME와 PHOTO 이쪽은 홈페이지 중에서 고정페이지 역활을 하는 놈 입니다.

일단!! HOME을 클릭하면 넘어가는 페이지인 main.jsp 파일로 가주시기 바랍니다.

main.jsp 파일로 오셔서 

<jsp:include page="template.jsp"/>

이렇게 입력을 해 주시기 바랍니다.

이렇게 입력하는 이유는 일반적인 홈페이지에서 HOME버튼을 누르면 

그 main화면으로 이동하게하는 역활을 하기 때문에 

여기서 main화면은 template.jsp 파일이니까 이렇게 설정을 해 준 것 입니다.

RUN을 돌려보면 맨처음 경로는 template.jsp입니다.

그치만 HOME버튼을 클릭을 해 주면

이렇게 main.jsp로 경로가 변경이 됩니다.

이제 photo.jsp파일로 가 주시기 바랍니다.

이렇게 입력을 하고 

template.jsp에서 RUN을 한다음에 PHOTO버튼을 클릭하면

요렇게 나와요~

part2에서는 상단 부분과 고정 페이지에 대해 포스팅을 하였습니다.

part3에서는 main화면과 bottom에 대해서 포스팅을 할게요

아래 손가락 꾹~ 한번씩만 눌러주세요