반응형 그리드 레이아웃 질문
본문
아래처럼 반응형 으로 그리드 레이아웃 을 만들었습니다.
원하는 해상도별로 하고자하는위치로 잘출력됩니다.
근데 여기서. 문제가 a링크 태그를 넣으면. 이미지가 코딱지만하게 줄어드는데 원인을 못찾겠습니다 ㅠㅠ
<style>
/* CSS */
.grid-image {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
margin:30px 0;
}
.grid-image img {
width:calc(24.9% - 10px);
margin:0 15px 15px 0;
}
.grid-image img:nth-of-type(4n),
.grid-image img:last-child {
margin-right:0;
}
@media screen and (max-width:640px){
.grid-image img {
width:calc(50% - 15px);
}
}
@media screen and (max-width:480px){
.grid-image img:nth-of-type(2n) {
margin-right:0;
}
.grid-image img:nth-of-type(3n) {
margin-right:15px;
}
}
</style>
<div class="grid-image">
<a href="/"><img alt="" src="/img/main/main001.png" class="ba" onclick="clickBtn();" /></a>
<a href="/"><img alt="" src="/img/main/summer.png" class="ba" onclick="clickBtn();" /></a>
<a href="/"><img alt="" src="/img/main/3.png" class="ba" onclick="clickBtn();" /></a>
<a href="/"><img alt="" src="/img/main/4.png" class="ba" onclick="clickBtn();" /></a>
</div>
<img alt="" src="/img/main/4.png" class="ba" onclick="clickBtn();" />
이렇게는 원하는 대로 정상출력되구요
<a href="/"><img alt="" src="/img/main/4.png" class="ba" onclick="clickBtn();" /></a>
이렇게 감싸면 크기가 작아집니다 ㅠㅠ
답변 3
img 에 달아둔 width calc 를 a태그로 주셔야 할 것 같은데요,, a태그가 상단에 뭐가 정의되어있는진 모르겠지만
일단 저런 형태에서는 a태그로 내부의 width: calc(100%/4) 이런식으로 넓이 잡아주시고
내부의 이미지는
width : 100%로 잡는게 비율 조정생각하시면 더 편하실 것 같습니다.
그렇게 되면 a태그로만 width calc / margin-right 정리하면 되시는데
img로 엄청 번거롭게 하신 것 같아서,, img에 온클릭 태그도 a태그로 옮겨주시는게 좋을 것 같네요,, :)
해당 하는 코드들은 공부한다 생각하시고 실제 퍼블리싱된 홈페이지들 코드 뜯어보시면서 공부하시는 것도 좋은 방향입니다.
아 지금 처럼 쓰시려면 그냥 a 빼시면 될 것같은데,, 상단에 뭐가 정의되어있나봐요..
크롬 등에서 F12 눌러 a 태그에 지정된 클래스가 어디서 오는지 확인해보세요.
<img style="width:20px;height:20px" src="/img/main/4.png" class="ba" onclick="clickBtn();" />
답변을 작성하시기 전에 로그인 해주세요.
