CSS 반응형
본문
위 링크처럼 모바일, 테블릿, PC 마다 다르게 아이템을 출력시키려고합니다.
flex를 사용해야되는것같은데 감이안잡히네요...
위의 사이트와 같은 예제는 어디서 찾을수있을까요?
답변 4
반응형은 부트스트랩이 좋죠
플렉스는 정렬에 특화되있고요. 미디어쿼리가 더 좋아요
아래 태그 써놓고 연습(?) 해보세요. 창크기(폭) 줄였다 키웠다 해보세요.
이미지는 위키이미지입니다. 안보이면 다른걸로 바꾸세요.
부가이미지에 퍼센트가 9자로 끝나는 것은 공백때문에 밀림 방지용입니다.
다른방법도 있으니 연구해보세요. css box_sizing 이란 속성 검색해보세요.
<style>
#__미디어_쿼리_정의__ { content:"이 줄은 주석대신 설명으로 사용함" }
#__모니터_사이즈_일람__ { content:"주석: 모니터 사이즈 : 1024 800 768 720 640 600 480 360 320 "; }
.대표이미지 { border:2px dashed red; }
.부가이미지 { border:2px dashed blue; }
@media all and (max-width: 479px) {
.대표이미지 {
width:100%;
Float:None;
}
.부가이미지 {
width:100%;
Float:None
}
}
@media all and (min-width: 480px) and (max-width: 719px) {
.대표이미지 {
width:100%;
Float:None;
}
.부가이미지 {
width:49%;
Float:Left
}
}
@media all and (min-width:720px) {
.대표이미지 {
width:70%;
Float:Left;
}
.부가이미지 {
width:29%;
Float:Left
}
}
</style>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg" class="대표이미지" title="대표이미지" >
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg" class="부가이미지" title="부가이미지" >
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Isola_di_capri.jpg" class="부가이미지" title="부가이미지" >
답변을 작성하시기 전에 로그인 해주세요.