inline, inline-block, block 에 대해서

최형택·2021년 12월 29일
0

목차

▼ inline
▼ inline-block
▼block

1.inline

태그는 inline요소 입니다.

block 과 달리 줄 바꿈이 되지 않고, 그 자체 텍스트 성질을 갖고 있습니다. 즉 텍스트 크기만큼만 존재하고 width와 height값을 지정할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.

span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다.

2.inline-block

block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있습니다. 즉 inline의 줄바꿈이 되지 않는 텍스트 자체 성질을 가지면서도 block의 크기를 지정할 수 있는 요소를 반반 섞어놓은 것이라고 볼 수 있겠습니다.

3.block

block요소는 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다.

p 태그, h 태그#, li 태그 를 한번 떠올려 보면

보통 줄바꿈이 되는 경우가 있습니다

또한 width, height 속성을 지정할 수 있다는 특징이 있습니다.

0개의 댓글