Day5(결제 폼 만들기2)

안녕하세요. 오늘은 Day4에 이어 결제 폼을 이어서 만들어보도록 하겠습니다.

 

오늘 만들 부분은 아래와 같습니다.

 

 

우선 제일 처음 이것을 봤을때 어떻게 만들어야 하나 고민을 많이 했습니다.

상단의 그림을 2가지 부분으로 나누어 생각해보겠습니다.

그림(1)

그림(2)

 

 

그림(1)에 대해 아래의 그림과 같이 소분해서 생각해보겠습니다. 

그림(3)

그림(4)

 

그림(3)을 만들어보겠습니다.

그림(4)을 만들어보겠습니다.

 

 

 

그림(2)에 대해 아래의 그림과 같이 소분해서 만들어보겠습니다.

그림(5)

그림(6)

 

그림(5)를 만들어보겠습니다.

 

그림(6)을 만들어보겠습니다.