18일차
오늘도 계속되는 오류 속에서 며칠 간 해결되지 않던 visual 부분의 문제가 해결되었다.
처음에는 이렇게 글자 별 스타일이 적용되지 않았다.
<div class="visual_text">
<div class="title">
<p class="page-start">지금 러쉬는</p>
<p>더 신선하게 준비중!</p>
</div>
<p class="description">곧, 러쉬 공식 앱 스토어로 찾아올게요.</p>
</div>최대한 이렇게 나눠서 css에서도 각 클래스 별로 나눠 적용했었다.
.visual .visual_text {
z-index: 2;
padding-left: 104px;
position: absolute;
left: 50%;
bottom: 14%;
width: 1224px;
transform: translateX(-50%);
color: #fff;
font-size: 56px;
}
.visual .visual_text .title {
z-index: 6;
font-weight: 700;
line-height: 72px;
}
.visual .visual_text .description {
z-index: 10;
margin-top: 32px;
font-size: 18px;
line-height: 24px;
}지인의 조언을 받아 문제는 간단히 해결 되었다.
우선 .title와 .description 앞의 .visual_text를 지우는 것이었고,
그 다음은 크롬의 캐시를 삭제하는 일이었다.
그렇게 하고나니 정말 감쪽 같이 적용이 되었다.
지금은 위에 작성한 코드대로 적어도 동일한 모습을 보이는 걸 보니 캐시를 주기적으로 삭제해줘야 할 것 같다.
그리고 어제 말한, 이중 swiper는 결국 문제가 발생했다.
다행스럽게도 겉부분의 첫번째 swiper는 정상적으로 작동하는데 내부의 2번째(원형 아이콘)가 움직이지 않는다.
완전히 적용 전, 별개로 분리했을 때는 원형 아이콘도 정상적으로 움직였던거 보면 두개를 겹치는 과정에서 문제가 발생한 것 같다.
내일이 마감이라 다른 부분부터 다 해놓고 이 부분 마무리가 남았다.
swiper 작동되지 않는 것 외에도
왼쪽 이미지에는 hover가 작동하지만 정렬이 되지 않고, 오른쪽 원형들은 hover조차 먹지않고 있다.
이부분을 어떻게든 해결해서 제출할 수 있음 좋겠다.
