inblog logo
|
harimmon
    HTML

    [HTML] 2. HTML의 블록 vs 인라인

    백하림's avatar
    백하림
    Mar 06, 2025
    [HTML] 2. HTML의 블록 vs 인라인 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>빈박스 : block (inset 영역포함)</div>   <!--inset 영역-->
    <div>빈박스 : block (inset 영역포함)</div>  <!--inset 영역-->
    <span>랩핑박스 : inline</span>  <!--inline 영역-->
    <span>랩핑박스 : inline</span>  <!--inline 영역-->
</body>
</html>
    notion image
    💡

    1. 블록 요소 (block)

    • 한 줄 전체를 차지하며 줄 바꿈이 자동으로 발생함
    • 대표적인 예: <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <section> 등
    • width와 height 속성을 지정할 수 있음

    🔹 예제 코드:

    <div>빈박스 : block (inset 영역포함)</div>
<div>빈박스 : block (inset 영역포함)</div>
    📌 두 개의 <div> 요소가 존재하며, 각각 새로운 줄에서 시작됨.
    💡

    2. 인라인 요소 (inline)

    • 컨텐츠의 크기만큼만 영역을 차지하며, 줄 바꿈이 발생하지 않음
    • 대표적인 예: <span>, <a>, <strong>, <em>, <label> 등
    • width와 height 속성은 적용되지 않음 (컨텐츠 크기에 맞춰짐)

    🔹 예제 코드:

    <span>랩핑박스 : inline</span>
<span>랩핑박스 : inline</span>
    📌 <span> 요소는 연속해서 표시되며, 줄 바꿈 없이 이어짐.

    블록 요소와 인라인 요소의 차이점 요약

    요소 유형
    줄 바꿈 발생
    크기 지정 가능
    대표 태그
    Block
    ✅ (자동 줄 바꿈)
    ✅ (width, height 적용 가능)
    <div>, <p>, <h1> ~ <h6>, <ul>, <ol>
    Inline
    ❌ (줄 바꿈 없음)
    ❌ (내용 크기만큼 자동 설정)
    <span>, <a>, <strong>, <em>
     
    Share article

    harimmon

    RSS·Powered by Inblog