HTML label 구조를 바꾸려면 어떻게 해야하나요?

Question

제가 과제로 아래에 있는 사진처럼 코딩을 해야하는 상황인데 현재까지 코딩을 한 결과가 위에 있는 사진입니다.

사진 보시면 아시겠지만 lable이 아래에 있고 레이블명이 위에 있어야 하는데 어떻게 하면 저런 구조로 만들 수 있는지 모르겠습니다.

table이랑 tr을 활용해서 줄을 바꿔주어야 하나요?

p로 줄을 바꾸려고 하면 First Name이랑 Last Name이 나란히 일자로 있는 구조를 구현할 수가 없는 거 같아서 p로 하는 건 포기했습니다.

• 
• 

Answer 1

<div style="display: table;border: 1px solid black;">

<div style="display: table-row;">

<div style="display: table-cell;">

<p>First Name</p>

<input />

</div>

<div style="display: table-cell;">

<p>First Name</p>

<input />

</div>

</div>

</div>

가볍게 참고하시라고 샘플코드 드립니다. 위의 소스 코드를 적용하면 아래와 같은 레이아웃이나옵니다.

참고용 코드이기에 CSS와 Layout은 적용하지 않았습니다.