html에서 블록(block) 태그와 인라인(inline) 태그의 차이점

여기서는 html에서 블록태그와 인라인태그의 차이점에 대해서 간단히 알아보겠습니다.

이러한 블록과 인라인의 개념을 잡는 것이 나중에 css와 html을 잘 사용하는 좋은 방법이 됩니다

 

(1) html 블록(block) 태그

 

블록(block)형태의 속성을 가진 태그들이 블록(block)모양을 가집니다.
항상 새로운 줄에서 시작하며, 해당 줄의 모든 너비를 차지

 

(실습)

<p style=“border: 2px solid red”>p요소는 display 속성값이 블록형태입니다.</p>

 

(화면)

 

(2) html 인라인(inline) 태그

 

인라인(inline)형태의 속성을 가진 태그들이 새로운 줄에서 시작하지 않음
해당 줄의 길이는 전체 중에 일부 내용만 가집니다.

 

(실습)

 <p>
    <span style="border: 2px solid red">span태그</span>는 display 속성값이 인라인형태 태그임
 </p>

(화면)

 

 

자세한 것은 아래 영상을 참고하세요