반응형 이미지 목록 만들기

Desktop version Mobile version

간략한 반응형 이미지 목록을 만들어 보겠습니다.

반응형 목록의 레이아웃 전환 기준은 가로 820px를 기준입니다.

적용된 스타일은 다음과 같습니다.

1. 목록의 제목 좌우에 가로줄을 넣어 꾸미기

2. 이미지 위 글씨 넣기

3. 이미지 위 검은색 투명 배경 넣기

4. 가로 820px를 기준으로 이미지 배열이 2열, 1열로 변화

---

1. 반응형 이미지 목록 - HTML

<div class="img_category">
    <h1 class="tit_intro"><span>Category</span></h1>
    <a href="/category/Info">
    <div class="img" style="background-image: url(이미지링크주소1)">
        <div class="content">
            <h1>Info</h1>
        </div>
        <div class="img_cover">
        </div>
    </div>
    </a><a href="/category/Daily">
    <div class="img" style="background-image: url(이미지링크주소2)">
        <div class="content">
            <h1>Daily</h1>
        </div>
        <div class="img_cover">
        </div>
    </div>
    </a><a href="/category/Review">
    <div class="img" style="background-image: url(이미지링크주소3)">
        <div class="content">
            <h1>Review</h1>
        </div>
        <div class="img_cover">
        </div>
    </div>
    </a><a href="/category/Computer">
    <div class="img" style="background-image: url(이미지링크주소4)">
        <div class="content">
            <h1>Com</h1>
        </div>
        <div class="img_cover">
        </div>
    </div>
    </a>
</div>

반응형 이미지 html.txt

---

2. 반응형 이미지 목록 820px 이상일 때 - CSS

.tit_intro{position: relative;margin-bottom:20px;padding:0 20px;z-index:3}/* 제목입니다. */
.tit_intro:before {position: absolute;top:50%;left:0;right:0;bottom:0;width:100%;border-top:2px solid #eee;content:"";margin:0 auto;z-index:-1}/* 제목 꾸며주는 가로선 입니다.*/
.tit_intro span {background:#fff;padding: 0 15px;color:#666;}
.img_category{display:none;text-align:center;overflow:hidden;z-index:1}
.img_category .img{position:relative;float:left;width:50%;padding-bottom: 30.9%;background-size:cover}
.img_category .img_cover{position:absolute;height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.3)}
.img_category .img .content{position:absolute;width:100px;top:50%;left:50%; transform: translate(-50%, -50%); color: #fff; padding:30px; border:5px solid #fff;z-index:2}

반응형 이미지 css (desktop).txt

---

3. 반응형 이미지 목록 820px 이하일 때 - CSS

.tit_intro span{font-weight:bold}
.img_category{margin:10px 0;}
.img_category .img{float:none;width:100%;padding-bottom: 61.8%;margin-bottom:5px}
.img_category .img .content{padding:5px 0 5px;border:none}
.img_category .img .content h1:after{display:block; content:''; width:100%; margin: 0px auto; border: 2px solid #fff;}

반응형 이미지 css (mobile).txt