HTML - display(인라인, 인라인블록, 블록) 개념 이해하기

웹 페이지를 만들 때, 콘텐츠를 어떻게 배치하고 스타일링할지 결정하는 것은 매우 중요합니다. 이때 인라인(Inline), 인라인블록(Inline-Block), 블록(Block)이라는 세 가지 디스플레이 속성을 이해하는 것이 핵심입니다. 이 글에서는 이 세 가지 속성의 차이점을 쉽게 설명하고, 예시 코드를 통해 실제로 어떻게 사용되는지 알아보겠습니다.

 

display - inline, inline-block, block 개념

display - inline, inline-block, block 개념

 

1. 블록(Block) 요소

2. 인라인(Inline) 요소

3. 인라인블록(Inline-Block) 요소

4. 블록, 인라인, 인라인블록의 차이점

5. 예시 HTML 코드

6. 결론론

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

 

블록(Block) 요소

블록 요소는 웹 페이지에서 전체 너비를 차지하는 요소입니다. 이 요소는 기본적으로 줄 바꿈이 되며, 다른 요소들과 수직으로 쌓이는 특징이 있습니다. 블록 요소는 <div>, <p>, <h1>~<h6>, <ul>, <li> 등이 대표적입니다. 아래는 블록요소 list 입니다.

 

블록 요소의 특징

• 줄 바꿈: 블록 요소는 항상 새로운 줄에서 시작합니다.
• 너비와 높이: 너비(width)와 높이(height)를 지정할 수 있습니다.
• 패딩, 테두리, 마진: 상하좌우 모든 방향에 패딩, 테두리, 마진을 적용할 수 있습니다.
• 배경색: 배경색을 지정하면 콘텐츠 영역과 패딩 영역에 적용됩니다.

 

일반 블록 요소

• <address> : 주소 정보를 나타냄
• <article> : 독립적인 콘텐츠 섹션
• <aside> : 부가적인 내용 (사이드바 등)
• <blockquote> : 인용문
• <canvas> : 그래픽을 위한 캔버스 요소
• <dd> : 정의 목록에서 설명 부분
• <div> : 문서의 구획을 나누는 일반적인 블록 요소
• <dl> : 정의 목록 (description list)
• <dt> : 정의 목록에서 용어 부분
• <fieldset> : 폼 요소 그룹화
• <figcaption> : <figure> 요소에 대한 캡션
• <figure> : 이미지, 도표, 코드 등의 독립적 콘텐츠 그룹
• <footer> : 페이지나 섹션의 하단 부분
• <form> : 사용자 입력을 위한 폼
• <h1> ~ <h6> : 제목 요소 (제목 크기별)
• <header> : 섹션 또는 문서의 머리말
• <hr> : 주제 변경을 나타내는 수평선
• <li> : 목록 항목 (unordered, ordered list 둘 다 포함)
• <main> : 문서의 주요 콘텐츠
• <nav> : 내비게이션 링크 그룹
• <noscript> : 스크립트 미지원 환경에서 표시할 내용
• <ol> : 순서가 있는 목록 (ordered list)
• <p> : 문단 (paragraph)
• <pre> : 공백과 줄 바꿈을 유지하는 서식 있는 텍스트
• <section> : 문서의 논리적 구획
• <table> : 표 (테이블)
• <ul> : 순서 없는 목록 (unordered list)

 

테이블 관련 블록 요소

• <caption> : 테이블의 제목
• <colgroup> : <col> 요소를 그룹화
• <tbody> : 테이블 본문 부분
• <tfoot> : 테이블 푸터 부분
• <thead> : 테이블 헤더 부분
• <tr> : 테이블 행 (row)

 

폼 관련 블록 요소

• <legend> : <fieldset> 요소의 제목
• <output> : 계산 또는 사용자 작업의 결과 표시

 

블록 요소 예시

<div class="block">display: block;</div>
<div class="block">display: block;</div>
<div class="block">display: block;</div>

 

인라인(Inline) 요소

인라인 요소는 콘텐츠 크기만큼만 공간을 차지하는 요소입니다. 줄 바꿈 없이 한 줄 안에 여러 개의 인라인 요소가 들어갈 수 있습니다. 인라인 요소는 <span>, <a>, <em>, <strong> 등이 대표적입니다. 아래는 인라인 요소 list 입니다.

 

인라인 요소의 특징

