반응형
요소과 화면에 출력되는 특성을 크게 두가지로 구분한다.
인라인(inline)요소와 블록(block)요소로 나눠진다.
먼저 인라인(inline)요소는 글자를 만들기 위한 요소들이고
블록(block)요소는 상자(레이아웃)를 만들기 위한 요소들이다.
대표적인 inline요소는 <span></span> 태그 이다.
이 태그는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다.
(요소가 수평으로 쌓인다.)
포함한 콘텐츠 크기만큼 상하좌우 크기가 자동으로 줄어든다.
또한 요소의 가로(width), 세로(height)의 너비를 지정하는 CSS속성을 사용하여도 반응이 없다.
요소의 외부 여백(margin)속성과 내부 여백(padding)속성은 사용 가능하다.
Block요소는 대표적으로 <div></div>태그가 있다.
블록요소는 요소가 수직으로 쌓이며 부모 요소의 크기만큼 자동으로 늘어나고 포함된 콘텐츠 크기만큼 자동으로 줄어든다.
또한 가로(width)와 세로(height) 너비를 지정하는 CSS속성이 사용가능하고 외부여백(margin)과 내부여백(padding)을 지정하는 속성도 사용 가능하다.