반응형 코딩시 가로배열
본문
반응형으로 코딩을 할때 예를들어
<div class="col-lg-6"> 같은 형식으로 코딩을 하면 화면크기에 따라서
큰 화면은 한줄에 2개씩 보이다가 모바일 사이즈에서는 한줄로 보이게 되는데요.
이것을 가로100% 에 맞춰서 이미지 사이즈가 줄어들면서 한줄에 똑같이 2개씩
보이게 하려면 어떻게 해야 하나요?
마찬가지로 가로폭에 맞춰서 사이즈에 상관없이
<div class="col-lg-3"> 이면 한줄에 4개씩
<div class="col-lg-4"> 이면 한줄에 3개씩
<div class="col-lg-6"> 이면 한줄에 2개씩 보이게 하고 싶습니다.
답변 3
클래스명을 보면 부트스트랩을 이용하시는거 같습니다.
부트스트랩 3 기준으로 col-xs-6 바꾸시면 모바일~PC 사이즈까지
2 column으로 보이게 됩니다.
img 태그에는 img-responsive를 클래스에 추가해 주시면 반응형 처리 됩니다.
답변 감사드립니다. 말씀하신대로 col-xs-4 로 바꾸니 한열에 3개씩으로 보여지는데, 문제는 이미지 크기 때문인지 가로폭이 일정 사이즈 이하로 줄어들면 이미지가 한줄 아래로 떨어집니다.
3열 (col-xs-4)로 배열했을때, 가로폭이 최소인 경우에도 이미지 사이즈가 각 열의 크기를 넘기지 않고 열 크기에 맞춰 조정되고 3열이 유지되게 하는 방법이 있을까요?
img 태그에 img-responsive 클래스를 추가해 주셨을까요?
답변주신 내용 참조해서 여러번 시행착오를 거듭해서 어찌어찌 찾아가면서 해결 했습니다.
배워야 할 게 많네요.^^ 도움 감사합니다.
img-responsive클래스적용
