목록으로

CSS 반응형 채택완료

akworjs0517

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전 조회 2,684

답변 4

예제

위 링크처럼 모바일, 테블릿, PC 마다 다르게 아이템을 출력시키려고합니다.

flex를 사용해야되는것같은데 감이안잡히네요...

위의 사이트와 같은 예제는 어디서 찾을수있을까요?

#css #레이아웃

답변 4개

정렬:

비펫3

프로필 보기 이 회원 글보기 이 회원의 댓글보기

6년 전

플렉스는 정렬에 특화되있고요. 미디어쿼리가 더 좋아요

아래 태그 써놓고 연습(?) 해보세요. 창크기(폭) 줄였다 키웠다 해보세요.

이미지는 위키이미지입니다. 안보이면 다른걸로 바꾸세요.

부가이미지에 퍼센트가 9자로 끝나는 것은 공백때문에 밀림 방지용입니다.

다른방법도 있으니 연구해보세요. css box_sizing 이란 속성 검색해보세요.

Copy

<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="부가이미지" >