생각보다 하루에 배우는 양이 많아 그때그때 정리하는 것이 더 편할듯

  1. float: 이미지 주위를 텍스트로 감쌀 때 사용. 근데 이미지 뿐만 아니라 한 태그를 다른 태그들이 감쌀 때 사용한다고 보는 것이 맞는듯.
    • left: 이미지를 왼쪽에 두고, 텍스트가 이미지를 감싼다.
    • right: 이미지를 오른쪽에 두고, 텍스트가 이미지를 감싼다.
    • none: float 안한다는건데, default임. 굳이 왜 존재하는지 모르겠음.
    • inherit: parent의 float성질을 가져옴.
  1. clear: 여기는 float 하지 마라
    • left: 왼쪽에는 float 하지 마라
.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}

이렇게 작성하면 float: left; 이기 때문에 왼쪽에 두고 텍스트로 감싸고 싶어지나, clear: left 가 설정되어있어 왼쪽에 이미지를 두고 감쌀 수 없고 오히려 위로 한칸 올라가게됨

  • float: right; & clear: right 도 같은 효과가 있음
  1. .clearfix: 이미지가 너무 커서 넘칠 때 사용
    .clearfix {
    overflow: auto;
    }
    이렇게 하면 이미지가 선택된 영역을 넘어가지 않음.
  1. overflow: 컨텐츠양이 방대해서 정해진 공간을 초과할 때 어떻게 대응할 지 결정
    • hidden: 초과되는 내용은 보여주지 않음
    • scroll: 스크롤 바 추가
    • auto: 필요할 때만 스크롤 바 추가