CSSBlock/InLine
Block
Block 속성은 Inline과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지합니다. 대표적인 블록 요소로 <p> 태그가 있습니다.
display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.
예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.
block은 height와 width 값을 지정 할 수 있다.
margin과 padding을 지정 할 수 있다.
InLine
Inline 속성이란, 쉽게 말해 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향입니다.
display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.
예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다.
inline은 width와 height를 명시 할 수 없다.margin은 위아래엔 적용 되지 않는다.
padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.
inline의 특징
- 너비(width)와 높이(height)속성이 적용되지 않고 태그가 품고있는 내부요소의 부피에 맞춰진다.
- margin은 위아래엔 적용 되지 않는다.
- padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.
- 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해 좌우에 5px 가량의 여백(margin)이 자동으로 발생한다.
inline의 종류
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>,
<button>, <cite>, <code>, <dfn>, <em>, <i>, <img>,
<input>, <kbd>, <label>, <map>, <object>, <q>, <samp>,
<small>, <script>, <select>,
<span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>
inline-block
inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다.
block의 특징
- 줄바꿈이 이루어지지 않는다.
- block처럼 width와 height를 지정 할 수 있다.
- 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
태그 중첩 규칙
- 블럭 태그는 자식으로 또다른 블럭 태그 or 인라인 태그를 가질 수 있다.
- 인라인태그는 자식으로 또다른 인라인태그만 올 수 있다.(블럭태그는 올 수 없다.)
- 예외로 블럭 태그 중 <p>태그는 자식으로 인라인 태그만 가질 수 있다.