위의 그림에서 노란색 부분이 차지하는것이 영역입니다.
1, 2, 3, 4번째 줄에 해당되는것이 block이고 5번째 줄에 해당되는것이 inline이다.
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>
< 대표적인 block 태그들이다. >
<span>, <a>, <img>
< 대표적인 inline 태그들이다. >
하지만 이는 css를 통해 성질을 바꿀수 있다.
.inline-p { display: inline-block; } .float-left { float: left; } .float-right { float: right; }
이와 같은 값을 css 속성을 줌으로서 inline 속성을 가질 수 있다.
.block-span { display: block; }
inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.
position에는 총 4가지 값이 존재한다.
이중 static은 기본값이다.
이는 static이었을때 기준으로 상하좌우로 움직입니다.
이는 position: static 속성을 가지고 있지 않은 부모를 기준으로 상하좌우로 움직입니다. 만약 부모중 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
이는 사용자가 보는 화면을 기준으로 고정됩니다.
간단하게 설명하자면 해당 클래스에 해당되는 부분을 띄워서 배치하는것이다. 띄워지기 때문에 기존의 div태그 등의 문단으로 묶이지 않고 전체적인 모양을 흩트려 놓는다. 때문에 사용되는것이 clear이다.
float 요소를 가진 부모태그에 css로 clear:both;를 작성하게되면 해당 부모는 float효과를 받지 않고 float된 요소를 감싸게 됩니다.