CSS 반응형

CSS 반응형

QA

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="부가이미지" >
답변을 작성하시기 전에 로그인 해주세요.
전체 59,282
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT