Animated Rainbow Nyan Cat
본문 바로가기
사이트 만들기/카드 유형

카드유형 02

by 이유나1 2022. 8. 9.
728x90
반응형

사이트 만들기 : 카드 유형02

HTML 유형

 &ltbody>
&ltsection id="cardType" class="card__wrap nexon section">
    &lth2>육식동물 구경하기
&ltp>
    동물을 다 좋아하지만 개인적으로 더 좋아하는 동물은 육식동물!

    육식동물의 귀여움을 알아보자.
&lt/p>
&ltdiv class="card__inner container">
    &ltarticle class="card">
        &ltfigure class="card__header">
            &ltimg src="img/Rectangle 1.jpg" alt="웹표준 사이트 만들기">
        &lt/figure>
        &lt/div class="card__body">
            &lt/h3 class="tit">사자
            &lt/a class="btn" href="/">
                &lt/span aria-hidden="true">
                    &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                        &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
                    &lt//svg>
                &lt//span>
            &lt//a>
            &lt//h3>
         &lt/p class="t_desc">동물의 왕이라고 불리는 사자, 사냥하는 모습이 너무 멋지다. 배고파 할땐 무섭지만 드러눕는걸 보면 우리집 강아지가 생각 나서 귀엽다.
&lt//div>
&lt/
&lt/article class="card">
    &lt/figure class="card__header">
        &lt/img src="img/Rectangle 2.jpg" alt="웹표준 사이트 만들기">
    &lt//figure>
    &lt/div class="card__body ">
        &lt/h3 class="tit">흰머리수리
        &lt/a class="btn" href="/">
            &lt/span aria-hidden="true">
                &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                    &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
                &lt//svg>
            &lt//span>
        &lt//a>
&lt//h3>
    &lt/p class="t_desc">절벽 위에 고고하게 앉아 있다가 날개를 촥 펼치며 고공 다이빙을 하는 모습으로 사람들이 독수리중에 먼저 생각나는 인지도가 높은 동물이다.
&lt//div>
&lt//article>
&lt/article class="card">
    &lt/figure class="card__header">
        &lt/img src="img/Rectangle 3.jpg" alt="웹표준 사이트 만들기">
    &lt//figure>
    &lt/div class="card__body">
        &lt/h3 class="tit">여우
            &lt/a class="btn" href="/">
            &lt/span aria-hidden="true">
                &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
            &lt//svg>
        &lt//span>
&lt//a>
&lt//h3>
    &lt/p class="t_desc">여우는 개과에 속하는 여러 동물의 총칭이다. 개과의 동물 중 작은 편에 속하는 동물로, 개보다 작으며, 좁은 주둥이와 털이 많은 귀가 특징이다.
&lt//p>
&lt//div>
&lt//article>
&lt/article class="card">
    &lt/figure class="card__header">
        &lt/img src="img/Rectangle 4.jpg" alt="웹표준 사이트 만들기">
&lt//figure>
&lt/div class="card__body">
    &lt/h3 class="tit">백호
    &lt/a class="btn" href="/">
            &lt/span aria-hidden="true">
                &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                    &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
                &lt//svg>
            &lt//span>
        &lt//a>
&lt//h3>
    &lt/p class="t_desc">흰털을 가진 호랑이로 한국과 중국 등지의 민화에서는 상상의 동물로 등장하기도 한다.화나 민화에 등장하여 신비로운 동물로 여겨졌다.
&lt/p>
&lt//div>
&lt//article>
&lt//div>
&lt/div class="card__inner container">
    &lt/article class="card">
        &lt/figure class="card__header">
            &lt/img src="img/Rectangle 5.jpg" alt="웹표준 사이트 만들기">
        &lt//figure>
        &lt/div class="card__body">
            &lt/h3 class="tit">호랑이
            &lt/a class="btn" href="/">
                &lt/span aria-hidden="true">
                    &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                    &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
                &lt//svg>
            &lt//span>
        &lt//a>
&lt//h3>
    &lt/p class="t_desc">고양이과에 속하는 포유동물.우리나라의 건국신화에도 등장하고 올림픽대회의 마스코트로 선정될 정도로 우리에게 친숙한 동물이다.
