사이트 유형 - 이미지 유형

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

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

---

1.HTML 코드

코드 보기

<section id="imgType01" class="img__wrap nexon section" >
    <h2 >여우 사진 </h2 >
    <p >여러분은 엄청 귀여운 여우를 보실 수 있는 기회가 지금 생겼습니다. </p >
    <div class="image__inner container" >
        <article class="image img1" >
            <div class="image__box" >
                <h3 class="image__tit" >여우는 귀엽다. </h3 >
                <p class="image__desc" >여우는 옛날부 사람을 홀린다고 하였다. 그래서 너무 귀여운 것 같다고 한다. 여러분은 지금 자고 있는 여우사진을 보고 있습니다. </p >
                <a class="image__btn" href="/" >자세히보기 </a >
            </div >
        </article >
        <article class="image img2" >
            <div class="image__box" >
                <h3 class="image__tit" >여우는 귀엽다. </h3 >
                <p class="image__desc" >여우는 옛날부 사람을 홀린다고 하였다. 그래서 너무 귀여운 것 같다고 한다. 여러분은 지금 자고 있는 여우사진을 보고 있습니다. </p >
                <a class="image__btn brown" href="/" >자세히보기 </a >
            </div >
        </article >
    </div >
</section >

---

2.CSS 코드

코드 보기

/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}
/* reset */
* {
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
}
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: 49%;
    height: 370px;  
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.img1 {
    background-image: url(../img/img_bg_01_01.jpg);
}
.img2 {
    background-image: url(../img/img_bg_01_02.jpg);
}
.image__box {
    margin: 30px;
}
.image__tit {
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
}
.image__desc {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.image__btn {
    display: inline-block;
    font-size: 16px;
    padding: 8px 32px;
    background-color: #bf7538;
    color: #fff;
}
.image__btn.brown {
    background-color: #a77b59;
}

---

완성본

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