(HTML / CSS / javascript / jQuery) float 정렬시 높이를 공유하는 height-sync (반응형 가능)

See the Pen float 정렬시 높이 공유하는 height-sync (반응형 가능) by kimyangsun (@kimyangsun) on CodePen.

https://codepen.io/kimyangsun/pen/YzXwYby?editors=1010

float 정렬시 높이 공유하는 height-sync (반응형 가능)

이번 코드는 float으로 셀들을 정렬시 내부에 글자나 사진등이 높이가 다를경우에는

 

각각 셀들의 높이가 달라질 수가 있습니다. 이 경우에 다른 옆에 셀들의 높이도 동일하게 맞춰주기 위해서는

 

display table 그리고 table-cell 로 해결하는 방법도 있지만 이 경우에는 반응형으로 적용하려면 css를 일일이 전부

 

수정해줘야 하는 번거로움이 있을 수 있습니다.

 

그 경우에 float 을 사용하면서 높이를 동일하게 맞춰주는 이 코드로 상황에 따라 응용하여 사용할 수 있을 것 같습니다.

 

data-height-sync-group-no 라는 요소를 필요한 태그에 넣어주고 값을 1_401up_750down 이런식으로

 

넣어주면 401부터 750 사이에 1그룹을 만든다 라는 의미인데 이 요소들을 2개의 셀에 넣어주면 이 2개의 셀은

 

401 부터 750 사이에 같은 높이, 즉 하나로 묶인다는 의미와 같습니다. 그 후에 2_ 나 3_ 등으로

 

여러개의 그룹으로도 만들어줄 수 있습니다.

 

그 후에는 css로 반응형 미디어 쿼리를 설정해주시면 됩니다.