어제 "그" 오류를 해결했다.
역시 사파리 디버깅이 최고다 힝..
어떤 것이 오류였냐면은!
전체후기 보러가기를 감싸고 있었던 컨테이너가 <a>태그였는데,
display가 초기값인 inline으로 설정돼있어서 <a>태그 자체의 크기가 없었다.
구조를 보여드리자면은!
<html>
<a href="https://blog.naver.com/solutioner_jk/223256553833" class="container">
<div class="gridContainer">
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
<div class="itemContainer">
<div class="item"></div>
</div>
</div>
<div class="btnWrap">
<h3>전체후기<br>보러가기</h3>
<img src="./image/arrow.svg" alt="section5Arrow">
</div>
</a>
</html>좀 복잡하지만
하단에 .btnWrap이 왼쪽으로 정렬되는 오류였습니다.
요 .btnWrp을 감싸고 있는 부모가 <a>태그 .container인데,
여기다가 dispaly: block;을 주니까 말끔히 해결되었습니다.
부모 요소의 크기가 없다보니 갈피를 못잡았나봅니다.
저녁놀 마을 사람