Block Element vs Inline Element
HTML 요소에는 '블록 레벨 요소'와 '인라인 레벨 요소'라는 개념이 존재합니다.
HTML 모든 요소들은 브라우저의 뷰포트 좌측 상단부터 배치가됩니다.
block 요소의 특징
ex) <div>, <p>, <h1>, ... // -> display: block;이 기본값.-
width 값 명시하지 않은 경우, html 구조상 부모 요소의 content 영역에서 사용 가능한 최대 가로 너비를 사용합니다(
width: 100%;, 블로킹).
height 값 명시하지 않은 경우,heigth: 0;부터 시작하여 자신이 갖는 content 영역의 세로 너비 합만큼 갖는다. -
width 값 명시한 경우, html 구조상 부모 요소의 남은 가로 너비를 margin으로 채웁니다. 즉, block 요소의 옆에는 다른 요소가 올 수 없습니다(블로킹).
-
크기(width, height)를 사용자가 직접 설정할 수 있습니다.
-
width: 100%; height: 0;부터 시작합니다.
실제 코드상에서는width: auto; height: auto;로 설정되어 있습니다.
블록 요소 안 Content에 따라 높이(heigth)가 늘어납니다. -
수직(위에서 아래)으로 요소가 배치됩니다. 즉, 언제나 html 구조상 부모 요소의 한 라인을 block 요소가 단독으로 배치됩니다.
-
margin, padding, border의 위, 아래, 좌, 우 모두 사용자가 설정할 수 있습니다.
-
블록 요소는 대부분 레이아웃을 잡는 용도로 사용합니다.
inline 요소의 특징
ex) <span>, <img />, ...-
필요한 만큼의 너비를 사용합니다. 즉, 블록 요소처럼 가로 너비를 전부 사용하지 않고 대신에 자신이 갖고 있는 어떤 내용(Content)만큼 가로 너비를 사용합니다. height 값 또한 자신의 Content 영역만큼 사용합니다.
-
크기(width, heigth)를 사용자가 직접 설정할 수 없습니다.
-
width: 0; heigth: 0;부터 시작을 합니다. 가로, 세로 너비는 요소가 포함하는 내용(Content)만큼 늘어납니다. 실제 코드상에는 블록 요소와 동일하게width: auto; height: auto;로 설정되어 있습니다. -
요소가 수평(왼쪽에서 오른쪽)으로 배치됩니다. 즉, block 요소 처럼 html 구조상 부모 요소의 한 라인을 block 요소가 단독으로 사용하지 않습니다. 또한 코드 작성시 요소간 줄바꿈을 사용하면 요소간 공백이 생기게 됩니다.
-
margin, padding, border를 좌, 우만 사용할 수 있습니다(위, 아래 사용 불가).
-
일반적으로 텍스트를 다룰 때 사용합니다.
블록 요소와 인라인 요소의 width와 heigth의 auto값이 다르게 구현된다는 점에 주의해야 합니다.
위 특성은 정확히 일치하지는 않지만 대부분의 블록 요소와 인라인 요소는 해당 특성을 갖게 됩니다. 정확히 해당 특성들을 모두 갖지 않는다는 것에 주의하고 일반적으로 위 특성을 갖는다는 것입니다.
inline-block 요소의 특징
-
inline 요소처럼 기본적으로 자신의 content 만큼 너비를 가집니다. 즉, width, heigth 값을 명시하지 않은 경우 자신이 갖고 있는 Content의 너비만큼 갖습니다.
-
inline 요소와 달리 width, hieght, margin, padding 속성을 사용할 수 있습니다(위, 아래, 좌, 우 모두 사용 가능).
-
수평으로 배치됩니다. 즉, 가로 너비를 명시하더라도 html 구조상 부모 요소의 남은 가로 너비를 margin으로 채우지 않고, 명시하지 않더라도 width 값을 100%로 사용하지 않습니다.
요소 특성 바꾸기
인라인 요소를 강제적으로 블록 요소로 바꿀 수 있습니다. CSS에서 display 속성의 값으로 block을 작성하게 되면 해당 인라인 요소는 블록 요소의 특징을 갖게 됩니다. 반대로 블록 요소의 display 속성 값으로 inline을 작성하게 되면 해당 블록 요소는 인라인 요소의 특징을 갖게 됩니다.
기본적으로 블록 요소는 display: block;을 기본값으로 갖고 있고, 인라인 요소는 display: inline;을 기본값으로 갖고 있습니다.
HTML에는 크게 블록 요소와 인라인 요소가 존재하며 이것은 실제로 CSS의 display 속성에 영향을 받습니다.
포함 규칙
요소의 Content로 다른 요소를 포함하여 부자관계를 형성할 수 있습니다.
이때 포함 규칙이 존재합니다.
-
display: block;인 블록 요소는 Content로 블록, 인라인 요소 모두 포함할 수 있습니다. -
display: inline;인 인라인 요소는 Content로 인라인 요소만을 포함할 수 있습니다. 즉, 블록 요소를 Content로 가질 수 없습니다.
