1) 학습한 내용

1.화면 너비에 따른 아이콘 개수

(1)1217px보다 클 때

아이콘이 한줄에 9개씩

<style>
  .customer_icon ul li{
  width: calc(100% / 9);
  }
</style>

(2)1217px보다 작을 때

아이콘이 한줄에 8개씩

<style>
  @media screen and (max-width:1217px) {
      .customer_icon ul li{width: calc(100% / 8);}
  }
</style>

(3)940px보다 작을 때

아이콘이 한줄에 4개씩

<style>
  @media screen and (max-width: 940px){
      .customer_icon ul li{width: calc(100% / 4 - 6%); margin: 0 3% 30px 3%;}
  }
</style>

2.더보기 버튼 설정

(1)더보기 버튼 추가

클릭 전 더보기버튼이 보임

<style>
.fa-circle-plus::before{
    content:url("https://cdn-icons-png.flaticon.com/64/1828/1828817.png") 
}
</style>

(2)1217px보다 클 때

더보기 버튼이 나타나지 않음

<style>
.customer_icon .load{
    background: transparent; 
    cursor: pointer; 
    border: none; 
    display: none;
}
</style>

(3)1217px보다 작을 때

더보기버튼이 보임

<style>
@media screen and (max-width:1217px) {
    .customer_icon ul li{width: calc(100% / 8);}
    .customer_icon ul li .img-wrap{width: 10vw; height: 10vw;}
    .customer_icon ul{margin: 0 5%;}
    .customer_icon .load{display: initial;}
}
</style>

(4)더보기 버튼 클릭 후

더보기버튼이 사라지고 아이콘들이 다 나타남

2) 학습내용 중 어려웠던 점

1217px보다 화면이 넓을 때 li태그의 너비가 일정하지 않아 아이콘이 계속 9개씩이 아니라 하나씩 밀렸다

3) 해결방법

li 태그 css에서 margin:10px 을 적어놓아서 li태그의 너비가 일정하지 않음을 알게 되어 수정하였다.

4) 학습소감

더보기 버튼을 클릭했을 때 남은 아이콘이 나타나는 것을 개발자도구를 참고해 작성은 하였지만 상세한 코드를 이해하지 못해서 공부를 더 해야할 것 같다