텍스트유형02 - 사이트만들기

텍스트유형 02번

이번에 만들어볼 사이트입니다.
자세히보기가 들어가있는 형식의 사이트입니다.
피그마를 이용하여 이미지를 만들어 작업하였습니다.

CSS

이미지를 백그라운드 효과 방식으로 삽입하였습니다.
flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다.
자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다.

   .nexon {
    font-family: 'NexonLv1GothicLow';
}

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

a {
    text-decoration: none;
    color: #000;
}

img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

/* common */
.container {
    width: 1200px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1200px;
}

.section {
    padding: 120px 0;
}

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

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

.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/* textType02 */
.text__inner {
    display: flex;
}

.text__head {
    width: 413px;
    margin-right: 50px;
}

.text__head .logo {
    width: 230px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    background-color: #CD2020;
    text-align: center;
    border-radius: 50px;
    margin-bottom: 20px;

}

.text__head .title {
    margin-bottom: 50px;
    font-size: 50px;
    font-weight: 700;
}

.text__head .desc {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
}

.text__card {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
}

.text__card .text {
    padding: 0 20px 20px 20px;
    width: 40%;
    margin-bottom: 50px;
    transition: all 0.5s;
}

.text__card .text:hover {
    background-color: #ccc;
}

.text__card .text .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
    background: url('icons.svg') no-repeat;
}

.text__card .text:nth-child(1) .icon {
    background-color: #8BFFF8;
}

.text__card .text:nth-child(2) .icon {
    background-color: #D2FFEB;
    background-position: -100px 1px;
}

.text__card .text:nth-child(3) .icon {
    background-color: #FFE1E1;
    background-position: -200px 1px;
}

.text__card .text:nth-child(4) .icon {
    background-color: #D9DDFE;
    background-position: -100px -100px;
}

.text__card .text h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.text__card .text p {
    font-size: 18px;
    line-height: 1.4;
    color: #666;
}

<h3 class="t_tit2">HTML</h3> <p class="t_desc2"> HTML입니다. section으로 전체를 묶어서 사용하였고 이미지와 내용을 container 영역을 만들어서 article을 만들고 그안에 이미지와 내용을 삽입하였습니다. </p> <div class="t_code"> <pre><code class="language-html"> <section id="textType02" class="text__wrap nexon section"> <div class="text__inner container"> <div class="text__head"> <p class="logo">FRONTEND</p> <p class="title">프론트 앤드 개발자는 무엇을 할까?</p> <p class="desc">프론트 앤드 개발자가 되기 위해서 무엇을 해야할까요? 개발자가 되기위한 지침서가 여기 있습니다. 한번 보고가면 도움이 많이 될 것 같습니다.</p> </div> <div class="text__card"> <article class="text"> <div class="icon"> <span class="ir">image</span> </div> <h3>텍스트 유형</h3> <p> 레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형 </p> </article> <article class="text"> <div class="icon"><span class="ir">image</span></div> <h3>텍스트 유형</h3> <p> 레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형 </p> </article> <article class="text"> <div class="icon"><span class="ir">image</span></div> <h3>텍스트 유형</h3> <p> 레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형 </p> </article> <article class="text"> <div class="icon"><span class="ir">image</span></div> <h3>텍스트 유형</h3> <p> 레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형레이아웃 유형 </p> </article> </div> </div> </section>

결과

깃허브 소스 보기