2021-05-17 (35일차) float:left, float, block, content, clear:both, float-grid, max-width, overflow-x:hidden;

145강~147강

 

 

- float : left

  display : inine-block처럼 작동

  → 가로정렬, 띄어쓰기공백 없음, 최소한의 크기로 줄어들음, verticle align:top없이 위에 붙음

 

  문제점 : block요소인 부모는 float를 무시하는 법칙이 있음

  해결방법 : 부모인 block요소가 자식인 float요소를 무시하지 않기 위해 float의 형제에 block요소 추가

 

  문제점 : 추가된 block요소만 부모에게 인식되고, float요소들은 여전히 무시됨

  해결방법 : 추가된 block요소에 clear : both를 주면 모든 문제점 해결

 

  ↓↓↓↓↓↓↓↓최적의 방법↓↓↓↓↓↓↓↓↓

 

  부모>자식 {float:left;}

  부모태그::after {content:""; display:block; clear:both;}

 

 

※ 오직 block요소는 float요소를 무시한다.

※ float:left : 좌에서 우로 나열된다.

※ float:right : 우에서 좌로 나열된다.

※ clear : both : float간의 줄바꿈

   ㄴ clear : both를 주려면 display : block 을 줘야함

 

 

- float-grid

  : inline-grid와 똑같은 효과를 가져옴

  : font-size:0과 verticle align:top을 주는 수고가 없는 장점이 있음

  .float-grid > * { float:left; box-sizing:border-box;}

  .float-grid::after {content:""; display:block; clear:both;}

 

#문제.반응형 상품리스트 1 구현 (튜토리얼23단계)

 

- max-width

  원래 화면창을 줄이면 화면이 넘쳐 스크롤바가 생기지만

  스크롤바를 생기지 않게 하고 화면창을 줄이면 넘친 내용을 줄인 창에 맞게 아래로 보내줌

 

- 가로스크롤바 무조건 생기지 않는 방법

  html, body {overflow-x : hidden;}
  어떠한 경우에도 body 에 가로스크롤바가 생기지 않음