• 줄 바꿈 없음: 인라인 요소는 줄 바꿈 없이 한 줄 안에 배치됩니다.
• 너비와 높이: 너비와 높이를 지정할 수 없습니다. 콘텐츠 크기에 따라 자동으로 조정됩니다.
• 패딩과 마진: 좌우 패딩과 마진만 적용됩니다. 상하 패딩과 마진은 적용되지 않습니다.
• 배경색: 배경색을 지정하면 콘텐츠 영역과 좌우 패딩 영역에 적용됩니다.

 

텍스트 관련 인라인 요소

• <a> : 하이퍼링크
• <abbr> : 약어 (마우스 호버 시 전체 의미 표시 가능)
• <b> : 굵은 텍스트 (의미 없음)
• <bdi> : 특정 텍스트를 현재 방향과 독립적으로 렌더링
• <bdo> : 텍스트 방향 지정 (dir="rtl" 등)
• <br> : 줄 바꿈 (self-closing)
• <cite> : 인용 제목 (책, 논문, 영화 제목 등)
• <code> : 코드 텍스트 (기본적으로 모노스페이스 폰트 사용)
• <data> : 기계가 읽을 수 있는 데이터 값 제공
• <dfn> : 정의되는 용어 강조
• <em> : 강조 텍스트 (기본적으로 이탤릭)
• <i> : 기울임 텍스트 (의미 없음, 단순 스타일)
• <kbd> : 키보드 입력 표시
• <mark> : 하이라이트된 텍스트
• <q> : 짧은 인라인 인용문
• <rp> : 루비 문자(발음 가이드)의 대체 텍스트
• <rt> : 루비 문자(발음 가이드)
• <ruby> : 일본어 루비 문자(발음 가이드) 래퍼
• <s> : 취소선 (삭제되었거나 더 이상 유효하지 않은 텍스트)
• <samp> : 샘플 출력 (컴퓨터 시스템에서 출력된 텍스트)
• <small> : 작은 텍스트
• <span> : 스타일링을 위한 인라인 컨테이너
• <strong> : 중요한 텍스트 (기본적으로 굵게)
• <sub> : 아래첨자 텍스트
• <sup> : 위첨자 텍스트
• <time> : 날짜 또는 시간 정보
• <u> : 밑줄 (의미 없음, 스타일 용도)
• <var> : 변수 텍스트 (수학 또는 코드 변수)
• <wbr> : 줄 바꿈 가능 위치 지정 (강제 개행 X)

 

미디어 및 인터랙티브 관련 인라인 요소

• <audio> (일부 속성 설정 시) : 오디오 삽입
• <img> : 이미지 삽입 (self-closing)
• <map> : 이미지 맵
• <area> : 이미지 맵의 클릭 가능한 영역 (self-closing)
• <object> : 외부 객체 포함 (예: 플래시, PDF, Java 애플릿 등)
• <param> : <object> 요소의 매개변수 설정 (self-closing)
• <source> : <audio> 및 <video>의 소스 파일 지정 (self-closing)
• <track> : <video> 및 <audio>의 자막 설정 (self-closing)
• <video> : 비디오 삽입

 

폼(form) 관련 인라인 요소

• <button> : 클릭 가능한 버튼
• <input> : 사용자 입력 필드 (self-closing)
• <label> : 입력 필드와 연결된 텍스트 라벨
• <select> : 드롭다운 리스트
• <option> : <select> 요소의 옵션 항목
• <optgroup> : <option> 그룹화
• <textarea> : 여러 줄 입력 필드
• <output> : 계산된 결과 표시

 

추가 예외

• <script>, <style> 은 문맥에 따라 인라인처럼 동작할 수도 있지만, 일반적으로 별도의 블록 요소로 취급된다.
• <svg> 내부의 일부 태그 (<tspan>, <text>, <use> 등)도 인라인 요소처럼 동작.
• <iframe> 는 독립적인 문서를 포함하지만 기본적으로 인라인 요소로 취급됨.

 

인라인 요소 예시

<span class="inline">display:inline;</span>
<span class="inline">display:inline;</span>
<span class="inline">display:inline;</span>
<span class="inline">display:inline;</span>

 

인라인블록(Inline-Block) 요소

인라인블록 요소는 인라인 요소와 블록 요소의 특징을 모두 가진 요소입니다. 줄 바꿈 없이 한 줄 안에 배치되지만, 너비와 높이를 지정할 수 있습니다. 인라인블록 요소는 <button>, <input>, <img> 등이 대표적입니다. 아래는 인라인블록요소 list 입니다.

 

인라인블록 요소의 특징

