12일차 - 부트스트랩3, 모바일 퍼스트 x 미디어쿼리(반응형)

밀레·2022년 10월 11일

목록 보기

41/135

1. 메인 배너 배경이미지 교체

1-1) HTML 헤더의 url(이미지)를 CSS로 옮김

1-2) HTML 태그에 id=#mainBanner 지정

<!-- Header -->
<div id="mainBanner">
	<h1 class="sr-only">상품이름 등등 장애인 사용자들이 들을 수 있게</h1>
</div>

상품이름 안 보임. 장애인 사용자가 들을 수 있도록

2. 모바일을 위한 CSS 스타일

화면 너비가 992px 이하일 때 (모바일용)

<style>

#mainBanner{
    background-image: url(../img/cj-2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto calc(100% - 10rem); /* 높이 기준으로 x축 auto, y축 calc */    

    max-height: 717px; /* 이미지 실제 세로길이 for 데스크탑. 넘으면 픽셀 터짐! */
    height: 0;
    padding-top: 70%; /* 모바일은 PC 사이즈의 60%로 줄어든다 */
    background-color: #fdedd3;
}

</style>

근데 너무 모바일에만 맞춰짐!

데스크탑에서는 이렇게 보임!

3. 데스크탑을 위한 미디어쿼리

3-1) 화면 너비가 992px 이상일 때, PC에서 변하는 부분 지정!

미디어쿼리 사용법

min-width 작은 것 -> 큰 순서 (320 -> 768 -> 992)
max-width 큰 것 -> 작은 순서 (992 -> 768 -> 320)

max-width: 1280px
max-width: 768px <-아래쪽으로 내려갈수록 반드시 먹혀야 하는 것!

<style>

@media (min-width: 992px){
    #mainBanner{
        background-size: contain; /* 자기 원래 사이즈 지켜라 */    
        height: 717px;
        padding-top: 0;
    }  
}

</style>

3-2) 전체 코드

<style>

/* 모바일을 위한 CSS 스타일 *//* 화면 너비가 992px 이하일 때 */
#mainBanner{
    background-image: url(../img/cj-2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto calc(100% - 10rem);

    max-height: 717px;
    height: 0;
    padding-top: 70%;
    background-color: #fdedd3;
}

/* 데스크탑을 위한 미디어쿼리 *//* 화면 너비가 992px 이상일 때 */
@media (min-width: 992px){
    #mainBanner{
        background-size: contain;  
        height: 717px;
        padding-top: 0;
    }  
}

</style>

1'. 광고 배너 이미지 교체 (반복연습)

1'-1) HTML 헤더의 url(이미지)를 CSS로 옮김

1'-2) HTML 태그에 id=#adBanner 지정

    <!-- Quote Call to Action -->
    <aside id="adBanner" class="cta-quote">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-5 col-md-offset-1 text-right">
                    <span class="quote">Good <span class="text-primary">design</span> is finding that perfect balance between the way something <span class="text-primary">looks</span> and how it <span class="text-primary">functions</span>.</span>
                    <hr class=" colored">
                    <a class="btn btn-outline-light page-scroll" href="#process">How We Work</a>
                </div>
            </div>
        </div>
    </aside>

2'. 모바일을 위한 CSS 스타일

<style>

#adBanner{
    background-image: url(../img/cj-1.jpg);
    background-repeat: no-repeat;
    background-color: #ff7f02;
    background-position: center;
    background-size: 100% auto; /* x축(width) 100_디바이스에 맞추고 / y축(높이) auto 맘대로 계산해 */
}

</style>

3'. 데스크탑을 위한 미디어쿼리

1차

<style>

@media (min-width: 768px){
    aside.cta-quote {		/* 요소검사에서 선임것 md 복붙해서 내꺼 재설정 */
        padding: 100px 0;
    }
    #adBanner{
        background-position: right center;
        background-size: auto 522px; /* 원래 이미지 사이즈 px 지정 */
    }
}

@media (min-width: 992px){
    aside.cta-quote {		/* 요소검사에서 선임것 md 복붙해서 내꺼 재설정 */
        padding: 200px 0px; 
    }
    #adBanner{
        
    }
}

</style>

2차

<style>

aside.cta-quote {
    padding: 50px 0 80vw;
}

@media (min-width: 768px){
    aside.cta-quote {
        padding: 100px 0;
    }
    #adBanner{
        background-position: right center;
        background-size: auto 522px; /* 원래 이미지 사이즈 px 지정 */
    }
}

@media (min-width: 992px){
    aside.cta-quote {
        padding: 200px 0px;
    }
    #adBanner{
        
    }
}

</style>