Website 만들기에 대해서 알아보자 - 이미지/텍스트 유형 01

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

이번에는 figma로 만든 다음의 이미지/텍스트 유형을 코딩으로 만들어 보겠습니다.

간략한 설명:

보이는 것처럼 이번에는 사이트를 크게 세 부분으로 나눌 수 있습니다.

글이 써있는 부분(article class="desc"), 음식 사진(article class="food"), 기념품 사진(article class="souvenir")으로 나누어서 만들었습니다.

이제 body와 style을 나눠서 세부적인 설명을 하겠습니다.

body

<body>
    <section class="slider__wrap nexon">
        <div class="container">
            <div class="inner">
                <article class="desc">
                    <span class="notice">NOTICE</span>
                    <h3 class="title">음식점과 기념품 가게 고르는 Tip</h3>
                    <p class="tips">맛있는 음식을 맛보고 싶은 마음은 누구나 있습니다.<br>
                    그리고 기념품을 사서 보관하거나 선물하는 일도 많죠.</p>
                    <div class="li">
                        <li>오소 부코</li>
                        <li>프로슈토</li>
                        <li>리볼리타</li>
                        <li>살팀보카</li>
                        <li>쿠샤리</li>
                        <li>에이시</li>
                        <li>하맘</li>
                        <li>토르시</li>
                        <li>마비스 치약</li>
                        <li>낙타 인형</li>
                        <li>시샤 도구</li>              
                    </div>
                </article>
                <article class="food">
                    <figure>
                        <img src="../asset/img/food.jpg" alt="food">
                    </figure>
                </article>
                <article class="souvenir">
                    <figure>
                        <img src="../asset/img/souvenir.jpg" alt="souvenir">
                    </figure>
                </article>
            </div>
        </div>
    </section>
</body>

지난 번에 만들었던 사이트 유형들을 참고하면 비교적 쉽게 만들 수 있습니다.

각 부분들을 나눠서 class로 이름을 정해주고, style에서 class를 다듬어 주면 됩니다.

간략하게 설명한 것처럼 크게 세 부분으로 나누었습니다.

그 세 부분을 공통적으로 설정해주기 위해서 container와 inner로 묶었습니다.

첫 번 째 article 인 desc를 보면, NOTICE와 제목, 그 밑에 짤막한 글 그리고 그 아래에 리스트가 있습니다.

NOTICE는 span 태그로 해주었고, 나머지는 각각의 class를 title, tips, li로 정했습니다.

리스트는 공통적으로 설정을 하기 위해서 div class="li"로 묶었습니다.

나머지는 사진이입니다.

사진은 폴더에 저장해놨습니다.

figure태그 넣어서 img태그로, 사진 루트를 타고 불러왔습니다.

style

<style>
    * {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
    }
    h1,h2,h3,h4,h5,h6 {
        font-weight: normal;
    }
    img {
        vertical-align: top; /* 여백 없앰 */
        width: 100%;
    }
    .container {
        width: 1160px;
        margin: 0 auto;
        padding: 0 20px;
        /* background-color: rgba(0, 0, 0, 0.1); */
        margin-top: 120px;
    }
    .nexon {
        font-family: 'NexonLv1Gothic';
        font-weight: 400;
    }
    .section {
        padding: 120px 0;
        text-align: center;
    }
    .section.center {
        text-align: center;
    }
    .section__h2 {            
        font-size: 50px;
        font-weight: 400;
        margin-bottom: 30px;
        line-height: 1;
    }
    .section__desc {
        font-size: 22px;
        color: #666;
        margin-bottom: 70px;
        font-weight: 300;
        line-height: 1.5;        
    }
    .inner {
        display: flex;
        justify-content: space-between;
    }
    .notice {
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 1.5;
        padding: 0 30px;
        border-radius: 50px;            
        background-color: #714dff;
        font-weight: normal;
        width: 75px;
        height: 30px;
    }
    .title {
        font-size: 50px;
        margin-bottom: 15px;
        margin-top: 15px;
        color: black;
    }
    .desc {
        font-size: 16px;
        width: 374px;
        color: #666;
    }
    .li {
        font-size: 16px;
        color: #666;
        line-height: 1.5;
        text-align: left;
    }
    .food {           
    }
    .souvenir {     
    }
    .tips {
        margin-bottom: 15px;
    }
</style>

이전의 사이트에 적용한 것처럼 공통으로 적용할 부분들은 같습니다.

공통적인 부분에 적용해주기 위해서 inner에 display: flex 와 justify-content: space-betweeen;

display: flex 는 무조건 1행 수평으로 정렬합니다.

만약 크기가 너무 커서 자리가 없다면 강제로 크기를 줄입니다.

모든 크기를 균등하게 하는 것이 아니라 들어가는 태그들의 상호 크기에 비례해서 줄어듭니다.

justify-content: space-betweeen는 공간에서 균등하게 배치해줍니다.

두 가지를 동시에 써서 사이트를 올바른 위치에 배치합니다.

글 부분에 해당되는 desc는 세 가지를 포함했으므로, 넓이를 정해줬습니다.

NOTICE를 꾸며주기 위해서 글자 크기, 색, 배경색을 지정해주고, 둥근 모양으로 다듬어서 여백을 줘서 마무리했습니다.

나머지도 원하는 모양으로 다듬어줘서 완성했습니다.

jongyung