3번 - 나의 이웃

쉬운 목차

1. 정식 버전

2. HTML 및 CSS 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 유형2</title>

    <style>
    /* reset */
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #000;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }
    img {
        /* 이미지 적용시 여백이 남았을때 사용 해야함. */
        vertical-align: top;
    }
    /* 시각장애인(웹표준) */
    .blind {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden
    }
    .mt10 { margin-top: 10px !important;}
    .mt20 { margin-top: 20px !important;}
    .mt30 { margin-top: 30px !important;}
    .mt40 { margin-top: 40px !important;}
    .mt50 { margin-top: 50px !important;}
    .mt60 { margin-top: 60px !important;}
    .mt70 { margin-top: 70px !important;}

    .mb10 { margin-bottom: 10px !important;}
    .mb20 { margin-bottom: 20px !important;}
    .mb30 { margin-bottom: 30px !important;}
    .mb40 { margin-bottom: 40px !important;}
    .mb50 { margin-bottom: 50px !important;}
    .mb60 { margin-bottom: 60px !important;}
    .mb70 { margin-bottom: 70px !important;}

    /* common */
    .container {
        width: 1160px;
        margin: 0 auto;
        padding: 0 20px;
        /* background-color: rgba(0,0,0,0.3); */
    }
    /* 
    .section.center{
        text-align: center;
    } 
    */
    .nexon {
        font-family: "NexonLv1Gothic";
        /* h2태그의 기본 성질은 700(bold)로 되어있음. */
        font-weight: 400;
    }
    img {
        width: 100%;
        vertical-align: top;
    }
    .notice__small {
        display: inline-block;
        font-size: 14px;
        border-radius: 50px;
        background-color: rgba(208, 211, 55, 0.8);
        color: #fff;
        padding: 1px 23px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    /* common */
    .container {
        width: 1160px;
        margin: 0 auto;
        padding: 0 20px;
        /* background-color: rgba(0,0,0,0.3); */
    }
    .text2__wrap {
        padding: 120px 0; 
    }
    .text2__wrap span {
        display: block;
        width: 100px;
        height: 22px;
        border-radius: 50px;
        background-color: #D0D337;
        text-align: center;
        margin-bottom: 16px;
        color: #fff;
    }
    .bread__wrap {
        display: flex;
        box-sizing: border-box;
    }
    .bread__wrap .bread__explain {
        width: 32.3333%;
        margin-right: 1%;
        /* background-color: #ccc; */
    }
    .bread__wrap .bread__explain h2 {
        text-align: left;
        font-size: 50px;
    }
    .bread__wrap .bread__explain p {
        color: #666;
        text-align: left;
        line-height: 1.6;
    }
    .bread__wrap .bread__explain p.bread__turf {
        margin-top: 25px;
        margin-bottom: 16px;
    }
    .bread__wrap .bread__img1 {
        width: 32.3333%;
        margin-right: 1%;
    }
    .bread__wrap .bread__img2 {
        width: 32.3333%;
    }
    </style>
</head>

<body>
    <section  class="text2__wrap section center nexon">
        <div class="container">
            <span>NOTICE</span>
            <div class="bread__wrap">
                <div class="bread__explain">
                    <h2>맛있는 빵<br> 다양한 종류</h2>
                    <p class="bread__turf">빵은 매우 다양한 종류가 있지만, 여기에 몇 가지 대표적인 빵의 종류를 나열해 보겠습니다.</p>
                    <p>1.식빵 (White bread): 밀가루, 물, 효모, 설탕 등을 사용하여 만든 기본적인 빵으로, 부드러운 식감과 담백한 맛이 특징입니다.</p>
                    <p>2.프렌치 빵 (French bread): 프랑스에서 유래한 빵으로, 밀가루, 물, 효모, 소금을 사용하여 만들며, 바삭한 외피와 쫄깃한 내용물이 특징입니다.</p>
                    <p>3.베이글 (Bagel): 유대인 커뮤니티에서 유래한 빵으로, 매우 밀도가 높은 반죽으로 둥글게 만들어져, 끓는 물에 찐 후 오븐에서 구워져서 외피는 딱딱하고, 속은 쫄깃한 맛이 특징입니다.</p>
                </div>
                <div class="bread__img1">
                    <figure>
                        <img src="http://skadldldl123.result/img/bread1.png" alt="빵 집~~">
                    </figure>
                </div>
                <div class="bread__img2">
                    <figure>
                        <img src="../result/img/bread2.png" alt="빵 제작~~">
                    </figure>
                </div>
            </div>
        </div>
    </section>