web/toy project

[html css] 웹사이트 상품 리스트 제작하기

xudegloss 2023. 3. 12. 23:34

1. 트랜스폼과 트랜지션 동시에 이용하기

- 트랜스폼을 이용하여 화면에 변화를 줄 수 있다.

- 트랜지션을 이용하여 변화를 부드럽게 보여줄 수 있다.

 

  • 마우스 올렸을 때 트랜스폼을 이용하여 translateY로 글자를 위로 올려버린다.
  • 자연스러운 움직임을 위하여 트랜지션을 이용한다.
  • 글자 마다 늦어지는 속도가 다르기 때문에, 모든 글자에 다 다른 transition-delay를 넣어준다.

이런 식으로 동시에 이용하면 부드러운 변화를 생성할 수 있다.

2. 웹사이트 상품 리스트 만들기

필요한 기능
1. 4 x 3 정렬시키기.
2. 마우스를 올리면 화면 살짝 까매지면서 커지게 만들기. 살짝 까만 화면과 투명도 이용하면 된다.
3. 마우스를 올리면 상품 정보 올라오게 만들기. 투명도를 이용하면 된다.

내가 만들어야 되는 것은 사진 정렬과 상품 정렬 그리고 살짝 까만 화면이다.

  • 사진, 상품 정보, 살짝 까만 화면 만들기. 살짝 까만 화면은 after를 이용하여 만들 것이다. 이 때 주의할 점은 display : block과 content를 잘 적어주기.
  • 마우스 올리기 전 후를 투명도 이용하여 만들어주기. 이 때 글자가 잘 보이도록 z-index 이용하기.
  • 마우스를 올렸을 때, 트랜스폼을 이용하여 위로 올리기.
  • 변화가 적용되는 모든 곳에 트랜지션을 이용하여 부드럽게 만들기. 모두 동일하여 공통으로 설정하였다.
  • 4 x 3 정렬 시에 width와 height는 calc 함수와 aspect-ratio 이용하여 만들어주기.
  • 주의할 점은 가로, 세로 길이를 설정할 때 100%를 잘 이용하자. 부모 태그에 설정했더라도, 자식 태그에 100%가 설정되지 않으면 적용되지 않는 경우가 생기기 때문이다.
  • position : relative와 absolute를 잘 이용하여 원하는 위치에 넣을 수 있도록 조정하기.
1. 공통되는 부분 한 개를 만들어서 확인한 후에 여러 개를 찍어낸다.
2. 레이아웃을 지정하기.
3. 트랜스폼 적용하기. 각각의 요소 결과에 트랜스폼 적용하기.
4. 트랜지션 적용하기. 각각의 요소 그 자체에 트랜지션 적용하기.


주의할 점
1. % 이용할 때 부모 태그를 항상 확인하기. %는 부모 태그의 사이즈에 따라 자식 태그의 사이즈가 결정되기 때문이다.
2. 각각의 요소 그 자체에 트랜지션 적용하기. 그것의 부모 태그에 적용하면 원하는 스타일이 적용되지 않을 수가 있다. 결과에 적용하는 것은 트랜스폼!

