[CSS 기초-1] Block Vs inline

1. 개요

대부분의 html의 요소는 block 입니다.
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>등이 그러한 element(요소) 입니다.

block이라는 단어대로 한 라인에 옆에 다른 요소가 올 수 없는 형태입니다.

반면, inline(' 같은 줄')이라는 뜻과 같이 같은 줄에 inline의 element가 함께 위치할 수 있습니다.

예시를 보면 다음과 같습니다.
1-4 라인은 block element인 paragraph로 작성 되었습니다.
4번 라인은 오른쪽 정렬을 해도 왼쪽의 공간이 남습니다.
한 라인을 다 차지하기 때문이죠.
반면, inline element인 span은 오른쪽 정렬을 해도 공간이 남게 되었습니다.
(텍스트의 양만큼만 공간을 차지하네요.)

 

2. inline과 block 한 번 정하면 못 바꾸는건가요?.. 

결론 부터 얘기드리자면 변경하여 사용할 수 있습니다.
block element인 <p> 태그도 CSS를 사용하면 <span>과 같은 inline으로 변경하여 사용 가능합니다.

inline 성질을 갖게하는 property로 display와 float가 있습니다.

아래 CSS 코드를 보겠습니다.
.inline-p라는 class의 정의로 inline-block 형태로 변경 하였습니다.(첫 번째 코드단락)

반대로 block-span class는 inline 형태를 block으로 변경 하였습니다.(두 번째 코드단락)

/* block 형태를 inline으로 */
.inline-p {
  display: inline-block;
}

/* inline 형태를 block으로 */
.block-span {
  display: block;
}