React v6 카드 목록 작성하기(4*4 상품 페이지 만들기, 쇼핑몰)

안녕하세요 인포돈 입니다.

최근에 변화된 React v6에 의거하여 작성되었습니다.
실행코드 ide는 vscode를 활용합니다!
리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다.

**4*4 상품 목록 카드 작성하기**

저희가 일반적으로 카드 목록을 작성하게 되면, 아래 글과 같이 상품들이 나열되는 목록을 보여줘야 할 때가 있습니다. 이러한 목록을 만들어주는 방법을 소개해드리겠습니다!

- HTML

기본적으로 저희는 아주 간단하게 코드를 작성하였습니다. 카드에 들어갈 내용은 이미지, 상품 제목, 상품 내용 요약, 가격, 상품 상세페이지 보러 가기 총 5가지의 정보를 담고 있는 카드를 만들어 보겠습니다.

function App(){

  return(
    <div>
      <h2>상품 목록 카드 작성하기</h2>
      <div className="product_container">
            <div className="product">
                <div className="product_img_div"><img src={require("./img/product_img.png")} className="product_img"/></div>
                <h5 className="product_title"> 상품 제목</h5>
                <p className="product_des"> 상품 내용 요약</p>
                <div className="product_mon"> 월 : 15,000￦</div>
                <div className="product_link_div"><Link className="product_link" to="/product"> 구독하러가기</Link></div>
            </div>
      </div>

        <Routes>
          <Route exact paht="/" element={< App/>}></Route>
          <Route paht="/product" element={< Product/>}></Route>
          <Route path="/" element={'Not found'}></Route>
        </Routes>
    </div>

아주 간단한 카드 목록입니다.

이런 식으로 아무런 css를 적용하지 않으면 이와 같이 카드가 만들어집니다. 이제 우리는 이 카드의 목록의 내부를 꾸미고 4*4 배열로 자연스럽게 만들어지도록 만들어보겠습니다.

- css

.product_container{
    display:flex;
    flex-direction: row;
    flex-wrap : wrap;
    width: 100%;
}
.product{
    width:25%;
    height: 100%;
    margin-bottom : 4%;
    /*border: 1px solid black;*/
}

가장 겉의 div부터 설정해 줍니 ek.

- display:flex : 문서의 영역에서 flexbox가 놓여있는 영역으로 지정해 줍니다.

- flex_direction:row : flexbox영역에서 가로, 세로, 가로 반대, 세로 반대로 설정이 가능하다. 각 row, column, row-reverse, column-reverse로 값을 주면 된다.

- flex-wrap : wrap : flexbox의 폭이 지정되어있다면 flexbox의 width를 넘어가게 되면 여러 행에 나열되도록 한다.

- width : 100% : 가로의 넓이를 웹페이지의 가로폭과 똑같도록 설정한다.

그 후 다음 div는 실질적으로 상품의 목록을 나타냅니다.

- width : 25% : 상위 부모 클래스가 100%이기에 25%의 크기를 주면 4개의 목록이 나열될 수 있도록 설정합니다.

height, margin-bottom을 주어서 크기를 설정한다.

우선 큰 틀을 설정해 줍니다. 이렇게 설정해주면 이전의 이미지와 크게 달라지지 않습니다. 그러나 우리는 기존 이미지의 크기가 있기 때문에 이미지의 크기를 설정해 주어야 합니다. 그러면 이제 우리의 눈에 어느 정도 허술한 카드의 형태를 띨 수 있게 됩니다.

.product_img_div{
  text-align: center;
}
.product_img{
  max-width:95%;
  max-height:100%;
}

여기서 max-width를 지정해준다면, 사진의 부모는 앞선 product의 95%를 차지하게 됩니다. 그렇게 되면 총페이지의 25%에 해당하는 크기에서 95%를 차지하는 키기로 변하게 되죠. 만약 높이가 큰 제품이라면 max-height를 조절해 주면 됩니다. 그리고 95%의 크기로 했기 때문에 img자체를 center로 지정해줍니다.

이제 본격적으로 카드의 형태를 띄우게 되었습니다. 이제 나머지는 사실 크게 어려울 게 없습니다. 글씨 크기, 두께, margin, padding을 통해서 적당한 위치에 위치하도록 하면 끝!

.product_title{
  font-size : 1.3rem;
  font-weight: 600;
  margin : 4%;
}
.product_des{
  font-size : 0.8rem;
  margin : 2% 3% 2% 4%;
}
.product_mon{
  font-size : 1rem;
  margin : 2% 3% 1% 4%;
}
.product_link_div{
  text-align: center;
}
.product_link{
  position:inherit;
  font-size : 1.2rem;
  font-weight: 500;
  text-decoration: none;
  background : #0B5ED9;
  color : white;
  border-radius : 10px;
  padding :5px;
}

그러면 이제 얼추 상품 카드와 똑같은 형태를 띄우게 됩니다. 이제 우리의 목표인 4개 이상의 상품이 생기게 된다면, 자연스럽게 다음 행에 나오도록 상품을 추가해 봅시다.

이제 페이지에서 상품이 4개가 될 때마다 상품이 다음행에 표시되어 쭉 표현되게 됩니다. 별로 어렵지 않게 상품 목록 4*4 배열 카드를 만들어보았습니다.

전체 코드

      <div className="product_container">
            <div className="product">
                <div className="product_img_div"><img src={require("./img/product_img.png")} className="product_img"/></div>
                <h5 className="product_title"> 상품 제목</h5>
                <p className="product_des"> 상품 내용 요약</p>
                <div className="product_mon"> 월 : 15,000￦</div>
                <div className="product_link_div"><Link className="product_link" to="/product"> 구독하러가기</Link></div>
            </div>
            <div className="product">
                <div className="product_img_div"><img src={require("./img/product_img.png")} className="product_img"/></div>
                <h5 className="product_title"> 상품 제목</h5>
                <p className="product_des"> 상품 내용 요약</p>
                <div className="product_mon"> 월 : 15,000￦</div>
                <div className="product_link_div"><Link className="product_link" to="/product"> 구독하러가기</Link></div>
            </div>
            <div className="product">
                <div className="product_img_div"><img src={require("./img/product_img.png")} className="product_img"/></div>
                <h5 className="product_title"> 상품 제목</h5>
                <p className="product_des"> 상품 내용 요약</p>
                <div className="product_mon"> 월 : 15,000￦</div>
                <div className="product_link_div"><Link className="product_link" to="/product"> 구독하러가기</Link></div>
            </div>
            <div className="product">
                <div className="product_img_div"><img src={require("./img/product_img.png")} className="product_img"/></div>
                <h5 className="product_title"> 상품 제목</h5>
                <p className="product_des"> 상품 내용 요약</p>
                <div className="product_mon"> 월 : 15,000￦</div>
                <div className="product_link_div"><Link className="product_link" to="/product"> 구독하러가기</Link></div>
            </div>
            <div className="product">
                <div className="product_img_div"><img src={require("./img/product_img.png")} className="product_img"/></div>
                <h5 className="product_title"> 상품 제목</h5>
                <p className="product_des"> 상품 내용 요약</p>
                <div className="product_mon"> 월 : 15,000￦</div>
                <div className="product_link_div"><Link className="product_link" to="/product"> 구독하러가기</Link></div>
            </div>
            <div className="product">
                <div className="product_img_div"><img src={require("./img/product_img.png")} className="product_img"/></div>
                <h5 className="product_title"> 상품 제목</h5>
                <p className="product_des"> 상품 내용 요약</p>
                <div className="product_mon"> 월 : 15,000￦</div>
                <div className="product_link_div"><Link className="product_link" to="/product"> 구독하러가기</Link></div>
            </div>
      </div>

.product_container{
  display:flex;
  flex-direction: row;
  flex-wrap : wrap;
  width: 100%;
}
.product{
  width:25%;
  height: 100%;
  margin-bottom : 4%;
  /* border: 1px solid black; */
}
.product_img_div{
  text-align: center;
}
.product_img{
  max-width:95%;
  max-height:100%;
}
.product_title{
  font-size : 1.3rem;
  font-weight: 600;
  margin : 4%;
}
.product_des{
  font-size : 0.8rem;
  margin : 2% 3% 2% 4%;
}
.product_mon{
  font-size : 1rem;
  margin : 2% 3% 1% 4%;
}
.product_link_div{
  text-align: center;
}
.product_link{
  position:inherit;
  font-size : 1.2rem;
  font-weight: 500;
  text-decoration: none;
  background : #0B5ED9;
  color : white;
  border-radius : 10px;
  padding :5px;
}

저작자표시

'FrontEnd > React' 카테고리의 다른 글

[React] 팝업 창 만들기 - daum - post - code (회원가입 - 주소 팝업) (0)	2022.05.22
[React] axios를 활용한 srping연동(get, post) (0)	2022.05.17
React useEffect, useState (Hook의 이해) (0)	2022.05.17
React v6 변화한 router 사용하기 (Link, Routes, Route 태그) (0)	2022.04.26

INFODON Blog

React v6 카드 목록 작성하기(4*4 상품 페이지 만들기, 쇼핑몰)

**4*4 상품 목록 카드 작성하기**

- HTML

- css

전체 코드

'FrontEnd > React' 카테고리의 다른 글

티스토리툴바

React v6 카드 목록 작성하기(4*4 상품 페이지 만들기, 쇼핑몰)

4*4 상품 목록 카드 작성하기

- HTML

- css

전체 코드

'FrontEnd > React' 카테고리의 다른 글

'FrontEnd/React' Related Articles

티스토리툴바

**4*4 상품 목록 카드 작성하기**