HTML-CSS : float, 가변적 단위, 물리적 단위

질문 내용

1. 아래를 설명하시오.

• float
• overflow:hidden
• both : clear

2. html 에서 가변적 단위와 물리적 단위의 종류는?

개인 작성

1. float는 block tag를 나란히 배치하고자 할 때 주로 사용한다.

• float
  - 해당 속성은 요소를 페이지의 왼쪽이나 오른쪽으로 띄우는 데 사용
  -> 요소를 띄워서, 요소가 다른 요소와 나란히 배치되도록 함.
  - 원래 이미지를 텍스트 주위로 띄우는 용도로 만들어짐.
  -> 현재는 다양한 레이아웃을 만드는데 주로 사용
  -> 일부 예상치 못한 동작이 발생할 수 있음(ex : 부모 요소가 자식 요소의 높이를 정확하게 계산하지 못하는 경우)
  -> 이를 막기 위해, overflow 속성을 활용

- float 속성 사용 시
	-> 부모 태그에는 overflow : hidden를 선언 및 할당
	-> 이후 태그들엔 clear:both를 선언 및 할당
  이 강제된다.	
  
  물론 위와 같은 문제점은 밑에 있는 요소들을, 다른 부모 요소로 묶어서 
  clear:both를 선언하는 방법으로 해결할 수 있다.

• overflow: hidden
  - 부모 요소가 자식 요소의 크기와 위치를 올바르게 인식할 수 있음
  -> 부모 요소가, 자식 요소의 내용이나 레이아웃에 따라 동적으로 조절되어야 할 때 유용

• clear: both
  - 주로, float 속성을 사용한 요소의 아래에 다른 요소들이 어떻게 배치될지를 지정하는 데 사용
  -> 위에서 float를 활용해버리면, 아래 요소들을 순서대로 배치하려면 clear:both를 다 선언해야 하는 상황이 나오게 됨.

물리적 단위 : mm, cm, pt 등
가변적 단위 : em, % 등

---

px는 물리적 단위인가, 가변적 단위인가?

• px : pixel
  -> 해상도 : 화면에 표시되는 픽셀의 수. 픽셀은 단위이다.
• 실제 픽셀 크기는 분명 물리적인 단위이다.
  -> CSS에서는, px 단위가 실제 픽셀 크기와 다를 수 있다는 개념이 더 받아들여지는 중

---