&lt//div>
&lt//article>
    &lt/article class="card">
        &lt/figure class="card__header">
            &lt/img src="img/Rectangle 6.jpg" alt="웹표준 사이트 만들기">
        &lt//figure>
        &lt/div class="card__body ">
            &lt/h3 class="tit">사자
            &lt/a class="btn" href="/">
                &lt/span aria-hidden="true">
                    &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                    &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
                &lt//svg>
            &lt//span>
        &lt//a>
&lt//h3>
    &lt/p class="t_desc">하늘의 왕이라고 불리는 독수리, 나는 모습이 머싯다. 조류 중에 제일 좋아한다.머싯다
&lt//div>
&lt//article>
    &lt/article class="card">
        &lt/figure class="card__header">
            &lt/img src="img/Rectangle 7.jpg" alt="웹표준 사이트 만들기">
        &lt//figure>
        &lt/div class="card__body">
            &lt/h3 class="tit">표범
            &lt/a class="btn" href="/">
                &lt/span aria-hidden="true">
                    &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                    &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
                &lt//svg>
            &lt//span>
        &lt//a>
&lt//h3>
    &lt/p class="t_desc">식육목 고양이과의 포유류. 돈점박이라고도 하며, 강변의 숲, 숲이 무성한 바위 지대, 덤불, 사바나, 인가 가까운 곳 등 서식범위가 넓다.
&lt//p>
&lt//div>
&lt//article>
    &lt/article class="card">
        &lt/figure class="card__header">
            &lt/img src="img/Rectangle 8.jpg" alt="웹표준 사이트 만들기">
        &lt//figure>
        &lt/div class="card__body">
            &lt/h3 class="tit">곰
            &lt/a class="btn" href="/">
                &lt/span aria-hidden="true">
                    &lt/svg width="33" height="26" viewBox="0 0 33 26" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    &lt/rect width="33" height="25.8351" rx="5" fill="#111111" />
                    &lt/path d="M24.7071 13.7071C25.0976 13.3166 25.0976 12.6834 24.7071 12.2929L18.3431 5.92893C17.9526 5.53841 17.3195 5.53841 16.9289 5.92893C16.5384 6.31946 16.5384 6.95262 16.9289 7.34315L22.5858 13L16.9289 18.6569C16.5384 19.0474 16.5384 19.6805 16.9289 20.0711C17.3195 20.4616 17.9526 20.4616 18.3431 20.0711L24.7071 13.7071ZM9 14H24V12H9V14Z"  fill="white" />
                &lt//svg>
            &lt/span>
        &lt//a>
&lt//h3>
&lt/p class="t_desc">강가의 연어 사냥꾼 불곰, 곰 종류 가운데 가장 무겁고 거대한 종 어깨는 등면보다 높으며 혹 모양의 융기가 있다.
&lt//p>
&lt//div>
&lt//article>
&lt//div>
&lt//section>

&lt//body>

CSS 유형

&ltstyle>
            @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
    
            .nexon {
                font-family: 'NexonLv1Gothic';
                font-weight: 400;
            }
    
            * {
                margin: 0;
                padding: 0;
            }
    
            a {
                text-decoration: none;
                color: #000;
            }
    
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-weight: normal;
            }
    
            /* img {
                width: 100%;
            } */
            .container {
                width: 1160px;
                padding: 0 20px;
                margin: 0 auto;
                min-width: 1160px;
            }
    
            .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;
                line-height: 1.4;
            }
    
            .card__body {}
    
            .card__body .tit {
                margin-bottom: 10px;
                font-size: 28px;
                font-weight: 500;
            }
    
            .card__body .t_desc {
                font-size: 18px;
                font-weight: 300;
                line-height: 1.4;
                color: #666;
                margin-bottom: 15px;
            }
    
            .card__inner {
                display: flex;
                justify-content: space-between;
                margin-bottom: 50px;
            }
    
            /* 사진 오른쪽으로 옮겨줌 */
            .card {
                width: 275px;
                background: #f5f5f5;
            }
            .card__body .btn {
                float: right;
            }

결과

원본 소스 보기
원본 페이지 보기
728x90

'사이트 만들기 > 카드 유형' 카테고리의 다른 글

카드 유형 03  (2) 2022.08.10
카드 유형 01  (8) 2022.08.08

관련글

댓글

/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바