이미지텍스트유형을 만들어 봅시다!

html

<section class="image__wrap section nexon">
    <div class="container cont__box">
        <div class="cont">
            <div class="text__h2">
                <span class="section__small">NOTICE</span>
                <h2 class="section__h2">아침에먹기 좋은 건강한 레시피</h2>
                <p class="section__desc">아침밥으로 먹을만한 메뉴는 다양하지만, 아래는 건강하고 맛있는 아침밥 메뉴 종류입니다.</p>
                <ul>
                    <li>오트밀 쉐이크</li>
                    <li>스크램블 에그토스트</li>
                    <li>그릭 요거트 파르페</li>
                    <li>김밥</li>
                    <li>오므라이스</li>
                    <li>샌드위치샐러드</li>
                    <li>에그 베네딕트</li>
                    <li>수프</li>
                </ul>
            </div>
        </div>
        <div class="cont">
            <div class="image__inner">
                <figure class="img">
                    <img src="../asset/img/imagetextType01_01.png" alt="에너지 충전">
                </figure>
            </div>
        </div>
        <div class="cont">
            <div class="image__inner">
                <figure class="img">
                    <img src="../asset/img/imagetextType01_02.png" alt="에너지 충전">
                </figure>
            </div>
        </div>
    </div>
</section>

container안에 cont의 div를 3개 만들었습니다.

cont에 width값과 height값을 주어 간격을 맞추고

한박스는 텍스트만 나머지 두박스는 이미지를 넣었습니다.

첫번째 cont는 텍스트 관련 기본적으로 들어가는 span태그와 h2, p, ul, li태그를 넣었습니다.

두번째와 세번째는 figure를 넣어 이미지를 넣었습니다.

 

css

.section__small {
    font-size: 14px;
    border-radius: 50px;
    background-color: #17C37B;
    color: #fff;
    padding: 1px 23px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: inline-block;
}
.section__h2 {
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 25px;
    line-height: 1.2;
}
.section__desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    font-weight: 300;
    line-height: 1.5;
}

 

span, h2, p 같은 경우에는 common에 있기때문에 font-size와 magin과 line-height을 각각 디자인 했던 값으로 수정하였습니다.

 

.cont__box {
    display: flex;
    justify-content: space-between;
}

display : flex 와 justify-content : space-between을 사용하여 수평으로 배치하고 간격을 동일하게 주기 위해 container에 주는 것이 맞지만 저는 수정하는것이 싫어 cont__box라는 class를 만들어 주었습니다.

 

.text__h2 ul {
    margin-left: 16px;
}

.text__h2 ul li {
    color: #666;
    line-height: 1.55;
}

먼저 li에 색을 수정하고 line-height값을 1.55%주었습니다. 

이렇게 만들게 되면 li의 마커가 원하는 가이드라인을 넘게 됩니다.

그걸 수정하기 위해 ul에 margin-left를 주어 리스트 전체를 움직여서 라인을 맞추었습니다.

 

.image__inner {
    border-radius: 50px;
}

그리고 이미지에 border-ladius를 주어 모서리를 둥글게 만들었습니다.