📍 컨텐츠의 공간을 차지하는 방법들 (display 속성 3가지)
- display: inline ;
- 한글에서 사용하는 '어울림' 과 유사함
- width, height 값의 적용이 되지 않는다.
- margin 적용 X, padding 적용 O
- 대표 태그: span, a 등
- display: block;
- 한글에서 사용하는 '자리 차지' 와 유사함
- 옆 자리가 있어도 모두 차지해서 나란히 둘수가 없음.
- width 나 height 값을 지정 O
- margin, padding 다 적용 O
- 대표 태그: div, p, h1~h6
📍 CSS 레이아웃 - float
- 레이아웃 박스를 left, right 로 나눌 수 있음
- 태그들의 기본값-> float: none;
- float 는 배치를 공중에 띄워서 하므로 (2층 사는 느낌) ,
float 가 지정되지 않은 뒷 태그가 밑으로 배치되어 안보일 때가 있음.
→ 숨어버린 태그 컨텐츠에 clear
를 속성을 부여하여 float 의 영향을 안받게 해줘야함.
(보통 clear: both; 많이 사용함)
📌 생각정리
간단하게 레이아웃 배치할때 사용하기 좋은 float!