화면 사이즈에 따라 배치 변경 질문이요
본문
현재 페이지가
내용 사진
사진 내용
내용 사진
사진 내용
이런식으로 짜놨는데요
pc일땐 괜찮은데 이게 화면 사이즈가 줄어들면(ex핸드폰)
내용
사진
사진
내용
내용
사진
이렇게 돼 버려서요
사이즈가 줄어들었을때만
내용
사진
내용
사진
이렇게 교차되게 만드려면 어떻게 해야 좋을까요?
답변 2
마크업 순서가
내용 / 사진
사진 / 내용
으로 되어 있어서 그렇습니다
마크업을
내용 / 사진
내용 / 사진
순으로 마크업 하고
css 로 컨트롤 하시면 됩니다.
float 으로도 가능하고 flex 로도 가능하고 css로의 방법은 많습(?) 여러 방법이 있습니다!
pc에서 첫 콘텐츠는 정렬 순서가 마크업된 순서 그대로니깐 nth-child(even) 으로 짝수번째 콘텐츠들을 컨트롤 하시면 됩니다
display:flex 를 사용하고 자식 속성에 order 값을 변경해 주면 출력하는 위치 순서를 바꿀수 있습니다.
<div class='wrapper'>
<div class='div1'></div>
<div class='div2'></div>
</div>
.wrapper{display:flex;}
.div1{order:2;}
.div2{order:1;}
간단한 예를 들면 이렇게요.
모든 내용들을
내용 사진 순서로 구성해 놓고 pc 일경우 짝수 줄에만 order를 사용해서
사진 내용으로 나오게끔 구성하면 될것 같습니다.
감사합니다!
답변을 작성하시기 전에 로그인 해주세요.
