2021-07-02 (81일차) con-padd, line-2-ellipsis, 'class101'이미지 슬라이드 모작

스와이프 20강~24강

 

 

- con-padd

  : 좌우에 간격을 주기 위해 con 안에 만드는 클래스

  { padding-left : 20px, padding-right : 20px; }

 

- 비율 다른 두 개의 이미지를 같은 비율로 만드는 방법 (전 날 것 복습)

  1 - 배경이미지로 이미지를 넣은 엘리먼트 두개 놓기

  2 - 엘리먼트::after { content : " "; , display : block;, padding-top : 100%; } 고정비율 만들기

  3 - 엘리먼트 { background-size : cover, background-position: center } 고정비율에 이미지 적당히 맞추기

 

- 화면의 크기가 줄어 텍스트가 넘쳐도 두 줄을 유지하고, 그 이상을 넘기면 …으로 표시해줌

  .line-2-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  }

---

- 이미지 리스트 만드는 방법