CSS

css를 이용해 이미지 유형 사이트 만들어보기

이미사용 2023. 3. 11. 18:27
명언
-
728x90
반응형

저번에 했었던 카드 유형 사이트 처럼 figma 로 만들고 싶은 이미지 사이트 만들어 본 후에  body부분에 박스를 만들어 사이트에 들어갈 글과 링크를 넣고 class를 이용해 각 목록에 이름을 주고 묶어 줍니다.

그리고 head부분에 자기가 바꾸고 싶은 폰트의 링크를 가져와 올려줍니다.

<!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>이미지 유형01</title>

    <link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
    <style>
        /* reset */
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
            width: 100%;
        }
        /* common */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            /* background-color: rgba(0, 0, 0, 0.1); */
        }
        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }
        .section {
            padding: 120px 0;
        }
        .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;
        }

        /* image type */
        .image__inner {
            display: flex;
            justify-content: space-between;
        }
        .image__inner .image {
            width: 570px;
            height: 370px;
            background-color: #ccc;
            position: relative;
        }
        .image__body {
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            text-align: left;
            padding: 30px;
        }
        .image__body .title {
            font-size: 32px;
            line-height: 1;
            margin-bottom: 15px;
        }
        .image__body .desc {
            margin-bottom: 15px;
            line-height: 1.5;
            padding-right: 20%;
        }
        .image__body .btn {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px 30px;
            display: inline-block;
        }
    </style>

</head>
<body>
    <section class="image__wrap section center nexon">
        <div class="container">
            <h2 class="section__h2">쿠키 만드는 방법</h2>
            <p class="section__desc">다양한 종류의 쿠키가 있으며, 재료와 조리 방법에 따라 다양한맛을 느낄 수 있습니다.</p>
            <div class="image__inner">
                <article class="image">
                    <figure class="image__header">
                        <img src="../asset/img/imagetype01_01.jpg" alt="쿠키의 종류">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">쿠키의 종류</h3>
                        <p class="desc">초코칩 쿠키, 오트밀 쿠키, 마키롱, 스노우볼 쿠키, 레몬 쿠키, 등이 있습니다.</p>
                        <a href="#" class="btn">자세히 보기</a>
                    </div>
                </article>
                <article class="image">
                    <figure class="image__header">
                        <img src="../asset/img/imagetype01_02.jpg" alt="쿠키를 만들어봅시다">
                    </figure>
                    <div class="image__body">
                        <h3 class="title">쿠키를 만들어봅시다</h3>
                        <p class="desc">밀가루, 버터, 설탕 등을 사용하여 만들며, 다양한 재료를 넣어 맛과 향을 냅니다.</p>
                        <a href="#" class="btn">자세히 보기</a>
                    </div>
                </article>
            </div>
        </div>   
    </section>
    
</body>
</html>

<style>에 위치한 /*img type*/ 위에 부분은 카드 사이트 유형과 같으므로 넘어가고 /*img type*/ 에서 부터 차례대로 봐 보겠습니다.

·class가 image__inner 부분을 display: flex를 주어 "justify-content: space-between"를 주어 이미지를 가로축을 기준으로 정렬해 줍니다.

·class가 image__inne 인곳 안에 class가 image인 곳에 width: 570px ,height: 370px 를주어 폭과높이를 넓혀주고, background-color: #ccc로하여 배경색을 바꿔 주고 position: relative를 을 줍니다.

·class가 image__body>에 position: absolute를 주고 left:0, bottom:0, color는 #fff를 준다. text-align: left을 이용해 텍스트를 왼쪽으로 정렬 한후 padding: 30px주어 간격을 넓혀 줍니다.

·class가 image__body 안에 class가 title인곳 으로 가주어 font-size: 32px를 주고 라인높이를 line-height: 1 만큼 준후 margin-bottom: 15px 을 줘서 밑에 간격을 넓혀줍니다.

·class가 image__body 안에 class가 desc인곳 에 margin-bottom: 15px을 주어 밑에 간격을 넓혀주고 라인높이를 line-height: 1.5를 주어 텍스트 간격을 넓혀 준후,padding-right: 20%을 넣어 간격을 오른쪽으로 넓혀줍니다.

·class가 image__body 안에 class가 btn인곳에 color: #fff 로 해주고,background-color: rgba(0, 0, 0, 0.5);를 넣어 배경을 약간 어둡게 만든후, padding: 10px 30px;을 주어 간격을 넓혀줍니다. 그리고 display: inline-block;으로 만들어주면 이미지유형이 완성됩니다.

완성이미지