[CSS] 리액트 적용 전 서브 페이지 만들기 (1)

메인 중앙 container 만 수정해줘서

피그마 도안

안에 아이템들을 채워줄 예정.

- grid 사용해주기

- hover 시 효과

---

1차 HTML 만들어주기

HTML

 <!-- 중앙 메인 콘텐트 -->
        <main>
          <div class="image-container">
            <img src="img/logo.svg" alt="로고" class="logo-image" />
          </div>
          <div class="item-container">
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
            <div class="item"><img src="img/ring_1.jpg" /></div>
          </div>
        </main>

우선 이렇게 html 을 짜줬다.

 

3개씩 3줄을 만들어줄 예정이므로

flex 보다는 grid 를 쓸 예정.

---

CSS

// 서브페이지 아이템
.item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열로 균등 분할 */
  gap: 2vw; /* 아이템 간 간격 */
}

.item {
  border: 1px solid black;
  img {
    object-fit: cover;
    width: 100%; // 이거 해야 창 확대 할 때 안 어긋남.
  }
}

grid 로 분할

gap 은 vw 를 줘서 화면 축소나 늘릴 시 유동적으로 gap 을 유지할 수 있도록 했다.

border 은 임시로 주고,

img 는 width: 100% 을 해야 창에 균열이 안생겨서 부여해줌.

이렇게 피그마 도안처럼 만들어주고 싶음.

피그마에서 갖고 온 도안.

Drop shadow 를 살펴보면 이렇게 돼있다.

Stroke (Inside) 부터 구현하기

 box-sizing: border-box; /* border가 요소 내부에 포함되도록 설정 */
  border: 1px solid $main_color; /* 원하는 색상과 두께로 border 설정 */

border는 기본적으로 요소의 바깥쪽에 적용

Inside 효과를 재현하려면, box-sizing을 border-box로 설정하기

+ 메인컬러를 적용시켰다.

 

Drop Shadow 구현하기

 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

• box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  • 0px: X축 방향 그림자 이동 없음 (Offset-X).
  • 4px: Y축 방향 그림자 이동 (Offset-Y).
  • 4px: 그림자의 블러 반경 (Blur).
  • 0px: Spread 값 (이 값은 피그마에서 0이므로 생략됩니다).
  • rgba(0, 0, 0, 0.25): 그림자의 색상과 투명도 (0.25는 25% 투명도를 의미).

피그마 설정:

• X (Offset-X): 0
• Y (Offset-Y): 4
• Blur: 4
• Spread: 0
• Color: rgba(0, 0, 0, 0.25) (여기서 25%는 0.25의 투명도로 변환됩니다)

---

hover 할 때 적용되게 하기

 

// 서브페이지 아이템
.item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열로 균등 분할 */
  gap: 2vw; /* 아이템 간 간격 */
  .item {
    img {
      object-fit: cover;
      width: 100%; // 이거 해야 창 확대 할 때 안 어긋남.
    }
    &:hover {
      box-sizing: border-box; /* border가 요소 내부에 포함되도록 설정 */
      border: 1px solid $main_color; /* 원하는 색상과 두께로 border 설정 */
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }
  }
}

SCSS 를 써서 한군데에 모아 정리해줬다.