사이트만들기 - 이미지 유형01

사이트 만들기

이미지 유형01

---

Figma

일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다.

HTML 작성

<section id="imageType01" class="image__wrap nexon section">
<h2>축구 강의⚽</h2>
<p>축구에 관한 기초, 드리블, 슈팅 강의 리스트 입니다.</p>
<div class="image__inner container">
    <article class="image img1">
        <h3 class="image__title">축구 기초 강의</h3>
        <p class="image__desc">축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다. 후보5명까지 있습니다.</p>
        <a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
    </article>
    <article class="image img2">
        <h3 class="image__title">축구 기초 강의</h3>
        <p class="image__desc">축구는 열한명의 선수가 한 팀이되어서 하는 구기종목입니다. 볼라인 아웃, 반칙, 오프사이드, 등등 다양한 규칙이 있으며, 공격수 미드필더 수비수 골키퍼로 나뉩니다. 후보5명까지 있습니다.</p>
        <a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
    </article>
</div>
</section>

CSS 작성

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

.nexon {
    font-family: "NexonLv1Gothic";
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;

}
a {
    text-decoration: none;
    color: #000;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
img {
    width: 100%;
}
/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
    
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 20px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}
/* imageType */
.image__inner {
    display: flex;
    justify-content: space-between;
}
.image {
    width: 49%;
    height: 370px;
    color: #fff;
    padding: 200px 30px 30px 30px;
    box-sizing: border-box;
}
.image.img1 {
    background: url(img/jpg_bg_01_01.jpg) no-repeat center;
}
.image.img2 {
    background: url(img/jpg_bg_01_02.jpg) no-repeat center;
}
.image__title {
    font-size: 32px;
    margin-bottom: 10px;
}
.image__desc {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.image__btn {
    font-size: 16px;
    color: #fff;
    background-color: #82c26b;
    padding: 10px 20px;
    display: inline-block;
}
.image__btn.yellow {
    background-color: #82c26a;
}

결과

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

---