block 요소
대부분의 html 요소들은 block 요소이다.
예를 들어, <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 있다.
이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.
block 요소들은 width: 100% 가 디폴트 값으로 설정되어있기 때문에 중복으로 줄 필요가 없다.
inline 요소
<span>, <a>, <img> 태그 등이 있다.
inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.
inline은 해당 태그가 가지고 있는 크기 만큼 차지하도록 되어있기 때문에 margin과 padding 속성은 좌우 간격만 반영되며 따로 지정할 수 없다. 인라인 속성을 가진 태그끼리 연속으로 사용하는 경우에는 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.
inline-block
display: inline-block;
inline과 같이 한 줄에 표현하면서도 margin, width, height 속성을 표현할 수 있다. inline-block 속성을 기본값으로 가지고 있는 태그는 없으며 작성자가 css를 통해 inline-block을 선언해 주어야 사용할 수 있다.
float
block 인 property들을 inline 속성으로 바꿔줌
img {
float: none; // 기본값
float: right; // 오른쪽에 배치
float: left; // 왼쪽에 배치
}🔸 clear 속성 : float 해제
float속성이 더 이상 유용하지 않다고 알려 주는 속성이다.
float: left 를 이용해 왼쪽으로 배치했다면 clear: left로 종료하고, float : right를 이용해 왼쪽으로 배치했다면 clear: right로 무효화 시킨다.
float속성값이 left인지 right 인지 상관없이 무조건 기본상태로 되돌리고 싶다면 clear: both 로 지정
Layout 짤 때 float 보다 flex를 사용하니까 훨씬 편함을 알 수 있다.
