페이지를 연결하고 css를 적용하는 과정에서 작은 오류들을 해결한 과정에 대해 적어보려 한다.
맡아서 제작했던 컴포넌트가 아니었기에 따로 글을 구분해서 작성하지는 않고, 한번에 적어보겠다.
내가 작성한 코드가 아니어서 오류의 원인을 발견하고 수정하는 데 시간이 꽤 걸렸지만, 오히려 코드를 분석하고 오류를 찾아내는 경험을 기르기에 좋은 기회였다고 생각한다.
1. swiper 이미지 overflow 충돌 해결
hover css를 적용하는 과정에서 swiper의 이미지가 확대될 때, swiper의 크기에 막혀 확대 부분이 안보이게 잘려지는 것을 발견했다.
swiper에 overflow:hidden이 적용되어 있었기 때문인데,
처음에는 hidden을 visible로 바꾸어 이미지가 swiper 밖으로 확대되도록 하려고 했다.
그러나 overflow:visible로 변경하자 swiper의 모든 길이가 화면에서 숨겨지지 않고 화면 밖으로 넘어가 레이아웃이 이상해져 이 방법은 실패했다.
따라서 overflow의 충돌을 막기 위해 swiper의 모든 요소를 감싸고 있는 전체 요소인 swiper-back을 이용해 이미지가 확대되는 것을 표현해보자는 생각을 했다.
swiper-back 요소에 overflow:hidden을 주어 swiper를 숨겨주고, swiper에는 overflow:hidden을 부여해 이미지가 밖으로 확대되어 보이도록 만들었다.
<article class="swiper-back">
<div class="swiper-name">인기 상품</div>
<div class="swiper">
<a href="/html/all_product_page.html"
><button type="button" class="btn btn-outline-dark plus-btn-item">
<svg
width="20"
height="20"
fill="currentColor"
class="bi bi-plus-lg"
style="margin-right: 5px; margin-bottom: 3px"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
/></svg>더보기
</button></a
>
<div class="swiper-wrapper">
<img class="swiper-slide" src="/item_jpgs/item1.jpg" />
<img class="swiper-slide" src="/item_jpgs/item2.jpg" />
<img class="swiper-slide" src="/item_jpgs/item3.jpg" />
<img class="swiper-slide" src="/item_jpgs/item4.jpg" />
<img class="swiper-slide" src="/item_jpgs/item5.jpg" />
<img class="swiper-slide" src="/item_jpgs/item6.jpg" />
<img class="swiper-slide" src="/item_jpgs/item7.jpg" />
<img class="swiper-slide" src="/item_jpgs/item8.jpg" />
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev">
<div class="material-icons">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
</svg>
</div>
</div>
<div class="swiper-button-next">
<div class="material-icons">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
</svg>
</div>
</div>
</div>
</article>
.swiper-back {
background-color: #C9D6DE;
overflow: hidden;
}
.swiper {
width: 100%;
position: relative;
overflow: visible;
}
.swiper-slide {
transition: transform 0.2s ease 0.3s;
}
.swiper-slide:hover {
transform: scale(1.3);
z-index: 10;
}
이미지가 swiper 밖으로 확대되는 것에 성공했지만, 한가지 아쉬운 점은 전과 비슷하게 swiper-back에 hidden이 적용되어 있어 그 이상 이미지가 확대되지 않는다는 점이었다.
다음에 더 실력을 키워서 현재보다 좋은 해결방법을 찾을 수 있으면 좋겠다.
swiper 이미지 확대
2. swiper에 더보기 버튼 추가
swiper에서 상품을 확인할 수 있는 연결 도구가 구현되지 않아서 더보기 버튼을 통해 상품 페이지로 이동하도록 만들어야겠다고 의견을 나눴다.
버튼 컴포넌트를 맡아서 진행했었기 때문에 내가 구현을 하게 되었다.
먼저, 만들어둔 버튼 컴포넌트를 활용해 버튼은 쉽게 넣을 수 있었다.
그러나 swiper의 크기에 버튼이 가려져 버튼이 눌리지 않는다는 문제가 발생했다.
버튼을 앞으로 가져오기 위해 z-index를 사용해보기도 했으나 같은 이유로 버튼이 작동하지 않아 실패했다.
따라서 버튼을 swiper 안으로 같이 넣어보자고 생각했고, swiper 영역 안으로 버튼을 옮겨주었더니 버튼이 가려지지 않고 정상적으로 작동했다.
버튼이 작동되는 것을 확인하고 버튼 위치를 오른 쪽에 두고 싶었기 때문에 float:right 속성을 사용해 위치를 변경해주었다.
<a href="/html/all_product_page.html">
<button type="button" class="btn btn-outline-dark plus-btn-item">
<svg
width="20"
height="20"
fill="currentColor"
class="bi bi-plus-lg"
style="margin-right: 5px; margin-bottom: 3px"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
/></svg>더보기
</button>
</a>
.plus-btn-item {
float: right;
margin-right: 10px;
margin-bottom: 10px;
z-index: 5;
}
