HTML 입문 | HTML 공간 분할 | HTML 블럭(block)과 인라인(inline)
HTML 블럭(block)과 인라인(inline)
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가진다.
대부분의 HTML 요소는 기본적으로 display 속성값으로 다음 두 가지 값 중 하나를 가지게 된다.
- 블록(block) 속성을 갖는 요소
- 인라인(inline) 속성을 갖는 요소
그 밖에 inline-block 속성도 있는데, 블럭(block)과 인라인(inline) 두 속성의 중간 단계이다.
inline-block 속성을 기본값으로 가지고 있는 태그는 없다. 여기서 설명을 하자면 길어지기에 따로 설명을 하지는 않겠다.
블록(block) 속성을 갖는 요소
display 속성값이 블록(block)인 요소는 언제나 새로운 줄(line)로 바뀌며, 해당 줄의 모든 너비를 차지한다.
display 속성값이 블록(block)인 대표적인 요소는 아래와 같다.
<div><h1>-<h6><p><ul><ol><form>
블록 속성의 특징은 아래와 같다.
- 블록 속성을 가지고 있는 태그는 기본적으로 너비 100%(
width: 100%) 속성을 가지고 있다. 화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 되는 것이다. - 또한, 인라인 요소와 다르게
margin, width, height속성을 정의하면 모두 적용된다. 모양새를 쉽게 제어할 수 있는 속성 때문에 대부분 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용한다.
<div> 요소
<div> 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.
<div> 요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.
<div style="background-color:lightgrey; color:green;">
<h1>오늘의 명언</h1>
<p>오늘 내가 죽어도 세상은 바뀌지 않는다. 하지만 내가 살아 있는 한 세상은 바뀐다.</p>
</div>
인라인(inline) 속성을 갖는 요소
display 속성값이 인라인(inline)인 요소는 새로운 줄(line)로 바꾸지 않고 다른 요소와 같이 표시된다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.
display 속성값이 인라인(inline)인 대표적인 요소이다.
<span><a><img><strong>
인라인 속성의 특징은 아래와 같다.
- 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않는다. 인라인 요소의 상, 하 여백은
margin속성이 아니라line-height속성에 의해 발생한다. - 너비(
width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다. - 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.
<span>요소
<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소이다. <span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.
나는 당신을 <span style="color:red">사랑</span>합니다.
블럭(block)과 인라인(inline) 속성 태그 표기시 주의할 점
블럭(block)은 인라인(inline)을 포괄하는 더 큰 개념이다. 따라서 HTML을 마크업 할 때는 Inline 속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 된다.
나쁜 예제
<span><p>문장입니다.</p></span>
좋은 예제
<p><span>문장입니다.</span></p>
부득이한 경우에는 인라인(inline) 속성의 태그를 CSS에서 span { display: block } 과 같이 정의하여 임의로 block 속성으로 변경할 수 있지만, CSS는 표준 문법 규칙을 지키는 것을 원칙으로 한다. 여기서는 인라인(inline)이 블럭(block)보다 작은 개념이라는 것을 잊지말도록 하자.