• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

contact-form 과 contact-info 의 높이

21.02.17 12:51 작성 조회수 143

1

contact-form와 contact-info 의 높이를 동일하게 맞추고 또 contact info 의 각각의 컨텐츠들의 높이비율? 같은걸 맞추고싶은데

이럴때의 방법은 flex 밖에 없는걸까요? 아니면 padding-top 같은 방법을 이용해서 대략적으로 맞추는 걸까요?

답변 2

·

답변을 작성해보세요.

2

contact-form와 contact-info 가로 배치는 float로 했고 너비는 50%, 높이는 400픽셀로 했는데 질문하시는 내용이 각 div 내에서 컨텐츠의 높이를 같게 맞추고 싶다는 말씀인 듯 하네요. 

이런 경우에는 꼭 높이를 맞춰야 하는건 아니지만 높이를 맞추려면 방법은 몇가지 있습니다.

첫째번는 컨텐츠의 높이가 적은 쪽의 요소에 패딩과 마진으로 높이를 맞추는 방법이구요.

두번째는 flex 또는 grid의 속성중에 justify-content: space-between;을 해서 처음 요소와 마지막 요소를 상단과 하단에 붙고 중간의 요소는 일정하게 배치시키는 속성을 이용하셔도 됩니다. justify-content: space-between;은 flex와 grid에서 모두 동일하게 사용할 수 있는 속성입니다.

특별한 경우가 아니라면 첫번째 방법으로 하셔도 크게 문제 없다고 생각됩니다.

0

김민수님의 프로필

김민수

질문자

2021.02.18

감사합니다~