• 줄 바꿈 없음: 인라인블록 요소는 줄 바꿈 없이 한 줄 안에 배치됩니다.
• 너비와 높이: 너비와 높이를 지정할 수 있습니다.
• 패딩, 테두리, 마진: 상하좌우 모든 방향에 패딩, 테두리, 마진을 적용할 수 있습니다.
• 배경색: 배경색을 지정하면 콘텐츠 영역과 패딩 영역에 적용됩니다.

 

대표적인 인라인 블록 요소

• <button> : 클릭 가능한 버튼
• <input> : 사용자 입력 필드
• <img> : 이미지 삽입

 

추가적인 인라인 블록 요소

• <select> : 드롭다운 리스트
• <textarea> : 여러 줄 입력 필드
• <meter> : 미터 게이지(진행률 표시)
• <progress> : 진행 상태 표시 (로딩 바 등)
• <video> : 비디오 삽입 (기본적으로 display: inline-block;)
• <audio> : 오디오 삽입 (일부 브라우저에서 controls 속성을 추가하면 inline-block으로 변경됨)
• <canvas> : 그래픽을 그릴 수 있는 캔버스 요소
• <iframe> : 다른 웹 페이지 포함 (기본적으로 inline-block)
• <object> : 외부 객체(플래시, PDF 등) 포함
• <embed> : 외부 콘텐츠 포함 (예: 플래시, 오디오, 비디오 등)
• <map> : 이미지 맵
• <svg> : 벡터 그래픽 삽입

 

인라인블록 요소 예시

<div class="inline-block">display:inline-block;</div>
<div class="inline-block">display:inline-block;</div>
<div class="inline-block">display:inline-block;</div>

 

블록, 인라인, 인라인블록의 차이점

특징	블록 요소	인라인 요소	인라인 블록 요소
줄 바꿈	항상 새로운 줄에서 시작	줄 바꿈 없이 한 줄 안에 배치	줄 바꿈 없이 한 줄 안에 배치
너비와 높이	지정 가능	지정 불가능	지정 가능
패딩, 테두리, 마진	상하좌우 모두 적용	좌우만 적용	상하좌우 모두 적용
배경색	콘텐츠와 패딩 영역에 적용	콘텐츠와 좌우 패딩 영역에 적용	콘텐츠와 패딩 영역에 적용

 

예시 HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="블록, 인라인, 인라인블록 요소의 차이점을 쉽게 이해할 수 있는 예시입니다.">
    <title>블록 vs 인라인 vs 인라인블록</title>
    <style>
        /* 블록 요소 스타일 */
        .block {
            display: block;
            width: 200px;
            padding: 20px;
            margin: 5px;
            background-color: #f8d7da;
            border: 2px solid red;
        }

        /* 인라인 요소 스타일 */
        .inline {
            display: inline;
            padding: 10px;
            margin: 5px;
            background-color: #f8d7da;
            border: 2px solid red;
        }

        /* 인라인블록 요소 스타일 */
        .inline-block {
            display: inline-block;
            width: 100px;
            padding: 20px;
            margin: 5px;
            background-color: #f8d7da;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <h1>블록, 인라인, 인라인블록의 차이점</h1>
    
    <!-- 블록 요소 예시 -->
    <h2>display: block;</h2>
    <div class="block">display: block;</div>
    <div class="block">display: block;</div>
    <div class="block">display: block;</div>

    <!-- 인라인 요소 예시 -->
    <h2>display: inline;</h2>
    <span class="inline">display:inline;</span>
    <span class="inline">display:inline;</span>
    <span class="inline">display:inline;</span>
    <span class="inline">display:inline;</span>

    <!-- 인라인블록 요소 예시 -->
    <h2>display: inline-block;</h2>
    <div class="inline-block">display:inline-block;</div>
    <div class="inline-block">display:inline-block;</div>
    <div class="inline-block">display:inline-block;</div>

    <!-- 추가 설명 -->
    <p>
        블록 요소는 전체 너비를 차지하고, 인라인 요소는 콘텐츠 크기만큼만 차지합니다. 인라인블록 요소는 줄 바꿈 없이 한 줄 안에 여러 개가 들어갈 수 있으며, 너비와 높이를 지정할 수 있습니다.
    </p>
</body>
</html>

 

예시 HTML 결과

블록, 인라인, 인라인블록

 

결론

블록, 인라인, 인라인블록 요소는 웹 디자인의 기본 개념입니다. 블록 요소는 전체 너비를 차지하며 줄 바꿈이 되고, 인라인 요소는 콘텐츠 크기만큼만 차지하며 줄 바꿈 없이 배치됩니다. 인라인블록 요소는 줄 바꿈 없이 한 줄 안에 여러 개가 들어갈 수 있으며, 너비와 높이를 지정할 수 있습니다.