반응형 그리드 레이아웃 질문

반응형 그리드 레이아웃 질문

QA

반응형 그리드 레이아웃 질문

본문

아래처럼 반응형 으로 그리드 레이아웃 을 만들었습니다.
원하는 해상도별로 하고자하는위치로 잘출력됩니다.
근데 여기서. 문제가 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태그로 옮겨주시는게 좋을 것 같네요,, :)

 

해당 하는 코드들은 공부한다 생각하시고 실제 퍼블리싱된 홈페이지들 코드 뜯어보시면서 공부하시는 것도 좋은 방향입니다.

 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT