컨텐츠몰 특별할인 9월1일~12월31일

CSS 반응형

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
CSS 반응형

QA

CSS 반응형

본문

예제

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

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

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

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 4

조나단입니다님의 답변

https://www.youtube.com/watch?v=eprXmC_j9A4&t=20s

 

이 동영상 보면서 따라해보시면 좋을 것 같습니다. 저도 예전에 이영상 참고 많이했어요

주소복사
답변의 댓글

팻시님의 답변

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

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

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

부가이미지에 퍼센트가 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="부가이미지" >
주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 91,414 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

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

© SIRSOFT