HTML - Block, Inline

ungHeung·2023년 3월 20일

block display div inline level p span

HTML/CSS

목록 보기

3/4

HTML 요소는 일반적으로 block, inline 레벨을 가지고 있습니다. block은 뭐고 inline은 뭘까요?🤔

block

block 레벨 요소중 가장 많이 사용되는 div와 p를 살펴볼까요?

<div>div</div>
<p>p</p>

어떤가요?
욕심이 얼마나 많은지 한 줄을 전부 차지하는 모습을 확인할 수 있죠? block레벨의 요소는 기본적으로 부모가 허용하고 있는 사용이 가능한 모든 너비를 사용합니다. 그럼 너비를 적게 지정해주면 적게 차지할까요?

<style>
	div {
    	width: 100px;
    }
    
	p {
    	width: 100px;
    }
</style>

100px의 너비를 줬더니 너비가 줄어들었네요! 하지만 그렇다고 해서 밑에 있던 p가 div와 같은 줄로 이동하지는 않았습니다.

block 레벨의 요소는 그 크기(너비)에 상관없이 한 줄을 모두 사용하고 있다는 것을 알 수 있습니다.
그럼 inline 레벨의 요소는 어떤지 살펴볼까요?

inline

이번에는 inline 레벨 요소중 자주 사용되는 span을 살펴봅시다!

<span>span</span>
<span>span span span</span>

spanspan span span

block 레벨의 두 친구들은 너비가 동일했는데,
inline 레벨의 span은 좀 다른 결과가 나왔네요.

inline 레벨의 요소들은 욕심이 없습니다. 한 줄을 모두 사용하지 않을 뿐 아니라 자리도 딱 자기가 필요한 만큼만 사용하죠! 얼마나 필요하냐구요? 자신이 가지고있는 내용(content)가 사용하는 만큼의 너비만큼요! 그렇기 때문에 위와 같이 inline 레벨인 친구들과 함께 있을 수도 있습니다.

block과 inline

두가지 유형의 대표적인 차이점을 정리해보면 block 레벨의 요소는 자신이 주체가 되어서 능동적으로 너비를 가져가고, inline 레벨의 요소는 자신이 가진 내용에 따라 수동적으로 너비가 바뀌게 된다고 볼 수 있는데요. 이로 인해 생기는 차이점들이 또 있습니다.

크기 조절

block 레벨의 요소는 자신이 주인공인 만큼 스타일을 통해 자신의 크기를 지정할 수 있습니다. 하지만 inline 레벨의 요소는 자신의 자식에 의해서만 크기가 정해지기 때문에 크기를 지정할 수 없죠😢

<style>
	div {
    	width: 100px;
        height: 50px;
    }
    
    span {
    	width: 100px;
        height: 50px;
    }
</style>

<div>div</div>
<span>span</span>

차이점들이 보이시나요?
div는 너비, 높이를 지정한 만큼 가지게 되었지만, span은 너비, 높이가 적용되지 않는 것을 볼 수 있습니다. 이 때문에 div는 내용이 없어도 자신을 표시할 수 있지만 span은 내용이 없으면 아무리 큰 너비, 높이를 주어도 표시가 되지 않죠.😭

<style>
	div {
    	width: 100px;
        height: 50px;
    }
    
    span {
    	width: 1000px;
        height: 500px;
    }

</style>

span에 div의 10배나 되는 너비, 높이를 주었지만 내용이 없어서 표시되지 않는 슬픈 모습입니다.

text-align

text-align은 스타일 속성으로 텍스트를 정렬하는 목적을 가지고 있습니다. 갑자기 왠 스타일 속성이냐구요? 잠시만요!

<style>
section {
	/* center : 중앙 정렬 */
	text-align: center;
}

div {
	width: 100px;
}
</style>

<div>div</div>
<span>span</span>

자 차이가 보이시죠?
div와 span의 부모인 section 요소에 텍스트를 가운데로 모아주는 text-align: center 속성을 사용하였더니 span요소가 가운데 정렬이 되었네요! 왜 div는 정렬되지 않았을까요?

제일 처음에 div가 한 줄을 전부 차지하는 욕심쟁이라는 말을 기억하시나요? div의 width를 100px로 지정해주었기 때문에 보여지는 너비는 100px이지만 실제로 차지하는 공간은 여전히 부모인 section이 허용하는 너비를 전부 사용하고 있다는 뜻입니다. 그렇기 때문에 이미 한 줄을 전부 차지하고 있는 div는 더이상 움직일 공간이 없는 것이고, 정렬이 되지 않는 것이죠!

하지만 span은 다릅니다. 자신의 내용 외에는 자리를 차지하지 않기 때문에 자신이 속한 줄에 공간이 많이 남아있고, 또 중앙으로 정렬도 될 수 있는 것입니다.

그렇다면 div는 가운데 정렬을 할 수 없는 것일까요?
언제나 방법은 있습니다!

display, inline-block

요소들은 자신의 기본 level 유형을 가지고 있지만 유형을 변경할 수 있는 방법 또한 가지고 있습니다. 바로 스타일 속성을 이용한 방법인데요! 아직 CSS에 대해 다루지 않았지만 맛보기 정도로 생각하고 한번 공부해봅시다!
(이미 몇개 사용하긴 했지만..😋)

display

display는 요소를 block으로 처리할지 혹은 inline으로 처리할지 정하는 목적을 가집니다. 물론 이 외에도 flex, grid와 같은 레이아웃을 설정하기도 하지만 그건 나중에 공부해보도록 하고, 일단 한번 써보죠!

<style>
	span {
    	display: block;
        width: 100px;
        height: 100px;
    }
    
    div {
    	display: inline;
        width: 100px;
        height: 100px;
    }
</style>

<span></span>
<div>div</div>

짠! 내가 알던 그 찐..같던 그 span이 맞나?
span에 display속성을 통해 block을 줬더니 가진 내용이 없음에도 크기가 웅장해져버린 span
반면 아주 옹졸해져버린 div... 둘의 입장이 뒤바뀐 것을 확인할 수 있습니다.

거기에 그 말안듣던 div를 정렬까지?
(하지만 크기가..😂)

이쯤 되면 이런 생각을 해볼 수 있겠죠!
어? 나는 한 줄에 여러개를 집어넣으면서 크기도 조절하고 정렬도 하고싶은데?
그래서 준비했습니다.

inline-block

inline-block은 inline의 필요한 만큼만 자리를 차지하는 특징과 block의 자신만의 크기를 가질 수 있는 특징만 추출한 레벨 유형입니다. button과 같은 몇몇 요소들은 이 유형을 가지고 있기도 하죠.
긴 말할 것 없이 한번 보시죠!

<style>
	section {
    	text-align: center;
    }
    div {
        display: inline-block;
        width: 100px;
        height: 50px;
    }

    span {
        display: inline-block;
        width: 100px;
        height: 50px;
    }
</style>

<section>
    <div>div</div>
    <span>span</span>
</section>