14.float로 만든 Grid

1.float로 만든 Grid의 핵심

• float 기반으로 만든 grid는 width가 %를 사용해서 만들어진다는 것

• float기반의 grid를 잡을때, grid의 모습이 변화할수 있는 부분의 layout은, 하나로만 grid의 너비를 잡는것이 아니라 클래스를 추가시키면, 언제라도 다른 grid의 모습으로 변화할수 있게 만들어야한다.

2.float로 만든 Grid의 한계

• 1)float를 이용해 내가 원하는 한줄을 만들기가 생각보다 까다롭다

float도 이용해야하고 그로인해 발생하는 문제를 해결하기위해 clear도 해줘야하고 negarive margin도 해줘야하고

• 2)콘텐츠의 양이 달라질때, px값으로 높이를 정한것이 아니기 때문에 높이가 고정되어 있지 않는다.

• 제목의 문제를 해결하기위해 양을 늘더라도 다 보이는게 아니라 … 으로 보이게끔 만들었다.

.item-contents h2 {
  white-space: nowrap;
  /* 줄바꿈 X*/
  overflow: hidden;
  /* 화면을 빠져나와버린 h2내용을 숨김 */
  text-overflow: ellipsis;
  /* 숨겨진 내용을 ... 으로 만듬 but 이 속성은 한줄일경우에만 가능하다. 여러줄 불가능*/
}

• 안의 내용 역시 양이 늘경우 틀을 빠져나오는 경우가 발생한다. 이걸 해결하기 위해 5줄만 보이게끔 하고, 나머지는 … 으로 나타나개 했다. 즉 높이를 같게 함으로써 이러한 문제를 해결

.item-contetns p {
  line-height: 1.6;
  /* 줄과 줄간격을 조절함, 1이라 하면 줄간격이 콘텐츠 높이만큼 됨 */
  height: 8em;

  overflow: hidden;
}

3.float는 Grid를 만들기 위한 기능이 아니다 !!

• float의 목적은 블록요소를 가로배치 하기 위해서이다. 즉 Grid를 만들기 위한 용도는 아니다 따라서 Grid를 만들기 위한 또다른 방법이 있는데, 나중에 그것에 대해서 배워볼것이다.