React Website 만들기) 3.Card부분 만들기

 

 

홈페이지의 글목록을 담당하는 영역을 만든다. 

 

 

 

1. Carditem.js

components폴더 안에 만든다.

여기서 prop의 구현은 card.js에서 할 것이다. 

import React from 'react';
import { Link } from 'react-router-dom';

function CardItem(props) {
  return (
    <>
      <li className='cards__item'>
        <Link className='cards__item__link' to={props.path}>
          <figure className='cards__item__pic-wrap' data-category={props.label}>
            <img
              className='cards__item__img'
              alt='Travel Image'
              src={props.src}
            />
          </figure>
          <div className='cards__item__info'>
            <h5 className='cards__item__text'>{props.text}</h5>
          </div>
        </Link>
      </li>
    </>
  );
}

export default CardItem;

 

 

 

2. Card.js

여기서 ul로 묶은 파트별로 갯수가 다르다는 것을 유의!

몇개씩 한 줄에 나타낼 것인지를 구분한 것이다. 

여기서의 path, text, label에 따라서 CardItem의 구성에 따라서 나타나는 파트가 달라진다. 

import React from 'react'
import CardItem from './CardItem';
import  './Cards.css';

function Cards() {
    return (
        <div className='cards'>
            <h1>Check out these EPIC Destinations!</h1>
            <div className="cards__container">
                <div className="cards__wrapper">
                    <ul className="cards__items">
                        <CardItem 
                         src = "images/img-9.jpg"
                         text = "Expore the hidden waterfall deep inside the Amazon Jungle"
                         label = 'Adventure'
                         path='/services'
                        />    
                        <CardItem 
                         src = "images/img-2.jpg"
                         text = "Travel through the Islands of Bali in a Private Cruise"
                         label = 'Luxury'
                         path='/services'
                        />    
                    </ul>    
                    <ul className='cards__items'>
                        <CardItem
                        src='images/img-3.jpg'
                        text='Set Sail in the Atlantic Ocean visiting Uncharted Waters'
                        label='Mystery'
                        path='/services'
                        />
                        <CardItem
                        src='images/img-4.jpg'
                        text='Experience Football on Top of the Himilayan Mountains'
                        label='Adventure'
                        path='/products'
                        />
                        <CardItem
                        src='images/img-8.jpg'
                        text='Ride through the Sahara Desert on a guided camel tour'
                        label='Adrenaline'
                        path='/sign-up'
                        />   
                    </ul>    
                </div>
            </div>            
        </div>
    );
}

export default Cards;

 

 

 

 

 

3. Cards.css

스크린 사이즈 변화에 따라서 media 적용해서 달라지도록 했다. 

후에 Home.js파일에도 Cards를 적용하는 것을 잊지 말자!

.cards {
    padding: 4rem;
    background: #fff;
  }
  
  h1 {
    text-align: center;
  }
  
  .cards__container {
    display: flex;
    flex-flow: column;
    align-items: center;
    max-width: 1120px;
    width: 90%;
    margin: 0 auto;
  }
  
  .cards__wrapper {
    position: relative;
    margin: 50px 0 45px;
  }
  
  .cards__items {
    margin-bottom: 24px;
  }
  
  .cards__item {
    display: flex;
    flex: 1;
    margin: 0 1rem;
    border-radius: 10px;
  }
  
  .cards__item__link {
    display: flex;
    flex-flow: column;
    width: 100%;
    box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
    -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
    filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
  }
  
  .cards__item__pic-wrap {
    position: relative;
    width: 100%;
    padding-top: 67%;
    overflow: hidden;
  }
  
  .fade-img {
    animation-name: fade-img;
    animation-duration: 2s;
  }
  
  .cards__item__pic-wrap::after {
    content: attr(data-category);
    position: absolute;
    bottom: 0;
    margin-left: 10px;
    padding: 6px 8px;
    max-width: calc((100%) - 60px);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #1f98f4;
    box-sizing: border-box;
  }
  
  .cards__item__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: all 0.2s linear;
  }
  
  .cards__item__img:hover {
    transform: scale(1.1);
  }
  
  .cards__item__info {
    padding: 20px 30px 30px;
  }
  
  .cards__item__text {
    color: #252e48;
    font-size: 18px;
    line-height: 24px;
  }
  
  @media only screen and (min-width: 1200px) {
    .content__blog__container {
      width: 84%;
    }
  }
  
  @media only screen and (min-width: 1024px) {
    .cards__items {
      display: flex;
    }
  }
  
  @media only screen and (max-width: 1024px) {
    .cards__item {
      margin-bottom: 2rem;
    }
  }

 

 

 

 

 

 

 

 

사진으로 보면, 

홈페이지 사이즈로 봤을 때는 각각 2개, 3개가 나열되어서 보여진다.

 

 

 

 

 

 

폰스크린의 사이즈로 볼때는 하나씩 나열되도록 했다.