css(inline, block, inline-block)

정의

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다. 여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하겠습니다.

block level elements

div는 표준 블록 레벨 엘리먼트입니다. 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다. 자주 볼 수 있는 다른 블록 레벨 엘리먼트로 p와 form이 있으며, HTML5에서 새로 추가된 엘리먼트로 header와 footer, section 등이 있습니다.

• block 레벨 엘리먼트 요소 : address, article, aside, blockquote, div, header, h1 등이 있다.
• 👉 한 줄에 하나씩 배치가 되는 것으로 이해하면 될 것 같다.

inline

span은 표준 인라인 엘리먼트입니다. 인라인 엘리먼트는 단락 안에서 이처럼 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있습니다. 링크에 사용하는 a 엘리먼트는 가장 흔히 볼 수 있는 인라인 엘리먼트입니다.

• inline 엘리먼트 요소 : a, i, span, img, strong, ,input, button 등이 있다.
• 👉 block 레벨 엘리먼트와는 다르게, inline 요소의 경우

block, inline 실제 적용

<header>안녕하세요</header>
<h1>안녕히가세요</h1>
<span>안녕</span>
<span>안녕</span>

위의 코드를 실행시켰을 때, block 레벨 엘리먼트에 해당하는header와 h1태그는 줄이 바뀌어서 나오고inline요소에 해당하는 span의 경우 한 줄에 실행이 된다.

참고 사이트

https://www.daleseo.com/css-display-inline-block/