반응형 리스트 상품수 관련 문의 드립니다.
본문
부트스트랩을 이용해서 반응형으로 제작 하였습니다.
한페이지에 상품 24개를 진열하는데, 부트스트랩의 분기점인
col-xs (768px 이하)에서 2개씩 12줄
col-sm (768px 이상)에서 3개씩 8줄
col-mm (992px 이상)에서 4개씩 6줄
col-lm (1200px 이상)에서 6개씩 4줄
로 출력하고 있습니다.
그런데 상품 컬럼마다 세로 사이즈가 달라서 배열이 계속 일그러집니다.
list.10.skin.php에서는 'ca_list_mod'를 인식해서 매 열의 첫상품엔 sct_last, 마지막 상품엔 sct_clear 클래스를 적용시켜 재 정렬을 시키고 있는것 같은데요.
ca_list_mod를 위 분기점별로 미디어쿼리를 적용시킬 수 있는 방법이 있을 까요?
php에서는 미디어쿼리를 사용할 수 없다고 들어서 다른 방법을 아무리 생각해봐도 떠오르지 않습니다.
고수님들의 도움을 구합니다. ㅠ
답변 1
1. 미디어 쿼리는 css 입니다 당연히 php 에서 실행하는게 아닙니다
2. col-xs (768px 이하)에서 2개씩 12줄
col-sm (768px 이상)에서 3개씩 8줄
col-mm (992px 이상)에서 4개씩 6줄
col-lm (1200px 이상)에서 6개씩 4줄
이렇게 되있다는건 해당 박스가 이미 미디어 쿼리로 분기점이 잡혀있단 의미 입니다
이 분기점 안에 높이값을 각각 넣어주세요 height:200px; 이런식으로요
강제적으로 높이를 잡으면 들쑥 날쑥을 어느정도 피할수는있습니다
3. 제목줄이 1줄에서 두줄로 바꿔어서 나온느 문제라면 css elipsis 옵션으로 한줄로만 나오면서 칸이 좁아지면 ... 처리를 자동으로 처리하게 바꿔보세요.
네, 현재 말씀하신대로 분기점마다 높이를 지정해서 사용하고 있긴한데, 높이를 지정해두니 모바일의 경우 사용 기종에 따라 높이가 미세하게 달라져서 어떤 기기에서는 여백이 많아 보이고, 어떤 기종에선 약간 짤리고 이렇더라구요.
그래서 높이 지정없이 사용하고자 한것 입니다.
말씀하신 elipsis 옵션으로 ... 처리 하는것으로 한번 시도해 보아야 겠습니다.
많은 도움이 되었습니다.
감사 합니다.