3. html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Goods List</title>
    <link rel="stylesheet" href="./goods__list.css" />
  </head>
  <body>
    <div class="container">
      <div class="item">
        <div class="imgBox">
          <img src="./images/item1.jpeg" alt="탁상용 조명" />
        </div>
        <div class="textBox">
          <p class="textBox__name">탁상용 조명</p>
          <p class="textBox__price">260,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item2.png" alt="머그컵" />
        </div>
        <div class="textBox">
          <p class="textBox__name">머그컵</p>
          <p class="textBox__price">32,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item3.jpeg" alt="거실용 슬리퍼" />
        </div>
        <div class="textBox">
          <p class="textBox__name">거실용 슬리퍼</p>
          <p class="textBox__price">28,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item1.jpeg" alt="탁상용 조명" />
        </div>
        <div class="textBox">
          <p class="textBox__name">탁상용 조명</p>
          <p class="textBox__price">260,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item2.png" alt="머그컵" />
        </div>
        <div class="textBox">
          <p class="textBox__name">머그컵</p>
          <p class="textBox__price">32,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item3.jpeg" alt="거실용 슬리퍼" />
        </div>
        <div class="textBox">
          <p class="textBox__name">거실용 슬리퍼</p>
          <p class="textBox__price">28,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item1.jpeg" alt="탁상용 조명" />
        </div>
        <div class="textBox">
          <p class="textBox__name">탁상용 조명</p>
          <p class="textBox__price">260,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item2.png" alt="머그컵" />
        </div>
        <div class="textBox">
          <p class="textBox__name">머그컵</p>
          <p class="textBox__price">32,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item3.jpeg" alt="거실용 슬리퍼" />
        </div>
        <div class="textBox">
          <p class="textBox__name">거실용 슬리퍼</p>
          <p class="textBox__price">28,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item1.jpeg" alt="탁상용 조명" />
        </div>
        <div class="textBox">
          <p class="textBox__name">탁상용 조명</p>
          <p class="textBox__price">260,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item2.png" alt="머그컵" />
        </div>
        <div class="textBox">
          <p class="textBox__name">머그컵</p>
          <p class="textBox__price">32,000 원</p>
        </div>
      </div>
      <div class="item">
        <div class="imgBox">
          <img src="./images/item3.jpeg" alt="거실용 슬리퍼" />
        </div>
        <div class="textBox">
          <p class="textBox__name">거실용 슬리퍼</p>
          <p class="textBox__price">26,000 원</p>
        </div>
      </div>
    </div>
  </body>
</html>

4. css 코드

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: flex-start;
}

/* item에 hidden 처리하기. */
.item {
  width: calc(25% - 7px);
  aspect-ratio: 6/5;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.item:after {
  /* block & content */
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
}

.imgBox {
  width: 100%;
  height: 100%;
  position: absolute;
}

.imgBox img {
  width: 100%;
  height: 100%;
  /* 사진이나 비디오의 규격 맞출 때 object-fit 이용하기. */
  object-fit: cover;
  z-index: 1;
}

.textBox {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px;
  z-index: 3;
}

.textBox p {
  color: white;
  margin: 5px 0 0;
}

.textBox__name {
  font-size: 22px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(50px);
}

.textBox__price {
  font-size: 16px;
  font-weight: 400;
  opacity: 0;
  transform: translateY(50px);
}

/* 마우스 올렸을 때에 기능 추가하기. */
.item:hover:after {
  opacity: 1;
}

/* 기능 1 : 화면 살짝 불투명 + 화면 커지기. */
.item:hover .imgBox img {
  transform: scale(1.1);
  /* 블러 처리하기. */
  filter: blur(3px);
}

/* 기능 2 : 상품 정보 보이면서 위로 올라가기. */
.item:hover .textBox .textBox__name {
  opacity: 1;
  transform: translateY(0px);
}

/* 기능 2 : 상품 정보 보이면서 위로 올라가기. */
.item:hover .textBox .textBox__price {
  opacity: 1;
  transform: translateY(0px);
}

/* 자연스럽게 트랜지션 적용하기. */
.item:after,
.item .imgBox img,
.item .textBox__name,
.item .textBox__price {
  transition: all 0.4s ease-in-out;
}

 

저작자표시

'web > toy project' 카테고리의 다른 글

[precamp] 회원가입 폼 파이널 과제 troubleshooting  (0) 2023.03.24
[강력한 CSS] 웹사이트 제작하기  (0) 2023.03.23
[precamp] 회원가입 폼 파이널 과제  (0) 2023.03.06
[precamp] 나만의 싸이월드 생성하기  (0) 2023.03.06

'web/toy project'의 다른글

  • 현재글[html css] 웹사이트 상품 리스트 제작하기

관련글

티스토리툴바