🖥️ HTML 인라인(Inline), 블록(Block) 비교하기!

HTML 태그의 성격에는 두 가지가 있습니다. 바로 인라인(Inline)과 블록(Block)입니다. 이 둘의 차이점에 대해 알아봅시다!

 

⭐ 인라인(Inline) 특징

See the Pen blog/inline html by dobbyjang0 (@dobbyjang0) on CodePen.

• x축 정렬 형태로 출력, 한 줄에 출력
• 공간을 만들 수 없음 (css에서 width/height/margin/padding 적용 불가)
• 상하 배치 작업 불가능
• 예 : <span> <strong> <a>, 혹은 css에 display : inline;이라 입력한 요소들

 

⭐ 블록(Block) 특징

See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.

• y축 정렬 형태로 출력, 줄 바꿈이 일어남
• 공간을 만들 수 있음 (css에서 width/height/margin/padding 적용 가능)
• 상하 배치 작업 가능
• 예 : <div> <p> <h#>, 혹은 css에 display : block;이라 입력한 요소들

 

 

🐍 인라인-블록(inline-block) 특징

See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.

• CSS에 display : inline-block; 이라 입력시
• 인라인처럼 한 줄에 출력되지만, 블록처럼 공간을 가진다.