[수업노트](20.11.03)D+18 float

1. float

 - 상단메뉴 만들때: 한줄에 나오게 하여야한다

    1) display: inline-block 텍스트 요소 사이 공백이 생긴다 (정교한 디자인이 어렵다, 하나하나 수치 수정해야한다)

    2) float: left 공백이 없다 (너비를 %로 지정하면 자동으로 나눠서 맞춰준다.)

 

   * 공백 없애는 방법

   1) li엘리먼트 사이 엔터 공백을 하나하나 지운다

   2) li엘리먼트 사이 엔터 공백을 주석(/*)을 달아 없애준다

   3) CSS font-size-0를 따로 만들어준다

   4) li에 float:left;를 준다.

 

- block요소는 float요소를 무시한다

  → 자식 요소에 float을 썼다면 부모요소는 자식 요소가 없는 줄 알고 높이가 최소화 된다

      그래서 부모요소에 class="row"를 주고 반드시 아래와 같이 마크업한다

      row::after{

                     display:block;

                     content:"";

                     clear:both; }

 

 

* 마지막 .banner에 블럭과 너비를 주는 이유

이미지 요소는 기본값이 인라인이기 때문에 텍스트 라인이 감싸는 위 아래 여백이 사라지지 않기때문에