사이트 유형 - 이미지 유형2

사이트 유형 | 이미지유형2

모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금,
이미지 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI패턴입니다.

---

1.HTML 코드

코드 보기

<section id="imgType01" class="img__wrap gmarket section" >
    <h2 >펭귄 사진 </h2 >
    <p >여러분은 엄청 귀여운 펭귄를 보실 수 있는 기회가 지금 생겼습니다. </p >
    <div class="image__inner container" >
        <article class="image img1" >
            <div class="image__box color1" >
                <h3 class="image__tit" >펭귄 사진 </h3 >
                <a class="image__btn" href="/" >자세히보기 </a >
            </div >
        </article >

       <article class="image img2" >
            <div class="image__box color2" >
                <h3 class="image__tit" >펭귄 사진 </h3 >
                <a class="image__btn" href="/" >자세히보기 </a >
            </div >
        </article >
           
        <article class="image img3" >
            <div class="image__box color3" >
                <h3 class="image__tit" >펭귄 사진 </h3 >
                <a class="image__btn" href="/" >자세히보기 </a >
            </div >
        </article >
    </div >
</section >

---

2.CSS 코드

코드 보기

/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

.gmarket {
    font-family: 'GmarketSans';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
    vertical-align: top;
}
a {
    text-decoration: none;
    color: #000;
}
h1, h2, h3, h4 ,h5 h6 {
    font-weight: normal;
}

/* Common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
}

.section {
    padding: 120px 0;
}

.section >h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

.section >p {
    font-size: 22px;
    line-height: 1;
    text-align: center;
    font-weight: 300;
    color: #666;
    margin-bottom: 70px;
}

.gray {
    background-color: #f5f5f5;
}
/* imgType */
.image__inner {
    display: flex;
    justify-content: space-between;
}
.image {
    width: 32%; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.img1 {
    background-image: url(../img/img_bg_02_03.jpg);
}
.img2 {
    background-image: url(../img/img_bg_02_02.jpg);
}
.img3 {
    background-image: url(../img/img_bg_02_01.jpg);
}

.image__box {
    background-color: #000;
    text-align: center;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.image__tit {
    font-size: 24px;
    color: #fff;
    margin-bottom: 10px;
  
}
.image__btn {
    display: inline-block;
    font-size: 16px;
    color: #fff;
}

---

완성본

원본 사이트 보기 원본 소스 보기